Vue3 中使用 TypeScript 封装 Echarts 图表组件

以 Vue3 的 Composition API 和 TypeScript 语法为基础，可以封装一个生成 Echarts 图表的方法：

<template>
  <div :id="chartId" :style="{ width: chartWidth + 'px', height: chartHeight + 'px' }"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'

interface ChartProps {
  chartWidth: number
  chartHeight: number
  chartOption: echarts.EChartsOption
  chartId: string
}

export default defineComponent({
  props: {
    chartWidth: {
      type: Number,
      default: 600
    },
    chartHeight: {
      type: Number,
      default: 400
    },
    chartOption: {
      type: Object,
      default: () => ({})
    },
    chartId: {
      type: String,
      required: true
    }
  },
  setup(props: ChartProps) {
    const chartInstance = ref<echarts.ECharts | null>(null)

    const initChart = () => {
      const chartDom = document.getElementById(props.chartId)
      if (chartDom) {
        chartInstance.value = echarts.init(chartDom)
        chartInstance.value.setOption(props.chartOption)
      }
    }

    onMounted(() => {
      initChart()
    })

    watch(
      () => props.chartOption,
      () => {
        if (chartInstance.value) {
          chartInstance.value.setOption(props.chartOption)
        }
      }
    )

    return {
      chartWidth: props.chartWidth,
      chartHeight: props.chartHeight,
      chartId: props.chartId
    }
  }
})
</script>

在模板中使用该组件，可以通过传入不同的 props 生成不同的图表：

<template>
  <div>
    <chart
      :chart-width="600"
      :chart-height="400"
      :chart-option="lineChartOption"
      chart-id="line-chart"
    />
    <chart
      :chart-width="400"
      :chart-height="600"
      :chart-option="barChartOption"
      chart-id="bar-chart"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Chart from './Chart.vue'

export default defineComponent({
  components: {
    Chart
  },
  data() {
    return {
      lineChartOption: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'line'
          }
        ]
      },
      barChartOption: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      }
    }
  }
})
</script>