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() {