infographic.js 8.5 KB

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