From 9cac6b4ffed5d6badf4c6539915a1a5a968247fa Mon Sep 17 00:00:00 2001 From: Dillon Date: Tue, 10 May 2022 13:24:16 +0800 Subject: [PATCH] feat: update echarts theme config --- assets/js/theme.js | 49 +-- assets/lib/echarts/theme/chalk.js | 417 ------------------------- assets/lib/echarts/theme/dark.yml | 273 +++++++++++++++++ assets/lib/echarts/theme/light.yml | 297 ++++++++++++++++++ assets/lib/echarts/theme/macarons.js | 441 --------------------------- layouts/partials/assets.html | 5 +- src/js/theme.js | 42 +-- 7 files changed, 623 insertions(+), 901 deletions(-) delete mode 100644 assets/lib/echarts/theme/chalk.js create mode 100644 assets/lib/echarts/theme/dark.yml create mode 100644 assets/lib/echarts/theme/light.yml delete mode 100644 assets/lib/echarts/theme/macarons.js diff --git a/assets/js/theme.js b/assets/js/theme.js index 80cf6563..ca879dc1 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -666,36 +666,41 @@ var Theme = /*#__PURE__*/function () { value: function initEcharts() { var _this8 = this; - this._echartsOnSwitchTheme = this._echartsOnSwitchTheme || function () { - _this8._echartsArr = _this8._echartsArr || []; + if (this.config.echarts) { + echarts.registerTheme('light', this.config.echarts.lightTheme); + echarts.registerTheme('dark', this.config.echarts.darkTheme); - for (var i = 0; i < _this8._echartsArr.length; i++) { - _this8._echartsArr[i].dispose(); - } + this._echartsOnSwitchTheme = this._echartsOnSwitchTheme || function () { + _this8._echartsArr = _this8._echartsArr || []; - _this8._echartsArr = []; + for (var i = 0; i < _this8._echartsArr.length; i++) { + _this8._echartsArr[i].dispose(); + } - _this8.util.forEach(document.getElementsByClassName('echarts'), function ($echarts) { - var chart = echarts.init($echarts, _this8.isDark ? 'chalk' : 'macarons', { - renderer: 'svg' + _this8._echartsArr = []; + + _this8.util.forEach(document.getElementsByClassName('echarts'), function ($echarts) { + var chart = echarts.init($echarts, _this8.isDark ? 'dark' : 'light', { + renderer: 'svg' + }); + chart.setOption(JSON.parse(_this8.data[$echarts.id])); + + _this8._echartsArr.push(chart); }); - chart.setOption(JSON.parse(_this8.data[$echarts.id])); + }; - _this8._echartsArr.push(chart); - }); - }; + this.switchThemeEventSet.add(this._echartsOnSwitchTheme); - this.switchThemeEventSet.add(this._echartsOnSwitchTheme); + this._echartsOnSwitchTheme(); - this._echartsOnSwitchTheme(); + this._echartsOnResize = this._echartsOnResize || function () { + for (var i = 0; i < _this8._echartsArr.length; i++) { + _this8._echartsArr[i].resize(); + } + }; - this._echartsOnResize = this._echartsOnResize || function () { - for (var i = 0; i < _this8._echartsArr.length; i++) { - _this8._echartsArr[i].resize(); - } - }; - - this.resizeEventSet.add(this._echartsOnResize); + this.resizeEventSet.add(this._echartsOnResize); + } } }, { key: "initMapbox", diff --git a/assets/lib/echarts/theme/chalk.js b/assets/lib/echarts/theme/chalk.js deleted file mode 100644 index bd01fd43..00000000 --- a/assets/lib/echarts/theme/chalk.js +++ /dev/null @@ -1,417 +0,0 @@ -(function (root, factory) { - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define(['exports', 'echarts'], factory); - } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { - // CommonJS - factory(exports, require('echarts')); - } else { - // Browser globals - factory({}, root.echarts); - } -}(this, function (exports, echarts) { - var log = function (msg) { - if (typeof console !== 'undefined') { - console && console.error && console.error(msg); - } - }; - if (!echarts) { - log('ECharts is not Loaded'); - return; - } - echarts.registerTheme('chalk', { - "color": [ - "#fc97af", - "#87f7cf", - "#f7f494", - "#72ccff", - "#f7c5a0", - "#d4a4eb", - "#d2f5a6", - "#76f2f2" - ], - "backgroundColor": "rgba(41,52,65,1)", - "textStyle": {}, - "title": { - "textStyle": { - "color": "#ffffff" - }, - "subtextStyle": { - "color": "#dddddd" - } - }, - "line": { - "itemStyle": { - "borderWidth": 1 - }, - "lineStyle": { - "width": 2 - }, - "symbolSize": 6, - "symbol": "circle", - "smooth": true - }, - "radar": { - "itemStyle": { - "borderWidth": 1 - }, - "lineStyle": { - "width": 2 - }, - "symbolSize": 3, - "symbol": "circle", - "smooth": true - }, - "bar": { - "itemStyle": { - "barBorderWidth": 0, - "barBorderColor": "#ccc" - } - }, - "pie": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "scatter": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "boxplot": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "parallel": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "sankey": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "funnel": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "gauge": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "candlestick": { - "itemStyle": { - "color": "#fc97af", - "color0": "transparent", - "borderColor": "#fc97af", - "borderColor0": "#87f7cf", - "borderWidth": 1 - } - }, - "graph": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - }, - "lineStyle": { - "width": 1, - "color": "#ffffff" - }, - "symbolSize": 3, - "symbol": "emptyCircle", - "smooth": true, - "color": [ - "#fc97af", - "#87f7cf", - "#f7f494", - "#72ccff", - "#f7c5a0", - "#d4a4eb", - "#d2f5a6", - "#76f2f2" - ], - "label": { - "color": "#293441" - } - }, - "map": { - "itemStyle": { - "areaColor": "#f3f3f3", - "borderColor": "#999999", - "borderWidth": 0.5 - }, - "label": { - "color": "#893448" - }, - "emphasis": { - "itemStyle": { - "areaColor": "rgba(255,178,72,1)", - "borderColor": "#eb8146", - "borderWidth": 1 - }, - "label": { - "color": "rgb(137,52,72)" - } - } - }, - "geo": { - "itemStyle": { - "areaColor": "#f3f3f3", - "borderColor": "#999999", - "borderWidth": 0.5 - }, - "label": { - "color": "#893448" - }, - "emphasis": { - "itemStyle": { - "areaColor": "rgba(255,178,72,1)", - "borderColor": "#eb8146", - "borderWidth": 1 - }, - "label": { - "color": "rgb(137,52,72)" - } - } - }, - "categoryAxis": { - "axisLine": { - "show": true, - "lineStyle": { - "color": "#666666" - } - }, - "axisTick": { - "show": true, - "lineStyle": { - "color": "#333" - } - }, - "axisLabel": { - "show": true, - "color": "#aaaaaa" - }, - "splitLine": { - "show": false, - "lineStyle": { - "color": [ - "#e6e6e6" - ] - } - }, - "splitArea": { - "show": false, - "areaStyle": { - "color": [ - "rgba(250,250,250,0.05)", - "rgba(200,200,200,0.02)" - ] - } - } - }, - "valueAxis": { - "axisLine": { - "show": true, - "lineStyle": { - "color": "#666666" - } - }, - "axisTick": { - "show": true, - "lineStyle": { - "color": "#333" - } - }, - "axisLabel": { - "show": true, - "color": "#aaaaaa" - }, - "splitLine": { - "show": true, - "lineStyle": { - "color": [ - "#e6e6e6" - ] - } - }, - "splitArea": { - "show": false, - "areaStyle": { - "color": [ - "rgba(250,250,250,0.05)", - "rgba(200,200,200,0.02)" - ] - } - } - }, - "logAxis": { - "axisLine": { - "show": true, - "lineStyle": { - "color": "#666666" - } - }, - "axisTick": { - "show": true, - "lineStyle": { - "color": "#333" - } - }, - "axisLabel": { - "show": true, - "color": "#aaaaaa" - }, - "splitLine": { - "show": true, - "lineStyle": { - "color": [ - "#e6e6e6" - ] - } - }, - "splitArea": { - "show": true, - "areaStyle": { - "color": [ - "rgba(250,250,250,0.05)", - "rgba(200,200,200,0.02)" - ] - } - } - }, - "timeAxis": { - "axisLine": { - "show": true, - "lineStyle": { - "color": "#666666" - } - }, - "axisTick": { - "show": true, - "lineStyle": { - "color": "#333" - } - }, - "axisLabel": { - "show": true, - "color": "#aaaaaa" - }, - "splitLine": { - "show": true, - "lineStyle": { - "color": [ - "#e6e6e6" - ] - } - }, - "splitArea": { - "show": false, - "areaStyle": { - "color": [ - "rgba(250,250,250,0.05)", - "rgba(200,200,200,0.02)" - ] - } - } - }, - "toolbox": { - "iconStyle": { - "borderColor": "#999999" - }, - "emphasis": { - "iconStyle": { - "borderColor": "#666666" - } - } - }, - "legend": { - "textStyle": { - "color": "#999999" - } - }, - "tooltip": { - "axisPointer": { - "lineStyle": { - "color": "#cccccc", - "width": 1 - }, - "crossStyle": { - "color": "#cccccc", - "width": 1 - } - } - }, - "timeline": { - "lineStyle": { - "color": "#87f7cf", - "width": 1 - }, - "itemStyle": { - "color": "#87f7cf", - "borderWidth": 1 - }, - "controlStyle": { - "color": "#87f7cf", - "borderColor": "#87f7cf", - "borderWidth": 0.5 - }, - "checkpointStyle": { - "color": "#fc97af", - "borderColor": "#fc97af" - }, - "label": { - "color": "#87f7cf" - }, - "emphasis": { - "itemStyle": { - "color": "#f7f494" - }, - "controlStyle": { - "color": "#87f7cf", - "borderColor": "#87f7cf", - "borderWidth": 0.5 - }, - "label": { - "color": "#87f7cf" - } - } - }, - "visualMap": { - "color": [ - "#fc97af", - "#87f7cf" - ] - }, - "dataZoom": { - "backgroundColor": "rgba(255,255,255,0)", - "dataBackgroundColor": "rgba(114,204,255,1)", - "fillerColor": "rgba(114,204,255,0.2)", - "handleColor": "#72ccff", - "handleSize": "100%", - "textStyle": { - "color": "#333333" - } - }, - "markPoint": { - "label": { - "color": "#293441" - }, - "emphasis": { - "label": { - "color": "#293441" - } - } - } - }); -})); diff --git a/assets/lib/echarts/theme/dark.yml b/assets/lib/echarts/theme/dark.yml new file mode 100644 index 00000000..d6e7509e --- /dev/null +++ b/assets/lib/echarts/theme/dark.yml @@ -0,0 +1,273 @@ +# dark theme based on chalk theme +color: + - '#fc97af' + - '#87f7cf' + - '#f7f494' + - '#72ccff' + - '#f7c5a0' + - '#d4a4eb' + - '#d2f5a6' + - '#76f2f2' +backgroundColor: rgba(41,52,65,1) +textStyle: {} +title: + textStyle: + color: '#ffffff' + subtextStyle: + color: '#dddddd' +line: + itemStyle: + borderWidth: 1 + lineStyle: + width: 2 + symbolSize: 6 + symbol: circle + smooth: true +radar: + itemStyle: + borderWidth: 1 + lineStyle: + width: 2 + symbolSize: 3 + symbol: circle + smooth: true +bar: + itemStyle: + barBorderWidth: 0 + barBorderColor: '#ccc' +pie: + itemStyle: + borderWidth: 0 + borderColor: '#ccc' +scatter: + itemStyle: + borderWidth: 0 + borderColor: '#ccc' +boxplot: + itemStyle: + borderWidth: 0 + borderColor: '#ccc' +parallel: + itemStyle: + borderWidth: 0 + borderColor: '#ccc' +sankey: + itemStyle: + borderWidth: 0 + borderColor: '#ccc' +funnel: + itemStyle: + borderWidth: 0 + borderColor: '#ccc' +gauge: + itemStyle: + borderWidth: 0 + borderColor: '#ccc' +candlestick: + itemStyle: + color: '#fc97af' + color0: transparent + borderColor: '#fc97af' + borderColor0: '#87f7cf' + borderWidth: 1 +graph: + itemStyle: + borderWidth: 0 + borderColor: '#ccc' + lineStyle: + width: 1 + color: '#ffffff' + symbolSize: 3 + symbol: emptyCircle + smooth: true + color: + - '#fc97af' + - '#87f7cf' + - '#f7f494' + - '#72ccff' + - '#f7c5a0' + - '#d4a4eb' + - '#d2f5a6' + - '#76f2f2' + label: + color: '#293441' +map: + itemStyle: + areaColor: '#f3f3f3' + borderColor: '#999999' + borderWidth: 0.5 + label: + color: '#893448' + emphasis: + itemStyle: + areaColor: rgba(255,178,72,1) + borderColor: '#eb8146' + borderWidth: 1 + label: + color: rgb(137,52,72) +geo: + itemStyle: + areaColor: '#f3f3f3' + borderColor: '#999999' + borderWidth: 0.5 + label: + color: '#893448' + emphasis: + itemStyle: + areaColor: rgba(255,178,72,1) + borderColor: '#eb8146' + borderWidth: 1 + label: + color: rgb(137,52,72) +categoryAxis: + axisLine: + show: true + lineStyle: + color: '#666666' + axisTick: + show: true + lineStyle: + color: '#333' + axisLabel: + show: true + color: '#aaaaaa' + splitLine: + show: false + lineStyle: + color: + - '#e6e6e6' + splitArea: + show: false + areaStyle: + color: + - rgba(250,250,250,0.05) + - rgba(200,200,200,0.02) +valueAxis: + axisLine: + show: true + lineStyle: + color: '#666666' + axisTick: + show: true + lineStyle: + color: '#333' + axisLabel: + show: true + color: '#aaaaaa' + splitLine: + show: true + lineStyle: + color: + - '#e6e6e6' + splitArea: + show: false + areaStyle: + color: + - rgba(250,250,250,0.05) + - rgba(200,200,200,0.02) +logAxis: + axisLine: + show: true + lineStyle: + color: '#666666' + axisTick: + show: true + lineStyle: + color: '#333' + axisLabel: + show: true + color: '#aaaaaa' + splitLine: + show: true + lineStyle: + color: + - '#e6e6e6' + splitArea: + show: true + areaStyle: + color: + - rgba(250,250,250,0.05) + - rgba(200,200,200,0.02) +timeAxis: + axisLine: + show: true + lineStyle: + color: '#666666' + axisTick: + show: true + lineStyle: + color: '#333' + axisLabel: + show: true + color: '#aaaaaa' + splitLine: + show: true + lineStyle: + color: + - '#e6e6e6' + splitArea: + show: false + areaStyle: + color: + - rgba(250,250,250,0.05) + - rgba(200,200,200,0.02) +toolbox: + iconStyle: + borderColor: '#999999' + emphasis: + iconStyle: + borderColor: '#666666' +legend: + textStyle: + color: '#999999' +tooltip: + axisPointer: + lineStyle: + color: '#cccccc' + width: 1 + crossStyle: + color: '#cccccc' + width: 1 +timeline: + lineStyle: + color: '#87f7cf' + width: 1 + itemStyle: + color: '#87f7cf' + borderWidth: 1 + controlStyle: + color: '#87f7cf' + borderColor: '#87f7cf' + borderWidth: 0.5 + checkpointStyle: + color: '#fc97af' + borderColor: '#fc97af' + label: + color: '#87f7cf' + emphasis: + itemStyle: + color: '#f7f494' + controlStyle: + color: '#87f7cf' + borderColor: '#87f7cf' + borderWidth: 0.5 + label: + color: '#87f7cf' +visualMap: + color: + - '#fc97af' + - '#87f7cf' +dataZoom: + backgroundColor: rgba(255,255,255,0) + dataBackgroundColor: rgba(114,204,255,1) + fillerColor: rgba(114,204,255,0.2) + handleColor: '#72ccff' + handleSize: 100% + textStyle: + color: '#333333' +markPoint: + label: + color: '#293441' + emphasis: + label: + color: '#293441' diff --git a/assets/lib/echarts/theme/light.yml b/assets/lib/echarts/theme/light.yml new file mode 100644 index 00000000..87447ae9 --- /dev/null +++ b/assets/lib/echarts/theme/light.yml @@ -0,0 +1,297 @@ +# light theme based on macarons theme +color: + - '#2ec7c9' + - '#b6a2de' + - '#5ab1ef' + - '#ffb980' + - '#d87a80' + - '#8d98b3' + - '#e5cf0d' + - '#97b552' + - '#95706d' + - '#dc69aa' + - '#07a2a4' + - '#9a7fd1' + - '#588dd5' + - '#f5994e' + - '#c05050' + - '#59678c' + - '#c9ab00' + - '#7eb00a' + - '#6f5553' + - '#c14089' +backgroundColor: rgba(0,0,0,0) +textStyle: {} +title: + textStyle: + color: '#008acd' + subtextStyle: + color: '#aaaaaa' +line: + itemStyle: + borderWidth: 1 + lineStyle: + width: 2 + symbolSize: 5 + symbol: emptyCircle + smooth: true +radar: + itemStyle: + borderWidth: 1 + lineStyle: + width: 2 + symbolSize: 3 + symbol: emptyCircle + smooth: true +bar: + itemStyle: + barBorderWidth: 0 + barBorderColor: '#ccc' +pie: + itemStyle: + borderWidth: 0 + borderColor: '#ccc' +scatter: + itemStyle: + borderWidth: 0 + borderColor: '#ccc' +boxplot: + itemStyle: + borderWidth: 0 + borderColor: '#ccc' +parallel: + itemStyle: + borderWidth: 0 + borderColor: '#ccc' +sankey: + itemStyle: + borderWidth: 0 + borderColor: '#ccc' +funnel: + itemStyle: + borderWidth: 0 + borderColor: '#ccc' +gauge: + itemStyle: + borderWidth: 0 + borderColor: '#ccc' +candlestick: + itemStyle: + color: '#d87a80' + color0: '#2ec7c9' + borderColor: '#d87a80' + borderColor0: '#2ec7c9' + borderWidth: 1 +graph: + itemStyle: + borderWidth: 0 + borderColor: '#ccc' + lineStyle: + width: 1 + color: '#aaaaaa' + symbolSize: 3 + symbol: emptyCircle + smooth: true + color: + - '#2ec7c9' + - '#b6a2de' + - '#5ab1ef' + - '#ffb980' + - '#d87a80' + - '#8d98b3' + - '#e5cf0d' + - '#97b552' + - '#95706d' + - '#dc69aa' + - '#07a2a4' + - '#9a7fd1' + - '#588dd5' + - '#f5994e' + - '#c05050' + - '#59678c' + - '#c9ab00' + - '#7eb00a' + - '#6f5553' + - '#c14089' + label: + color: '#eeeeee' +map: + itemStyle: + areaColor: '#dddddd' + borderColor: '#eeeeee' + borderWidth: 0.5 + label: + color: '#d87a80' + emphasis: + itemStyle: + areaColor: rgba(254,153,78,1) + borderColor: '#444' + borderWidth: 1 + label: + color: rgb(100,0,0) +geo: + itemStyle: + areaColor: '#dddddd' + borderColor: '#eeeeee' + borderWidth: 0.5 + label: + color: '#d87a80' + emphasis: + itemStyle: + areaColor: rgba(254,153,78,1) + borderColor: '#444' + borderWidth: 1 + label: + color: rgb(100,0,0) +categoryAxis: + axisLine: + show: true + lineStyle: + color: '#008acd' + axisTick: + show: true + lineStyle: + color: '#333' + axisLabel: + show: true + color: '#333' + splitLine: + show: false + lineStyle: + color: + - '#eee' + splitArea: + show: false + areaStyle: + color: + - rgba(250,250,250,0.3) + - rgba(200,200,200,0.3) +valueAxis: + axisLine: + show: true + lineStyle: + color: '#008acd' + axisTick: + show: true + lineStyle: + color: '#333' + axisLabel: + show: true + color: '#333' + splitLine: + show: true + lineStyle: + color: + - '#eee' + splitArea: + show: true + areaStyle: + color: + - rgba(250,250,250,0.3) + - rgba(200,200,200,0.3) +logAxis: + axisLine: + show: true + lineStyle: + color: '#008acd' + axisTick: + show: true + lineStyle: + color: '#333' + axisLabel: + show: true + color: '#333' + splitLine: + show: true + lineStyle: + color: + - '#eee' + splitArea: + show: true + areaStyle: + color: + - rgba(250,250,250,0.3) + - rgba(200,200,200,0.3) +timeAxis: + axisLine: + show: true + lineStyle: + color: '#008acd' + axisTick: + show: true + lineStyle: + color: '#333' + axisLabel: + show: true + color: '#333' + splitLine: + show: true + lineStyle: + color: + - '#eee' + splitArea: + show: false + areaStyle: + color: + - rgba(250,250,250,0.3) + - rgba(200,200,200,0.3) +toolbox: + iconStyle: + borderColor: '#2ec7c9' + emphasis: + iconStyle: + borderColor: '#18a4a6' +legend: + textStyle: + color: '#333333' +tooltip: + axisPointer: + lineStyle: + color: '#008acd' + width: 1 + crossStyle: + color: '#008acd' + width: 1 +timeline: + lineStyle: + color: '#008acd' + width: 1 + itemStyle: + color: '#008acd' + borderWidth: 1 + controlStyle: + color: '#008acd' + borderColor: '#008acd' + borderWidth: 0.5 + checkpointStyle: + color: '#2ec7c9' + borderColor: '#2ec7c9' + label: + color: '#008acd' + emphasis: + itemStyle: + color: '#a9334c' + controlStyle: + color: '#008acd' + borderColor: '#008acd' + borderWidth: 0.5 + label: + color: '#008acd' +visualMap: + color: + - '#5ab1ef' + - '#e0ffff' +dataZoom: + backgroundColor: rgba(47,69,84,0) + dataBackgroundColor: '#efefff' + fillerColor: rgba(182,162,222,0.2) + handleColor: '#008acd' + handleSize: 100% + textStyle: + color: '#333333' +markPoint: + label: + color: '#eeeeee' + emphasis: + label: + color: '#eeeeee' diff --git a/assets/lib/echarts/theme/macarons.js b/assets/lib/echarts/theme/macarons.js deleted file mode 100644 index cb0ea5e1..00000000 --- a/assets/lib/echarts/theme/macarons.js +++ /dev/null @@ -1,441 +0,0 @@ -(function (root, factory) { - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define(['exports', 'echarts'], factory); - } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { - // CommonJS - factory(exports, require('echarts')); - } else { - // Browser globals - factory({}, root.echarts); - } -}(this, function (exports, echarts) { - var log = function (msg) { - if (typeof console !== 'undefined') { - console && console.error && console.error(msg); - } - }; - if (!echarts) { - log('ECharts is not Loaded'); - return; - } - echarts.registerTheme('macarons', { - "color": [ - "#2ec7c9", - "#b6a2de", - "#5ab1ef", - "#ffb980", - "#d87a80", - "#8d98b3", - "#e5cf0d", - "#97b552", - "#95706d", - "#dc69aa", - "#07a2a4", - "#9a7fd1", - "#588dd5", - "#f5994e", - "#c05050", - "#59678c", - "#c9ab00", - "#7eb00a", - "#6f5553", - "#c14089" - ], - "backgroundColor": "rgba(0,0,0,0)", - "textStyle": {}, - "title": { - "textStyle": { - "color": "#008acd" - }, - "subtextStyle": { - "color": "#aaaaaa" - } - }, - "line": { - "itemStyle": { - "borderWidth": 1 - }, - "lineStyle": { - "width": 2 - }, - "symbolSize": 5, - "symbol": "emptyCircle", - "smooth": true - }, - "radar": { - "itemStyle": { - "borderWidth": 1 - }, - "lineStyle": { - "width": 2 - }, - "symbolSize": 3, - "symbol": "emptyCircle", - "smooth": true - }, - "bar": { - "itemStyle": { - "barBorderWidth": 0, - "barBorderColor": "#ccc" - } - }, - "pie": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "scatter": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "boxplot": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "parallel": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "sankey": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "funnel": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "gauge": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "candlestick": { - "itemStyle": { - "color": "#d87a80", - "color0": "#2ec7c9", - "borderColor": "#d87a80", - "borderColor0": "#2ec7c9", - "borderWidth": 1 - } - }, - "graph": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - }, - "lineStyle": { - "width": 1, - "color": "#aaaaaa" - }, - "symbolSize": 3, - "symbol": "emptyCircle", - "smooth": true, - "color": [ - "#2ec7c9", - "#b6a2de", - "#5ab1ef", - "#ffb980", - "#d87a80", - "#8d98b3", - "#e5cf0d", - "#97b552", - "#95706d", - "#dc69aa", - "#07a2a4", - "#9a7fd1", - "#588dd5", - "#f5994e", - "#c05050", - "#59678c", - "#c9ab00", - "#7eb00a", - "#6f5553", - "#c14089" - ], - "label": { - "color": "#eeeeee" - } - }, - "map": { - "itemStyle": { - "areaColor": "#dddddd", - "borderColor": "#eeeeee", - "borderWidth": 0.5 - }, - "label": { - "color": "#d87a80" - }, - "emphasis": { - "itemStyle": { - "areaColor": "rgba(254,153,78,1)", - "borderColor": "#444", - "borderWidth": 1 - }, - "label": { - "color": "rgb(100,0,0)" - } - } - }, - "geo": { - "itemStyle": { - "areaColor": "#dddddd", - "borderColor": "#eeeeee", - "borderWidth": 0.5 - }, - "label": { - "color": "#d87a80" - }, - "emphasis": { - "itemStyle": { - "areaColor": "rgba(254,153,78,1)", - "borderColor": "#444", - "borderWidth": 1 - }, - "label": { - "color": "rgb(100,0,0)" - } - } - }, - "categoryAxis": { - "axisLine": { - "show": true, - "lineStyle": { - "color": "#008acd" - } - }, - "axisTick": { - "show": true, - "lineStyle": { - "color": "#333" - } - }, - "axisLabel": { - "show": true, - "color": "#333" - }, - "splitLine": { - "show": false, - "lineStyle": { - "color": [ - "#eee" - ] - } - }, - "splitArea": { - "show": false, - "areaStyle": { - "color": [ - "rgba(250,250,250,0.3)", - "rgba(200,200,200,0.3)" - ] - } - } - }, - "valueAxis": { - "axisLine": { - "show": true, - "lineStyle": { - "color": "#008acd" - } - }, - "axisTick": { - "show": true, - "lineStyle": { - "color": "#333" - } - }, - "axisLabel": { - "show": true, - "color": "#333" - }, - "splitLine": { - "show": true, - "lineStyle": { - "color": [ - "#eee" - ] - } - }, - "splitArea": { - "show": true, - "areaStyle": { - "color": [ - "rgba(250,250,250,0.3)", - "rgba(200,200,200,0.3)" - ] - } - } - }, - "logAxis": { - "axisLine": { - "show": true, - "lineStyle": { - "color": "#008acd" - } - }, - "axisTick": { - "show": true, - "lineStyle": { - "color": "#333" - } - }, - "axisLabel": { - "show": true, - "color": "#333" - }, - "splitLine": { - "show": true, - "lineStyle": { - "color": [ - "#eee" - ] - } - }, - "splitArea": { - "show": true, - "areaStyle": { - "color": [ - "rgba(250,250,250,0.3)", - "rgba(200,200,200,0.3)" - ] - } - } - }, - "timeAxis": { - "axisLine": { - "show": true, - "lineStyle": { - "color": "#008acd" - } - }, - "axisTick": { - "show": true, - "lineStyle": { - "color": "#333" - } - }, - "axisLabel": { - "show": true, - "color": "#333" - }, - "splitLine": { - "show": true, - "lineStyle": { - "color": [ - "#eee" - ] - } - }, - "splitArea": { - "show": false, - "areaStyle": { - "color": [ - "rgba(250,250,250,0.3)", - "rgba(200,200,200,0.3)" - ] - } - } - }, - "toolbox": { - "iconStyle": { - "borderColor": "#2ec7c9" - }, - "emphasis": { - "iconStyle": { - "borderColor": "#18a4a6" - } - } - }, - "legend": { - "textStyle": { - "color": "#333333" - } - }, - "tooltip": { - "axisPointer": { - "lineStyle": { - "color": "#008acd", - "width": 1 - }, - "crossStyle": { - "color": "#008acd", - "width": 1 - } - } - }, - "timeline": { - "lineStyle": { - "color": "#008acd", - "width": 1 - }, - "itemStyle": { - "color": "#008acd", - "borderWidth": 1 - }, - "controlStyle": { - "color": "#008acd", - "borderColor": "#008acd", - "borderWidth": 0.5 - }, - "checkpointStyle": { - "color": "#2ec7c9", - "borderColor": "#2ec7c9" - }, - "label": { - "color": "#008acd" - }, - "emphasis": { - "itemStyle": { - "color": "#a9334c" - }, - "controlStyle": { - "color": "#008acd", - "borderColor": "#008acd", - "borderWidth": 0.5 - }, - "label": { - "color": "#008acd" - } - } - }, - "visualMap": { - "color": [ - "#5ab1ef", - "#e0ffff" - ] - }, - "dataZoom": { - "backgroundColor": "rgba(47,69,84,0)", - "dataBackgroundColor": "#efefff", - "fillerColor": "rgba(182,162,222,0.2)", - "handleColor": "#008acd", - "handleSize": "100%", - "textStyle": { - "color": "#333333" - } - }, - "markPoint": { - "label": { - "color": "#eeeeee" - }, - "emphasis": { - "label": { - "color": "#eeeeee" - } - } - } - }); -})); diff --git a/layouts/partials/assets.html b/layouts/partials/assets.html index 27af3fda..91e77224 100644 --- a/layouts/partials/assets.html +++ b/layouts/partials/assets.html @@ -136,8 +136,9 @@ {{- if (.Scratch.Get "this").echarts -}} {{- $source := $cdn.echartsJS | default "lib/echarts/echarts.min.js" -}} {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}} - {{- dict "Source" "lib/echarts/theme/macarons.js" "Minify" true "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}} - {{- dict "Source" "lib/echarts/theme/chalk.js" "Minify" true "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}} + {{- $lightTheme := resources.Get "lib/echarts/theme/light.yml" | transform.Unmarshal -}} + {{- $darkTheme := resources.Get "lib/echarts/theme/dark.yml" | transform.Unmarshal -}} + {{- $config = dict "lightTheme" $lightTheme "darkTheme" $darkTheme | dict "echarts" | merge $config -}} {{- end -}} {{- /* Mapbox GL */ -}} diff --git a/src/js/theme.js b/src/js/theme.js index b7e92d03..416b7092 100644 --- a/src/js/theme.js +++ b/src/js/theme.js @@ -493,26 +493,30 @@ class Theme { } initEcharts() { - this._echartsOnSwitchTheme = this._echartsOnSwitchTheme || (() => { - this._echartsArr = this._echartsArr || []; - for (let i = 0; i < this._echartsArr.length; i++) { - this._echartsArr[i].dispose(); - } - this._echartsArr = []; - this.util.forEach(document.getElementsByClassName('echarts'), $echarts => { - const chart = echarts.init($echarts, this.isDark ? 'chalk' : 'macarons', {renderer: 'svg'}); - chart.setOption(JSON.parse(this.data[$echarts.id])); - this._echartsArr.push(chart); + if (this.config.echarts) { + echarts.registerTheme('light', this.config.echarts.lightTheme); + echarts.registerTheme('dark', this.config.echarts.darkTheme); + this._echartsOnSwitchTheme = this._echartsOnSwitchTheme || (() => { + this._echartsArr = this._echartsArr || []; + for (let i = 0; i < this._echartsArr.length; i++) { + this._echartsArr[i].dispose(); + } + this._echartsArr = []; + this.util.forEach(document.getElementsByClassName('echarts'), $echarts => { + const chart = echarts.init($echarts, this.isDark ? 'dark' : 'light', {renderer: 'svg'}); + chart.setOption(JSON.parse(this.data[$echarts.id])); + this._echartsArr.push(chart); + }); }); - }); - this.switchThemeEventSet.add(this._echartsOnSwitchTheme); - this._echartsOnSwitchTheme(); - this._echartsOnResize = this._echartsOnResize || (() => { - for (let i = 0; i < this._echartsArr.length; i++) { - this._echartsArr[i].resize(); - } - }); - this.resizeEventSet.add(this._echartsOnResize); + this.switchThemeEventSet.add(this._echartsOnSwitchTheme); + this._echartsOnSwitchTheme(); + this._echartsOnResize = this._echartsOnResize || (() => { + for (let i = 0; i < this._echartsArr.length; i++) { + this._echartsArr[i].resize(); + } + }); + this.resizeEventSet.add(this._echartsOnResize); + } } initMapbox() {