infographic.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. (function(root, factory) {
  20. if (typeof define === 'function' && define.amd) {
  21. // AMD. Register as an anonymous module.
  22. define(['exports', 'echarts'], factory);
  23. } else if (
  24. typeof exports === 'object' &&
  25. typeof exports.nodeName !== 'string'
  26. ) {
  27. // CommonJS
  28. factory(exports, require('echarts'));
  29. } else {
  30. // Browser globals
  31. factory({}, root.echarts);
  32. }
  33. })(this, function(exports, echarts) {
  34. var log = function(msg) {
  35. if (typeof console !== 'undefined') {
  36. console && console.error && console.error(msg);
  37. }
  38. };
  39. if (!echarts) {
  40. log('ECharts is not Loaded');
  41. return;
  42. }
  43. var colorPalette = [
  44. '#C1232B',
  45. '#27727B',
  46. '#FCCE10',
  47. '#E87C25',
  48. '#B5C334',
  49. '#FE8463',
  50. '#9BCA63',
  51. '#FAD860',
  52. '#F3A43B',
  53. '#60C0DD',
  54. '#D7504B',
  55. '#C6E579',
  56. '#F4E001',
  57. '#F0805A',
  58. '#26C0C0'
  59. ];
  60. var theme = {
  61. color: colorPalette,
  62. title: {
  63. textStyle: {
  64. fontWeight: 'normal',
  65. color: '#27727B'
  66. }
  67. },
  68. visualMap: {
  69. color: ['#C1232B', '#FCCE10']
  70. },
  71. toolbox: {
  72. iconStyle: {
  73. normal: {
  74. borderColor: colorPalette[0]
  75. }
  76. }
  77. },
  78. tooltip: {
  79. backgroundColor: 'rgba(50,50,50,0.5)',
  80. axisPointer: {
  81. type: 'line',
  82. lineStyle: {
  83. color: '#27727B',
  84. type: 'dashed'
  85. },
  86. crossStyle: {
  87. color: '#27727B'
  88. },
  89. shadowStyle: {
  90. color: 'rgba(200,200,200,0.3)'
  91. }
  92. }
  93. },
  94. dataZoom: {
  95. dataBackgroundColor: 'rgba(181,195,52,0.3)',
  96. fillerColor: 'rgba(181,195,52,0.2)',
  97. handleColor: '#27727B'
  98. },
  99. categoryAxis: {
  100. axisLine: {
  101. lineStyle: {
  102. color: '#27727B'
  103. }
  104. },
  105. splitLine: {
  106. show: false
  107. }
  108. },
  109. valueAxis: {
  110. axisLine: {
  111. show: false
  112. },
  113. splitArea: {
  114. show: false
  115. },
  116. splitLine: {
  117. lineStyle: {
  118. color: ['#ccc'],
  119. type: 'dashed'
  120. }
  121. }
  122. },
  123. timeline: {
  124. itemStyle: {
  125. color: '#27727B'
  126. },
  127. lineStyle: {
  128. color: '#27727B'
  129. },
  130. controlStyle: {
  131. color: '#27727B',
  132. borderColor: '#27727B'
  133. },
  134. symbol: 'emptyCircle',
  135. symbolSize: 3
  136. },
  137. line: {
  138. itemStyle: {
  139. borderWidth: 2,
  140. borderColor: '#fff',
  141. lineStyle: {
  142. width: 3
  143. },
  144. emphasis: {
  145. borderWidth: 0
  146. }
  147. },
  148. symbol: 'circle',
  149. symbolSize: 3.5
  150. },
  151. candlestick: {
  152. itemStyle: {
  153. color: '#c1232b',
  154. color0: '#b5c334'
  155. },
  156. lineStyle: {
  157. width: 1,
  158. color: '#c1232b',
  159. color0: '#b5c334'
  160. },
  161. areaStyle: {
  162. color: '#c1232b',
  163. color0: '#27727b'
  164. }
  165. },
  166. graph: {
  167. itemStyle: {
  168. color: '#c1232b'
  169. },
  170. linkStyle: {
  171. color: '#b5c334'
  172. }
  173. },
  174. map: {
  175. itemStyle: {
  176. color: '#f2385a',
  177. areaColor: '#ddd',
  178. borderColor: '#eee'
  179. },
  180. areaStyle: {
  181. color: '#fe994e'
  182. },
  183. label: {
  184. color: '#c1232b'
  185. }
  186. },
  187. gauge: {
  188. axisLine: {
  189. lineStyle: {
  190. color: [
  191. [0.2, '#B5C334'],
  192. [0.8, '#27727B'],
  193. [1, '#C1232B']
  194. ]
  195. }
  196. },
  197. axisTick: {
  198. splitNumber: 2,
  199. length: 5,
  200. lineStyle: {
  201. color: '#fff'
  202. }
  203. },
  204. axisLabel: {
  205. textStyle: {
  206. color: '#fff'
  207. }
  208. },
  209. splitLine: {
  210. length: '5%',
  211. lineStyle: {
  212. color: '#fff'
  213. }
  214. },
  215. title: {
  216. offsetCenter: [0, -20]
  217. }
  218. }
  219. };
  220. echarts.registerTheme('infographic', theme);
  221. });