vue3 echarts

可以通过在 Vue3 中使用 ECharts 来实现数据可视化。以下是实现步骤：

1. 安装 ECharts：可以通过 npm 或者 yarn 等工具进行安装。

2. 在 Vue3 中引入 ECharts：在需要使用 ECharts 的组件中，可以通过 import 引入 ECharts。

3. 初始化 ECharts：在组件的 mounted 钩子函数中，可以通过在 DOM 元素中创建一个 div 节点，然后使用 echarts.init() 方法初始化 ECharts 实例。

4. 渲染图表：通过 ECharts 实例的 setOption() 方法，将需要展示的数据传递给 ECharts，渲染出对应的图表。

5. 在组件销毁时销毁 ECharts 实例。

一个简单的实现示例：

<template>
  <div ref="chartContainer" style="width: 100%; height: 500px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'EChartsDemo',
  mounted() {
    // 初始化 ECharts 实例
    const chart = echarts.init(this.$refs.chartContainer);

    // 设置图表的配置项和数据
    chart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20, 5]
      }]
    });
  },
  beforeUnmount() {
    // 销毁 ECharts 实例
    echarts.dispose(this.$refs.chartContainer);
  }
}
</script>

这是一个简单的柱状图示例，可以根据实际需求进行修改。