infographic.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. define(function() {
  2. var theme = {
  3. // 默认色板
  4. color: [
  5. '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
  6. '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
  7. '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
  8. ],
  9. // 图表标题
  10. title: {
  11. textStyle: {
  12. fontWeight: 'normal',
  13. color: '#27727B' // 主标题文字颜色
  14. }
  15. },
  16. // 值域
  17. dataRange: {
  18. x:'right',
  19. y:'center',
  20. itemWidth: 5,
  21. itemHeight:25,
  22. color:['#C1232B','#FCCE10']
  23. },
  24. toolbox: {
  25. color : [
  26. '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
  27. '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD'
  28. ],
  29. effectiveColor : '#ff4500'
  30. },
  31. // 提示框
  32. tooltip: {
  33. backgroundColor: 'rgba(50,50,50,0.5)', // 提示背景颜色,默认为透明度为0.7的黑色
  34. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  35. type : 'line', // 默认为直线,可选为:'line' | 'shadow'
  36. lineStyle : { // 直线指示器样式设置
  37. color: '#27727B',
  38. type: 'dashed'
  39. },
  40. crossStyle: {
  41. color: '#27727B'
  42. },
  43. shadowStyle : { // 阴影指示器样式设置
  44. color: 'rgba(200,200,200,0.3)'
  45. }
  46. }
  47. },
  48. // 区域缩放控制器
  49. dataZoom: {
  50. dataBackgroundColor: 'rgba(181,195,52,0.3)', // 数据背景颜色
  51. fillerColor: 'rgba(181,195,52,0.2)', // 填充颜色
  52. handleColor: '#27727B' // 手柄颜色
  53. },
  54. // 网格
  55. grid: {
  56. borderWidth:0
  57. },
  58. // 类目轴
  59. categoryAxis: {
  60. axisLine: { // 坐标轴线
  61. lineStyle: { // 属性lineStyle控制线条样式
  62. color: '#27727B'
  63. }
  64. },
  65. splitLine: { // 分隔线
  66. show: false
  67. }
  68. },
  69. // 数值型坐标轴默认参数
  70. valueAxis: {
  71. axisLine: { // 坐标轴线
  72. show: false
  73. },
  74. splitArea : {
  75. show: false
  76. },
  77. splitLine: { // 分隔线
  78. lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
  79. color: ['#ccc'],
  80. type: 'dashed'
  81. }
  82. }
  83. },
  84. polar : {
  85. axisLine: { // 坐标轴线
  86. lineStyle: { // 属性lineStyle控制线条样式
  87. color: '#ddd'
  88. }
  89. },
  90. splitArea : {
  91. show : true,
  92. areaStyle : {
  93. color: ['rgba(250,250,250,0.2)','rgba(200,200,200,0.2)']
  94. }
  95. },
  96. splitLine : {
  97. lineStyle : {
  98. color : '#ddd'
  99. }
  100. }
  101. },
  102. timeline : {
  103. lineStyle : {
  104. color : '#27727B'
  105. },
  106. controlStyle : {
  107. normal : { color : '#27727B'},
  108. emphasis : { color : '#27727B'}
  109. },
  110. symbol : 'emptyCircle',
  111. symbolSize : 3
  112. },
  113. // 折线图默认参数
  114. line: {
  115. itemStyle: {
  116. normal: {
  117. borderWidth:2,
  118. borderColor:'#fff',
  119. lineStyle: {
  120. width: 3
  121. }
  122. },
  123. emphasis: {
  124. borderWidth:0
  125. }
  126. },
  127. symbol: 'circle', // 拐点图形类型
  128. symbolSize: 3.5 // 拐点图形大小
  129. },
  130. // K线图默认参数
  131. k: {
  132. itemStyle: {
  133. normal: {
  134. color: '#C1232B', // 阳线填充颜色
  135. color0: '#B5C334', // 阴线填充颜色
  136. lineStyle: {
  137. width: 1,
  138. color: '#C1232B', // 阳线边框颜色
  139. color0: '#B5C334' // 阴线边框颜色
  140. }
  141. }
  142. }
  143. },
  144. // 散点图默认参数
  145. scatter: {
  146. itemStyle: {
  147. normal: {
  148. borderWidth:1,
  149. borderColor:'rgba(200,200,200,0.5)'
  150. },
  151. emphasis: {
  152. borderWidth:0
  153. }
  154. },
  155. symbol: 'star4', // 图形类型
  156. symbolSize: 4 // 图形大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
  157. },
  158. // 雷达图默认参数
  159. radar : {
  160. symbol: 'emptyCircle', // 图形类型
  161. symbolSize:3
  162. //symbol: null, // 拐点图形类型
  163. //symbolRotate : null, // 图形旋转控制
  164. },
  165. map: {
  166. itemStyle: {
  167. normal: {
  168. areaStyle: {
  169. color: '#ddd'
  170. },
  171. label: {
  172. textStyle: {
  173. color: '#C1232B'
  174. }
  175. }
  176. },
  177. emphasis: { // 也是选中样式
  178. areaStyle: {
  179. color: '#fe994e'
  180. },
  181. label: {
  182. textStyle: {
  183. color: 'rgb(100,0,0)'
  184. }
  185. }
  186. }
  187. }
  188. },
  189. force : {
  190. itemStyle: {
  191. normal: {
  192. linkStyle : {
  193. color : '#27727B'
  194. }
  195. }
  196. }
  197. },
  198. chord : {
  199. itemStyle : {
  200. normal : {
  201. borderWidth: 1,
  202. borderColor: 'rgba(128, 128, 128, 0.5)',
  203. chordStyle : {
  204. lineStyle : {
  205. color : 'rgba(128, 128, 128, 0.5)'
  206. }
  207. }
  208. },
  209. emphasis : {
  210. borderWidth: 1,
  211. borderColor: 'rgba(128, 128, 128, 0.5)',
  212. chordStyle : {
  213. lineStyle : {
  214. color : 'rgba(128, 128, 128, 0.5)'
  215. }
  216. }
  217. }
  218. }
  219. },
  220. gauge : {
  221. center:['50%','80%'],
  222. radius:'100%',
  223. startAngle: 180,
  224. endAngle : 0,
  225. axisLine: { // 坐标轴线
  226. show: true, // 默认显示,属性show控制显示与否
  227. lineStyle: { // 属性lineStyle控制线条样式
  228. color: [[0.2, '#B5C334'],[0.8, '#27727B'],[1, '#C1232B']],
  229. width: '40%'
  230. }
  231. },
  232. axisTick: { // 坐标轴小标记
  233. splitNumber: 2, // 每份split细分多少段
  234. length: 5, // 属性length控制线长
  235. lineStyle: { // 属性lineStyle控制线条样式
  236. color: '#fff'
  237. }
  238. },
  239. axisLabel: { // 坐标轴文本标签,详见axis.axisLabel
  240. textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
  241. color: '#fff',
  242. fontWeight:'bolder'
  243. }
  244. },
  245. splitLine: { // 分隔线
  246. length: '5%', // 属性length控制线长
  247. lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
  248. color: '#fff'
  249. }
  250. },
  251. pointer : {
  252. width : '40%',
  253. length: '80%',
  254. color: '#fff'
  255. },
  256. title : {
  257. offsetCenter: [0, -20], // x, y,单位px
  258. textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
  259. color: 'auto',
  260. fontSize: 20
  261. }
  262. },
  263. detail : {
  264. offsetCenter: [0, 0], // x, y,单位px
  265. textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
  266. color: 'auto',
  267. fontSize: 40
  268. }
  269. }
  270. },
  271. textStyle: {
  272. fontFamily: '微软雅黑, Arial, Verdana, sans-serif'
  273. }
  274. };
  275. return theme;
  276. });