vue3使用echart

Vue 3与ECharts的集成相对简单。下面是一个简单的示例，展示了如何在Vue 3项目中使用ECharts：

1. 首先，确保你已经安装了ECharts。可以通过npm或yarn进行安装：

npm install echarts

2. 在Vue组件中引入ECharts，并在mounted钩子函数中初始化图表：

<template>
  <div ref="chart" style="width: 400px; height: 300px;"></div>
</template>

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

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);

      const option = {
        // 这里是ECharts的配置项，根据你的需求进行配置
        // 可以参考ECharts官方文档：https://echarts.apache.org/zh/index.html
      };

      myChart.setOption(option);
    },
  },
};
</script>

注意事项：
- 在`<template>`标签中，我们使用一个具有特定ref属性的`<div>`元素，这个ref将用于初始化图表。
- 在`<script>`标签中，我们首先引入了ECharts库，然后在`mounted`钩子函数中初始化了图表。
- `option`对象是ECharts的配置项，你可以根据自己的需求进行配置。具体的配置方式可以参考[ECharts官方文档](https://echarts.apache.org/zh/index.html)。

这样，你就可以在Vue 3项目中使用ECharts来绘制图表了。记得根据自己的需求进行配置和样式调整。