saul365/LoveIt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: update echarts theme config

Browse Source
This commit is contained in:
Dillon
2022-05-10 13:24:16 +08:00
parent a19e0ed1ac
commit 9cac6b4ffe
7 changed files with 623 additions and 901 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
assets/js/theme.js
View File

@@ -666,36 +666,41 @@ var Theme = /*#__PURE__*/function () {
value: function initEcharts() { value: function initEcharts() {
var _this8 = this; var _this8 = this;
this._echartsOnSwitchTheme = this._echartsOnSwitchTheme || function () { if (this.config.echarts) {
_this8._echartsArr = _this8._echartsArr || []; echarts.registerTheme('light', this.config.echarts.lightTheme);
echarts.registerTheme('dark', this.config.echarts.darkTheme);
for (var i = 0; i < _this8._echartsArr.length; i++) { this._echartsOnSwitchTheme = this._echartsOnSwitchTheme || function () {
_this8._echartsArr[i].dispose(); _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) { _this8._echartsArr = [];
var chart = echarts.init($echarts, _this8.isDark ? 'chalk' : 'macarons', {
renderer: 'svg' _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 () { this.resizeEventSet.add(this._echartsOnResize);
for (var i = 0; i < _this8._echartsArr.length; i++) { }
_this8._echartsArr[i].resize();
}
};
this.resizeEventSet.add(this._echartsOnResize);
} }
}, { }, {
key: "initMapbox", key: "initMapbox",

417
assets/lib/echarts/theme/chalk.js
View File

@@ -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"
}
}
}
});
}));

273
assets/lib/echarts/theme/dark.yml Normal file
View File

@@ -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'

297
assets/lib/echarts/theme/light.yml Normal file
View File

@@ -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'

441
assets/lib/echarts/theme/macarons.js
View File

@@ -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"
}
}
}
});
}));

5
layouts/partials/assets.html
View File

@@ -136,8 +136,9 @@
{{- if (.Scratch.Get "this").echarts -}} {{- if (.Scratch.Get "this").echarts -}}
{{- $source := $cdn.echartsJS | default "lib/echarts/echarts.min.js" -}} {{- $source := $cdn.echartsJS | default "lib/echarts/echarts.min.js" -}}
{{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}} {{- 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" -}} {{- $lightTheme := resources.Get "lib/echarts/theme/light.yml" | transform.Unmarshal -}}
{{- dict "Source" "lib/echarts/theme/chalk.js" "Minify" true "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}} {{- $darkTheme := resources.Get "lib/echarts/theme/dark.yml" | transform.Unmarshal -}}
{{- $config = dict "lightTheme" $lightTheme "darkTheme" $darkTheme | dict "echarts" | merge $config -}}
{{- end -}} {{- end -}}
{{- /* Mapbox GL */ -}} {{- /* Mapbox GL */ -}}

42
src/js/theme.js
View File

@@ -493,26 +493,30 @@ class Theme {
} }
initEcharts() { initEcharts() {
this._echartsOnSwitchTheme = this._echartsOnSwitchTheme || (() => { if (this.config.echarts) {
this._echartsArr = this._echartsArr || []; echarts.registerTheme('light', this.config.echarts.lightTheme);
for (let i = 0; i < this._echartsArr.length; i++) { echarts.registerTheme('dark', this.config.echarts.darkTheme);
this._echartsArr[i].dispose(); this._echartsOnSwitchTheme = this._echartsOnSwitchTheme || (() => {
} this._echartsArr = this._echartsArr || [];
this._echartsArr = []; for (let i = 0; i < this._echartsArr.length; i++) {
this.util.forEach(document.getElementsByClassName('echarts'), $echarts => { this._echartsArr[i].dispose();
const chart = echarts.init($echarts, this.isDark ? 'chalk' : 'macarons', {renderer: 'svg'}); }
chart.setOption(JSON.parse(this.data[$echarts.id])); this._echartsArr = [];
this._echartsArr.push(chart); 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.switchThemeEventSet.add(this._echartsOnSwitchTheme); this._echartsOnSwitchTheme();
this._echartsOnSwitchTheme(); this._echartsOnResize = this._echartsOnResize || (() => {
this._echartsOnResize = this._echartsOnResize || (() => { for (let i = 0; i < this._echartsArr.length; i++) {
for (let i = 0; i < this._echartsArr.length; i++) { this._echartsArr[i].resize();
this._echartsArr[i].resize(); }
} });
}); this.resizeEventSet.add(this._echartsOnResize);
this.resizeEventSet.add(this._echartsOnResize); }
} }
initMapbox() { initMapbox() {