charts主题

src/assets/customEcharts.json

@@ -0,0 +1,160 @@
+{
+    "seriesCnt": "8",
+    "backgroundColor": "rgba(0,0,0,0)",
+    "titleColor": "#464646",
+    "subtitleColor": "#6e7079",
+    "textColorShow": false,
+    "textColor": "#333",
+    "markTextColor": "#eeeeee",
+    "color": [
+        "#628be9",
+        "#7acba3",
+        "#5c6b8b",
+        "#ffb63b",
+        "#6660e9",
+        "#7fbedf",
+        "#8560af",
+        "#e39550"
+    ],
+    "borderColor": "#ccc",
+    "borderWidth": 0,
+    "visualMapColor": [
+        "#bf444c",
+        "#d88273",
+        "#f6efa6"
+    ],
+    "legendTextColor": "#333333",
+    "kColor": "#eb5454",
+    "kColor0": "#47b262",
+    "kBorderColor": "#eb5454",
+    "kBorderColor0": "#47b262",
+    "kBorderWidth": 1,
+    "lineWidth": 2,
+    "symbolSize": 4,
+    "symbol": "emptyCircle",
+    "symbolBorderWidth": 1,
+    "lineSmooth": false,
+    "graphLineWidth": 1,
+    "graphLineColor": "#aaaaaa",
+    "mapLabelColor": "#000",
+    "mapLabelColorE": "rgb(100,0,0)",
+    "mapBorderColor": "#444",
+    "mapBorderColorE": "#444",
+    "mapBorderWidth": 0.5,
+    "mapBorderWidthE": 1,
+    "mapAreaColor": "#eee",
+    "mapAreaColorE": "rgba(255,215,0,0.8)",
+    "axes": [
+        {
+            "type": "all",
+            "name": "通用坐标轴",
+            "axisLineShow": true,
+            "axisLineColor": "#6E7079",
+            "axisTickShow": true,
+            "axisTickColor": "#6E7079",
+            "axisLabelShow": true,
+            "axisLabelColor": "#6E7079",
+            "splitLineShow": true,
+            "splitLineColor": [
+                "#E0E6F1"
+            ],
+            "splitAreaShow": false,
+            "splitAreaColor": [
+                "rgba(250,250,250,0.2)",
+                "rgba(210,219,238,0.2)"
+            ]
+        },
+        {
+            "type": "category",
+            "name": "类目坐标轴",
+            "axisLineShow": true,
+            "axisLineColor": "#6E7079",
+            "axisTickShow": true,
+            "axisTickColor": "#6E7079",
+            "axisLabelShow": true,
+            "axisLabelColor": "#6E7079",
+            "splitLineShow": false,
+            "splitLineColor": [
+                "#E0E6F1"
+            ],
+            "splitAreaShow": false,
+            "splitAreaColor": [
+                "rgba(250,250,250,0.2)",
+                "rgba(210,219,238,0.2)"
+            ]
+        },
+        {
+            "type": "value",
+            "name": "数值坐标轴",
+            "axisLineShow": false,
+            "axisLineColor": "#6E7079",
+            "axisTickShow": false,
+            "axisTickColor": "#6E7079",
+            "axisLabelShow": true,
+            "axisLabelColor": "#6E7079",
+            "splitLineShow": true,
+            "splitLineColor": [
+                "#E0E6F1"
+            ],
+            "splitAreaShow": false,
+            "splitAreaColor": [
+                "rgba(250,250,250,0.2)",
+                "rgba(210,219,238,0.2)"
+            ]
+        },
+        {
+            "type": "log",
+            "name": "对数坐标轴",
+            "axisLineShow": false,
+            "axisLineColor": "#6E7079",
+            "axisTickShow": false,
+            "axisTickColor": "#6E7079",
+            "axisLabelShow": true,
+            "axisLabelColor": "#6E7079",
+            "splitLineShow": true,
+            "splitLineColor": [
+                "#E0E6F1"
+            ],
+            "splitAreaShow": false,
+            "splitAreaColor": [
+                "rgba(250,250,250,0.2)",
+                "rgba(210,219,238,0.2)"
+            ]
+        },
+        {
+            "type": "time",
+            "name": "时间坐标轴",
+            "axisLineShow": true,
+            "axisLineColor": "#6E7079",
+            "axisTickShow": true,
+            "axisTickColor": "#6E7079",
+            "axisLabelShow": true,
+            "axisLabelColor": "#6E7079",
+            "splitLineShow": false,
+            "splitLineColor": [
+                "#E0E6F1"
+            ],
+            "splitAreaShow": false,
+            "splitAreaColor": [
+                "rgba(250,250,250,0.2)",
+                "rgba(210,219,238,0.2)"
+            ]
+        }
+    ],
+    "axisSeperateSetting": true,
+    "toolboxColor": "#999999",
+    "toolboxEmphasisColor": "#666666",
+    "tooltipAxisColor": "#cccccc",
+    "tooltipAxisWidth": 1,
+    "timelineLineColor": "#dae1f5",
+    "timelineLineWidth": 2,
+    "timelineItemColor": "#a4b1d7",
+    "timelineItemColorE": "#ffffff",
+    "timelineCheckColor": "#316bf3",
+    "timelineCheckBorderColor": "#ffffff",
+    "timelineItemBorderWidth": 1,
+    "timelineControlColor": "#a4b1d7",
+    "timelineControlBorderColor": "#a4b1d7",
+    "timelineControlBorderWidth": 1,
+    "timelineLabelColor": "#a4b1d7"
+}

src/components/chart.vue

@@ -10,6 +10,8 @@ import * as Echarts from 'echarts'
 import {
   nextTick, onUnmounted, ref, watch
 } from 'vue'
+import customEcharts from '../assets/customEcharts.json'
+Echarts.registerTheme('slef-theme', customEcharts)
 
 const props = defineProps<{
     option: Echarts.EChartsOption | any
@@ -18,7 +20,7 @@ const chart = ref()
 let myChart = null as any
 
 nextTick(() => {
-  myChart = Echarts.init(chart.value)
+  myChart = Echarts.init(chart.value, 'slef-theme')
 })
 
 watch(() => props.option, (v) => {