1、echarts配置化

src/views/dashboard/LineChartnew.vue

@@ -28,36 +28,38 @@ export default {
       required: true
     }
   },
-  defaultOption: {
-    title: {
-      text: null,
-      left: 'center'
-    },
-    tooltip: {
-      show: true,
-      trigger: 'axis'
-    },
-    legend: {
-      data: []
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: []
-    },
-    yAxis: {
-      type: 'value'
-    },
-    series: []
-  },
+
   data() {
-    return {};
+    return {
+      defaultOption: {
+        title: {
+          text: null,
+          left: 'center'
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis'
+        },
+        legend: {
+          data: []
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: []
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: []
+      }
+    };
   },
   mounted() {
     this.initChart();
@@ -65,12 +67,10 @@ export default {
   methods: {
     initChart() {
       console.log(this.chartData);
-      Object.keys(this.chartData).forEach((key) => {
-        this.defaultOption[key] = this.chartData[key];
-      });
+      this.defaultOption = { ...this.defaultOption, ...this.chartData };
       const chartDom = document.getElementById('LineChartnew');
       const myChart = echarts.init(chartDom);
-      myChart(this.defaultOption);
+      myChart.setOption(this.defaultOption);
     }
 
     /*    setOptions(chartData) {

src/views/index.vue

@@ -92,7 +92,6 @@ const LinechartData = ref({
     boundaryGap: false,
     data: []
   },
-  legend: {},
   series: [
     { name: '用户量', data: [] },
     { name: '在线用户', data: [] },