dark.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  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/lib/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 contrastColor = '#B9B8CE';
  44. var backgroundColor = '#100C2A';
  45. var axisCommon = function () {
  46. return {
  47. axisLine: {
  48. lineStyle: {
  49. color: contrastColor
  50. }
  51. },
  52. splitLine: {
  53. lineStyle: {
  54. color: '#484753'
  55. }
  56. },
  57. splitArea: {
  58. areaStyle: {
  59. color: ['rgba(255,255,255,0.02)', 'rgba(255,255,255,0.05)']
  60. }
  61. },
  62. minorSplitLine: {
  63. lineStyle: {
  64. color: '#20203B'
  65. }
  66. }
  67. };
  68. };
  69. var colorPalette = [
  70. '#4992ff',
  71. '#7cffb2',
  72. '#fddd60',
  73. '#ff6e76',
  74. '#58d9f9',
  75. '#05c091',
  76. '#ff8a45',
  77. '#8d48e3',
  78. '#dd79ff'
  79. ];
  80. var theme = {
  81. darkMode: true,
  82. color: colorPalette,
  83. backgroundColor: backgroundColor,
  84. axisPointer: {
  85. lineStyle: {
  86. color: '#817f91'
  87. },
  88. crossStyle: {
  89. color: '#817f91'
  90. },
  91. label: {
  92. // TODO Contrast of label backgorundColor
  93. color: '#fff'
  94. }
  95. },
  96. legend: {
  97. textStyle: {
  98. color: contrastColor
  99. }
  100. },
  101. textStyle: {
  102. color: contrastColor
  103. },
  104. title: {
  105. textStyle: {
  106. color: '#EEF1FA'
  107. },
  108. subtextStyle: {
  109. color: '#B9B8CE'
  110. }
  111. },
  112. toolbox: {
  113. iconStyle: {
  114. borderColor: contrastColor
  115. }
  116. },
  117. dataZoom: {
  118. borderColor: '#71708A',
  119. textStyle: {
  120. color: contrastColor
  121. },
  122. brushStyle: {
  123. color: 'rgba(135,163,206,0.3)'
  124. },
  125. handleStyle: {
  126. color: '#353450',
  127. borderColor: '#C5CBE3'
  128. },
  129. moveHandleStyle: {
  130. color: '#B0B6C3',
  131. opacity: 0.3
  132. },
  133. fillerColor: 'rgba(135,163,206,0.2)',
  134. emphasis: {
  135. handleStyle: {
  136. borderColor: '#91B7F2',
  137. color: '#4D587D'
  138. },
  139. moveHandleStyle: {
  140. color: '#636D9A',
  141. opacity: 0.7
  142. }
  143. },
  144. dataBackground: {
  145. lineStyle: {
  146. color: '#71708A',
  147. width: 1
  148. },
  149. areaStyle: {
  150. color: '#71708A'
  151. }
  152. },
  153. selectedDataBackground: {
  154. lineStyle: {
  155. color: '#87A3CE'
  156. },
  157. areaStyle: {
  158. color: '#87A3CE'
  159. }
  160. }
  161. },
  162. visualMap: {
  163. textStyle: {
  164. color: contrastColor
  165. }
  166. },
  167. timeline: {
  168. lineStyle: {
  169. color: contrastColor
  170. },
  171. label: {
  172. color: contrastColor
  173. },
  174. controlStyle: {
  175. color: contrastColor,
  176. borderColor: contrastColor
  177. }
  178. },
  179. calendar: {
  180. itemStyle: {
  181. color: backgroundColor
  182. },
  183. dayLabel: {
  184. color: contrastColor
  185. },
  186. monthLabel: {
  187. color: contrastColor
  188. },
  189. yearLabel: {
  190. color: contrastColor
  191. }
  192. },
  193. timeAxis: axisCommon(),
  194. logAxis: axisCommon(),
  195. valueAxis: axisCommon(),
  196. categoryAxis: axisCommon(),
  197. line: {
  198. symbol: 'circle'
  199. },
  200. graph: {
  201. color: colorPalette
  202. },
  203. gauge: {
  204. title: {
  205. color: contrastColor
  206. }
  207. },
  208. candlestick: {
  209. itemStyle: {
  210. color: '#FD1050',
  211. color0: '#0CF49B',
  212. borderColor: '#FD1050',
  213. borderColor0: '#0CF49B'
  214. }
  215. }
  216. };
  217. theme.categoryAxis.splitLine.show = false;
  218. echarts.registerTheme('dark', theme);
  219. });