infographic.js 5.7 KB

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