vue3+typescript(Echarts正确使用姿势)

<template>
  <div ref="chartRef" :style="{ width: '600px', height: '400px' }"></div>
</template>
 
<script lang="ts">
import { ref, onMounted, watch, Ref } from 'vue';
import * as echarts from 'echarts';
 
export default {
  setup() {
    const chartRef: Ref<HTMLDivElement | null> = ref(null);
    let chartInstance: echarts.ECharts | null = null;
 
    onMounted(() => {
      if (chartRef.value) {
        chartInstance = echarts.init(chartRef.value);
        chartInstance.setOption({
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        });
      }
    });
 
    watch(chartRef, (newValue) => {
      if (newValue && !chartInstance) {
        chartInstance = echarts.init(newValue);
      }
    });
 
    return {
      chartRef
    };
  }
};
</script>

这个示例代码展示了如何在Vue 3和TypeScript环境中正确使用ECharts。首先，我们通过ref创建一个对<div>元素的引用，该元素将用作ECharts实例的容器。在onMounted生命周期钩子中，我们初始化ECharts实例，并设置了一个基本的图表选项。我们还使用watch来监听chartRef的变化，以确保在组件的生命周期内，无论何时chartRef变为可用，我们都能正确初始化ECharts实例。