vus3+Ts Apache ECharts 的使用（可视化图表库）

Apache ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以运行在浏览器和 Node.js 环境中，提供了丰富的图表组件。

以下是一个简单的示例，展示如何在 Vue 3 + TypeScript 项目中使用 Apache ECharts 创建一个简单的柱状图：

首先，安装 ECharts 依赖：

npm install echarts --save

然后，在 Vue 组件中使用 ECharts：

<template>
  <div ref="echartsRef" style="width: 600px; height: 400px;"></div>
</template>
 
<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
 
export default defineComponent({
  name: 'BarChart',
  setup() {
    const echartsRef = ref(null);
    let chartInstance: echarts.ECharts | null = null;
 
    onMounted(() => {
      chartInstance = echarts.init(echartsRef.value);
      const option = {
        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'
          }
        ]
      };
 
      chartInstance?.setOption(option);
    });
 
    onUnmounted(() => {
      chartInstance?.dispose();
    });
 
    return {
      echartsRef
    };
  }
});
</script>

在这个例子中，我们创建了一个柱状图，在组件挂载时，我们使用 echarts.init 方法初始化 ECharts 实例，并通过 setOption 方法设置图表的配置项。同时，我们在组件卸载时通过 dispose 方法清理 ECharts 实例，避免内存泄漏。