✨ Feat: update echarts theme config

2026-08-24 23:38:56 +00:00 · 2022-09-02 23:18:52 +08:00
parent d29f143eb5
commit 30bae125f3
8 changed files with 582 additions and 14 deletions
@@ -11,6 +11,7 @@ All notable changes to this project will be documented in this file.
 - :sparkles: Feat(math): add more block delimiter support for math
 - :sparkles: Feat(highlight): add full support for Chroma highlighting languages in the [list](https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages)
 - :sparkles: Feat: add optional parameter `noreferrer` for the shortcode `link`
+- :sparkles: Feat: update echarts theme config
 - :wheelchair: Feat(accessibility): use `aria-hidden=true` on icons that AT should ignore
 - :bug: Fix: add function doc2unix to unify new lines symbol between Windows and Unix/Mac OS
 - :bug: Fix: author display error in post and markdown file
@@ -1,7 +0,0 @@
-/**
- * Minified by jsDelivr using Terser v5.10.0.
- * Original file: /npm/echarts@5.3.2/theme/macarons.js
- *
- * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
- */
-!function(e,o){"function"==typeof define&&define.amd?define(["exports","echarts"],o):"object"==typeof exports&&"string"!=typeof exports.nodeName?o(exports,require("echarts/lib/echarts")):o({},e.echarts)}(this,(function(e,o){var l;if(!o)return l="ECharts is not Loaded",void("undefined"!=typeof console&&console&&console.error&&console.error(l));var r=["#2ec7c9","#b6a2de","#5ab1ef","#ffb980","#d87a80","#8d98b3","#e5cf0d","#97b552","#95706d","#dc69aa","#07a2a4","#9a7fd1","#588dd5","#f5994e","#c05050","#59678c","#c9ab00","#7eb00a","#6f5553","#c14089"],t={color:r,title:{textStyle:{fontWeight:"normal",color:"#008acd"}},visualMap:{itemWidth:15,color:["#5ab1ef","#e0ffff"]},toolbox:{iconStyle:{normal:{borderColor:r[0]}}},tooltip:{backgroundColor:"rgba(50,50,50,0.5)",axisPointer:{type:"line",lineStyle:{color:"#008acd"},crossStyle:{color:"#008acd"},shadowStyle:{color:"rgba(200,200,200,0.2)"}}},dataZoom:{dataBackgroundColor:"#efefff",fillerColor:"rgba(182,162,222,0.2)",handleColor:"#008acd"},grid:{borderColor:"#eee"},categoryAxis:{axisLine:{lineStyle:{color:"#008acd"}},splitLine:{lineStyle:{color:["#eee"]}}},valueAxis:{axisLine:{lineStyle:{color:"#008acd"}},splitArea:{show:!0,areaStyle:{color:["rgba(250,250,250,0.1)","rgba(200,200,200,0.1)"]}},splitLine:{lineStyle:{color:["#eee"]}}},timeline:{lineStyle:{color:"#008acd"},controlStyle:{color:"#008acd",borderColor:"#008acd"},symbol:"emptyCircle",symbolSize:3},line:{smooth:!0,symbol:"emptyCircle",symbolSize:3},candlestick:{itemStyle:{color:"#d87a80",color0:"#2ec7c9"},lineStyle:{width:1,color:"#d87a80",color0:"#2ec7c9"},areaStyle:{color:"#2ec7c9",color0:"#b6a2de"}},scatter:{symbol:"circle",symbolSize:4},map:{itemStyle:{color:"#ddd"},areaStyle:{color:"#fe994e"},label:{color:"#d87a80"}},graph:{itemStyle:{color:"#d87a80"},linkStyle:{color:"#2ec7c9"}},gauge:{axisLine:{lineStyle:{color:[[.2,"#2ec7c9"],[.8,"#5ab1ef"],[1,"#d87a80"]],width:10}},axisTick:{splitNumber:10,length:15,lineStyle:{color:"auto"}},splitLine:{length:22,lineStyle:{color:"auto"}},pointer:{width:5}}};o.registerTheme("macarons",t)}));
@@ -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'
@@ -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'
@@ -136,8 +136,9 @@
 {{- if (.Scratch.Get "this").echarts -}}
  {{- $source := $cdn.echartsJS | default "lib/echarts/echarts.min.js" -}}
  {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
-  {{- $source := $cdn.echartsMacaronsJS | default "lib/echarts/macarons.min.js" -}}
-  {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | 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 */ -}}
@@ -611,6 +611,11 @@ class FixIt {
  }

  initEcharts() {
+    if (!this.config.echarts) {
+      return;
+    }
+    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++) {
@@ -618,9 +623,7 @@ class FixIt {
      }
      this._echartsArr = [];
      this.util.forEach(document.getElementsByClassName('echarts'), ($echarts) => {
-        const chart = echarts.init($echarts, this.isDark ? 'dark' : 'macarons', {
-          renderer: 'svg'
-        });
+        const chart = echarts.init($echarts, this.isDark ? 'dark' : 'light', { renderer: 'svg' });
        chart.setOption(JSON.parse(this.data[$echarts.id]));
        this._echartsArr.push(chart);
      });