vue3-ts使用echarts

Vue3-TS是将TypeScript引入到Vue3框架中的，它增加了静态类型检查的功能，使得项目更具健壮性和可维护性。ECharts是一个强大的数据可视化库，常用于创建图表。

要在Vue3-TS项目中使用ECharts，你需要按照以下步骤操作：

1. **安装依赖**:
使用npm或yarn添加ECharts及其vue组件版本：

   npm install echarts @vue-charts/echarts --save

2. **导入并配置**:
在Vue组件中，首先通过`import ECharts from '@vue-charts/echarts'`引入ECharts，并在组件的setup()钩子函数中初始化：

   import { ref } from 'vue';
   import { ECharts } from '@vue-charts/echarts';

   const chartRef = ref<Chart>();
   const initChart = async () => {
     chartRef.value = new ECharts({
       // 配置项，如全局主题、数据源等
     });
     // 初始化图表
   };

3. **渲染图表**:
在模板中使用`v-chart`指令绑定到chartRef，并设置图表数据和配置：

   <div v-chart="initChart" :options="chartOptions"></div>

4. **传递数据和配置**:
在组件的data选项里定义`chartOptions`，并将实际的数据和配置传入：

   export default defineComponent({
     data() {
       return {
         chartOptions: {
           // ECharts的配置项
         },
         // 数据源
         dataForChart: [],
       };
     },
     methods: {
       fetchData() {
         // 获取数据并更新chartOptions
       },
     },
   });

5. **响应式更新**:
当数据发生变化时，需要手动触发图表的刷新：

   onMounted(() => {
     initChart();
   }),
   watch('dataForChart', (newData) => {
     chartRef.value.setOption({ ...chartOptions, series: newData }); // 更新图表数据
   }),