更换组合式API写法

src/views/dashboard/BarChart.vue

@@ -1,101 +1,90 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
 </template>
 
-<script>
-import * as echarts from 'echarts';
-// import resize from './mixins/resize'
-
+<script setup>
+import * as echarts from 'echarts'
+let chart = null
+const { proxy } = getCurrentInstance()
 const animationDuration = 6000
+const props = defineProps({
+  className: {
+    type: String,
+    default: 'chart',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  height: {
+    type: String,
+    default: '300px',
+  },
+})
+function initChart() {
+  chart = echarts.init(proxy.$refs.chartRef, 'macarons')
 
-export default {
-  // mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
+  chart.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+      },
     },
-    width: {
-      type: String,
-      default: '100%'
+    grid: {
+      top: 10,
+      left: '2%',
+      right: '2%',
+      bottom: '3%',
+      containLabel: true,
     },
-    height: {
-      type: String,
-      default: '300px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el)
-
-      this.chart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
+    xAxis: [
+      {
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        axisTick: {
+          alignWithLabel: true,
         },
-        grid: {
-          top: 10,
-          left: '2%',
-          right: '2%',
-          bottom: '3%',
-          containLabel: true
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        axisTick: {
+          show: false,
         },
-        xAxis: [{
-          type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          axisTick: {
-            alignWithLabel: true
-          }
-        }],
-        yAxis: [{
-          type: 'value',
-          axisTick: {
-            show: false
-          }
-        }],
-        series: [{
-          name: 'pageA',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [79, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }, {
-          name: 'pageB',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [80, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }, {
-          name: 'pageC',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [30, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }]
-      })
-    }
-  }
+      },
+    ],
+    series: [
+      {
+        name: 'pageA',
+        type: 'bar',
+        stack: 'vistors',
+        barWidth: '60%',
+        data: [79, 52, 200, 334, 390, 330, 220],
+        animationDuration,
+      },
+      {
+        name: 'pageB',
+        type: 'bar',
+        stack: 'vistors',
+        barWidth: '60%',
+        data: [80, 52, 200, 334, 390, 330, 220],
+        animationDuration,
+      },
+      {
+        name: 'pageC',
+        type: 'bar',
+        stack: 'vistors',
+        barWidth: '60%',
+        data: [30, 52, 200, 334, 390, 330, 220],
+        animationDuration,
+      },
+    ],
+  })
 }
+onMounted(() => {
+  initChart()
+})
 </script>

src/views/dashboard/LineChart.vue

@@ -1,133 +1,118 @@
 <template>
-  <div :class="className" :style="{ height: height, width: width }" />
+  <div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
 </template>
 
-<script>
+<script setup>
 import * as echarts from 'echarts'
