helianthus.js 9.7 KB

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