green.js 9.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. var theme = {
  2. // 默认色板
  3. color: [
  4. '#26B99A', '#34495E', '#BDC3C7', '#3498DB',
  5. '#9B59B6', '#8abb6f', '#759c6a', '#bfd3b7'
  6. ],
  7. // 图表标题
  8. title: {
  9. itemGap: 8,
  10. textStyle: {
  11. fontWeight: 'normal',
  12. color: '#408829'
  13. }
  14. },
  15. // 值域
  16. dataRange: {
  17. color: ['#1f610a', '#97b58d']
  18. },
  19. // 工具箱
  20. toolbox: {
  21. color: ['#408829', '#408829', '#408829', '#408829']
  22. },
  23. // 提示框
  24. tooltip: {
  25. backgroundColor: 'rgba(0,0,0,0.5)',
  26. axisPointer: {// 坐标轴指示器,坐标轴触发有效
  27. type: 'line', // 默认为直线,可选为:'line' | 'shadow'
  28. lineStyle: {// 直线指示器样式设置
  29. color: '#408829',
  30. type: 'dashed'
  31. },
  32. crossStyle: {
  33. color: '#408829'
  34. },
  35. shadowStyle: {// 阴影指示器样式设置
  36. color: 'rgba(200,200,200,0.3)'
  37. }
  38. }
  39. },
  40. // 区域缩放控制器
  41. dataZoom: {
  42. dataBackgroundColor: '#eee', // 数据背景颜色
  43. fillerColor: 'rgba(64,136,41,0.2)', // 填充颜色
  44. handleColor: '#408829' // 手柄颜色
  45. },
  46. grid: {
  47. borderWidth: 0
  48. },
  49. // 类目轴
  50. categoryAxis: {
  51. axisLine: {// 坐标轴线
  52. lineStyle: {// 属性lineStyle控制线条样式
  53. color: '#408829'
  54. }
  55. },
  56. splitLine: {// 分隔线
  57. lineStyle: {// 属性lineStyle(详见lineStyle)控制线条样式
  58. color: ['#eee']
  59. }
  60. }
  61. },
  62. // 数值型坐标轴默认参数
  63. valueAxis: {
  64. axisLine: {// 坐标轴线
  65. lineStyle: {// 属性lineStyle控制线条样式
  66. color: '#408829'
  67. }
  68. },
  69. splitArea: {
  70. show: true,
  71. areaStyle: {
  72. color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
  73. }
  74. },
  75. splitLine: {// 分隔线
  76. lineStyle: {// 属性lineStyle(详见lineStyle)控制线条样式
  77. color: ['#eee']
  78. }
  79. }
  80. },
  81. timeline: {
  82. lineStyle: {
  83. color: '#408829'
  84. },
  85. controlStyle: {
  86. normal: {color: '#408829'},
  87. emphasis: {color: '#408829'}
  88. }
  89. },
  90. // K线图默认参数
  91. k: {
  92. itemStyle: {
  93. normal: {
  94. color: '#68a54a', // 阳线填充颜色
  95. color0: '#a9cba2', // 阴线填充颜色
  96. lineStyle: {
  97. width: 1,
  98. color: '#408829', // 阳线边框颜色
  99. color0: '#86b379' // 阴线边框颜色
  100. }
  101. }
  102. }
  103. },
  104. map: {
  105. itemStyle: {
  106. normal: {
  107. areaStyle: {
  108. color: '#ddd'
  109. },
  110. label: {
  111. textStyle: {
  112. color: '#c12e34'
  113. }
  114. }
  115. },
  116. emphasis: {// 也是选中样式
  117. areaStyle: {
  118. color: '#99d2dd'
  119. },
  120. label: {
  121. textStyle: {
  122. color: '#c12e34'
  123. }
  124. }
  125. }
  126. }
  127. },
  128. force: {
  129. itemStyle: {
  130. normal: {
  131. linkStyle: {
  132. strokeColor: '#408829'
  133. }
  134. }
  135. }
  136. },
  137. chord: {
  138. padding: 4,
  139. itemStyle: {
  140. normal: {
  141. lineStyle: {
  142. width: 1,
  143. color: 'rgba(128, 128, 128, 0.5)'
  144. },
  145. chordStyle: {
  146. lineStyle: {
  147. width: 1,
  148. color: 'rgba(128, 128, 128, 0.5)'
  149. }
  150. }
  151. },
  152. emphasis: {
  153. lineStyle: {
  154. width: 1,
  155. color: 'rgba(128, 128, 128, 0.5)'
  156. },
  157. chordStyle: {
  158. lineStyle: {
  159. width: 1,
  160. color: 'rgba(128, 128, 128, 0.5)'
  161. }
  162. }
  163. }
  164. }
  165. },
  166. gauge: {
  167. startAngle: 225,
  168. endAngle: -45,
  169. axisLine: {// 坐标轴线
  170. show: true, // 默认显示,属性show控制显示与否
  171. lineStyle: {// 属性lineStyle控制线条样式
  172. color: [[0.2, '#86b379'], [0.8, '#68a54a'], [1, '#408829']],
  173. width: 8
  174. }
  175. },
  176. axisTick: {// 坐标轴小标记
  177. splitNumber: 10, // 每份split细分多少段
  178. length: 12, // 属性length控制线长
  179. lineStyle: {// 属性lineStyle控制线条样式
  180. color: 'auto'
  181. }
  182. },
  183. axisLabel: {// 坐标轴文本标签,详见axis.axisLabel
  184. textStyle: {// 其余属性默认使用全局文本样式,详见TEXTSTYLE
  185. color: 'auto'
  186. }
  187. },
  188. splitLine: {// 分隔线
  189. length: 18, // 属性length控制线长
  190. lineStyle: {// 属性lineStyle(详见lineStyle)控制线条样式
  191. color: 'auto'
  192. }
  193. },
  194. pointer: {
  195. length: '90%',
  196. color: 'auto'
  197. },
  198. title: {
  199. textStyle: {// 其余属性默认使用全局文本样式,详见TEXTSTYLE
  200. color: '#333'
  201. }
  202. },
  203. detail: {
  204. textStyle: {// 其余属性默认使用全局文本样式,详见TEXTSTYLE
  205. color: 'auto'
  206. }
  207. }
  208. },
  209. textStyle: {
  210. fontFamily: '微软雅黑, Arial, Verdana, sans-serif'
  211. }
  212. }