-// import resize from './mixins/resize'
+const { proxy } = getCurrentInstance()
+const chartRef = ref(null)
+const props = defineProps({
+  className: {
+    type: String,
+    default: 'chart',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  height: {
+    type: String,
+    default: '350px',
+  },
+  autoResize: {
+    type: Boolean,
+    default: true,
+  },
+  chartData: {
+    type: Object,
+    required: true,
+  },
+})
+let chart = null
+watch(
+  () => props.chartData,
+  (val) => {
+    setOptions(val)
+  },
+  { deep: true },
+)
 
-export default {
-  // mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart',
-    },
-    width: {
-      type: String,
-      default: '100%',
-    },
-    height: {
-      type: String,
-      default: '350px',
-    },
-    autoResize: {
-      type: Boolean,
-      default: true,
-    },
-    chartData: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      chart: null,
-    }
-  },
-  watch: {
-    chartData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
+function setOptions({ expectedData, actualData } = {}) {
+  chart.setOption({
+    xAxis: {
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      boundaryGap: false,
+      axisTick: {
+        show: false,
       },
     },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el)
-      this.setOptions(this.chartData)
+    grid: {
+      left: 10,
+      right: 10,
+      bottom: 20,
+      top: 30,
+      containLabel: true,
     },
-    setOptions({ expectedData, actualData } = {}) {
-      this.chart.setOption({
-        xAxis: {
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          boundaryGap: false,
-          axisTick: {
-            show: false,
-          },
-        },
-        grid: {
-          left: 10,
-          right: 10,
-          bottom: 20,
-          top: 30,
-          containLabel: true,
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
-          },
-          padding: [5, 10],
-        },
-        yAxis: {
-          axisTick: {
-            show: false,
-          },
-        },
-        legend: {
-          data: ['expected', 'actual'],
-        },
-        series: [
-          {
-            name: 'expected',
-            itemStyle: {
-              color: '#FF005A',
-              lineStyle: {
-                color: '#FF005A',
-                width: 2,
-              },
-            },
-            smooth: true,
-            type: 'line',
-            data: expectedData,
-            animationDuration: 2800,
-            animationEasing: 'cubicInOut',
-          },
-          {
-            name: 'actual',
-            smooth: true,
-            type: 'line',
-            itemStyle: {
-              color: '#3888fa',
-              areaStyle: {
-                color: '#f3f8ff',
-              },
-              lineStyle: {
-                color: '#3888fa',
-                width: 2,
-              },
-            },
-            data: actualData,
-            animationDuration: 2800,
-            animationEasing: 'quadraticOut',
-          },
-        ],
-      })
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+      },
+      padding: [5, 10],
     },
-  },
+    yAxis: {
+      axisTick: {
+        show: false,
+      },
+    },
+    legend: {
+      data: ['expected', 'actual'],
+    },
+    series: [
+      {
+        name: 'expected',
+        itemStyle: {
+          color: '#FF005A',
+          lineStyle: {
+            color: '#FF005A',
+            width: 2,
+          },
+        },
+        smooth: true,
+        type: 'line',
+        data: expectedData,
+        animationDuration: 2800,
+        animationEasing: 'cubicInOut',
+      },
+      {
+        name: 'actual',
+        smooth: true,
+        type: 'line',
+        itemStyle: {
+          color: '#3888fa',
+          areaStyle: {
+            color: '#f3f8ff',
+          },
+          lineStyle: {
+            color: '#3888fa',
+            width: 2,
+          },
+        },
+        data: actualData,
+        animationDuration: 2800,
+        animationEasing: 'quadraticOut',
+      },
+    ],
+  })
+}
+function initChart() {
+  chart = echarts.init(proxy.$refs.chartRef, 'macarons')
+  setOptions(props.chartData)
+}
+onMounted(() => {
+  initChart()
+})
+window.onresize = function () {
+  chart.resize()
 }
 </script>

src/views/dashboard/PieChart.vue

@@ -1,78 +1,60 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
 </template>
 
-<script>
-import * as echarts from 'echarts';
-// import resize from './mixins/resize'
+<script setup>
+import * as echarts from 'echarts'
+const { proxy } = getCurrentInstance()
+let chart = null
+const props = defineProps({
+  className: {
+    type: String,
+    default: 'chart',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  height: {
+    type: String,
+    default: '300px',
+  },
+})
 
-export default {
-  // mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '300px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el)
+function initChart() {
+  chart = echarts.init(proxy.$refs.chartRef)
 
-      this.chart.setOption({
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        legend: {
-          left: 'center',
-          bottom: '10',
-          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
-        },
-        series: [
-          {
-            name: 'WEEKLY WRITE ARTICLES',
-            type: 'pie',
-            roseType: 'radius',
-            radius: [15, 95],
-            center: ['50%', '38%'],
-            data: [
-              { value: 320, name: 'Industries' },
-              { value: 240, name: 'Technology' },
-              { value: 149, name: 'Forex' },
-              { value: 100, name: 'Gold' },
-              { value: 59, name: 'Forecasts' }
-            ],
-            animationEasing: 'cubicInOut',
-            animationDuration: 2600
-          }
-        ]
-      })
-    }
-  }
+  chart.setOption({
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b} : {c} ({d}%)',
+    },
+    legend: {
+      left: 'center',
+      bottom: '10',
+      data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'],
+    },
+    series: [
+      {
+        name: 'WEEKLY WRITE ARTICLES',
+        type: 'pie',
+        roseType: 'radius',
+        radius: [15, 95],
+        center: ['50%', '38%'],
+        data: [
+          { value: 320, name: 'Industries' },
+          { value: 240, name: 'Technology' },
+          { value: 149, name: 'Forex' },
+          { value: 100, name: 'Gold' },
+          { value: 59, name: 'Forecasts' },
+        ],
+        animationEasing: 'cubicInOut',
+        animationDuration: 2600,
+      },
+    ],
+  })
 }
+onMounted(() => {
+  initChart()
+})
 </script>

src/views/dashboard/RaddarChart.vue

@@ -4,7 +4,6 @@
 
 <script>
 import * as echarts from 'echarts'
-// import resize from './mixins/resize'
 
 const animationDuration = 3000