infographic.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. (function (root, factory) {if (typeof define === 'function' && define.amd) {
  2. // AMD. Register as an anonymous module.
  3. define(['exports', 'echarts'], factory);
  4. } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
  5. // CommonJS
  6. factory(exports, require('echarts'));
  7. } else {
  8. // Browser globals
  9. factory({}, root.echarts);
  10. }
  11. }(this, function (exports, echarts) {
  12. var log = function (msg) {
  13. if (typeof console !== 'undefined') {
  14. console && console.error && console.error(msg);
  15. }
  16. };
  17. if (!echarts) {
  18. log('ECharts is not Loaded');
  19. return;
  20. }
  21. var colorPalette = [
  22. '#C1232B','#27727B','#FCCE10','#E87C25','#B5C334',
  23. '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
  24. '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
  25. ];
  26. var theme = {
  27. color: colorPalette,
  28. title: {
  29. textStyle: {
  30. fontWeight: 'normal',
  31. color: '#27727B'
  32. }
  33. },
  34. visualMap: {
  35. color:['#C1232B','#FCCE10']
  36. },
  37. toolbox: {
  38. iconStyle: {
  39. normal: {
  40. borderColor: colorPalette[0]
  41. }
  42. }
  43. },
  44. tooltip: {
  45. backgroundColor: 'rgba(50,50,50,0.5)',
  46. axisPointer : {
  47. type : 'line',
  48. lineStyle : {
  49. color: '#27727B',
  50. type: 'dashed'
  51. },
  52. crossStyle: {
  53. color: '#27727B'
  54. },
  55. shadowStyle : {
  56. color: 'rgba(200,200,200,0.3)'
  57. }
  58. }
  59. },
  60. dataZoom: {
  61. dataBackgroundColor: 'rgba(181,195,52,0.3)',
  62. fillerColor: 'rgba(181,195,52,0.2)',
  63. handleColor: '#27727B'
  64. },
  65. categoryAxis: {
  66. axisLine: {
  67. lineStyle: {
  68. color: '#27727B'
  69. }
  70. },
  71. splitLine: {
  72. show: false
  73. }
  74. },
  75. valueAxis: {
  76. axisLine: {
  77. show: false
  78. },
  79. splitArea : {
  80. show: false
  81. },
  82. splitLine: {
  83. lineStyle: {
  84. color: ['#ccc'],
  85. type: 'dashed'
  86. }
  87. }
  88. },
  89. timeline: {
  90. lineStyle: {
  91. color: '#27727B'
  92. },
  93. controlStyle: {
  94. normal: {
  95. color: '#27727B',
  96. borderColor: '#27727B'
  97. }
  98. },
  99. symbol: 'emptyCircle',
  100. symbolSize: 3
  101. },
  102. line: {
  103. itemStyle: {
  104. normal: {
  105. borderWidth:2,
  106. borderColor:'#fff',
  107. lineStyle: {
  108. width: 3
  109. }
  110. },
  111. emphasis: {
  112. borderWidth:0
  113. }
  114. },
  115. symbol: 'circle',
  116. symbolSize: 3.5
  117. },
  118. candlestick: {
  119. itemStyle: {
  120. normal: {
  121. color: '#C1232B',
  122. color0: '#B5C334',
  123. lineStyle: {
  124. width: 1,
  125. color: '#C1232B',
  126. color0: '#B5C334'
  127. }
  128. }
  129. }
  130. },
  131. graph: {
  132. color: colorPalette
  133. },
  134. map: {
  135. label: {
  136. normal: {
  137. textStyle: {
  138. color: '#C1232B'
  139. }
  140. },
  141. emphasis: {
  142. textStyle: {
  143. color: 'rgb(100,0,0)'
  144. }
  145. }
  146. },
  147. itemStyle: {
  148. normal: {
  149. areaColor: '#ddd',
  150. borderColor: '#eee'
  151. },
  152. emphasis: {
  153. areaColor: '#fe994e'
  154. }
  155. }
  156. },
  157. gauge: {
  158. axisLine: {
  159. lineStyle: {
  160. color: [[0.2, '#B5C334'],[0.8, '#27727B'],[1, '#C1232B']]
  161. }
  162. },
  163. axisTick: {
  164. splitNumber: 2,
  165. length: 5,
  166. lineStyle: {
  167. color: '#fff'
  168. }
  169. },
  170. axisLabel: {
  171. textStyle: {
  172. color: '#fff'
  173. }
  174. },
  175. splitLine: {
  176. length: '5%',
  177. lineStyle: {
  178. color: '#fff'
  179. }
  180. },
  181. title : {
  182. offsetCenter: [0, -20]
  183. }
  184. }
  185. };
  186. echarts.registerTheme('infographic', theme);
  187. }));