vue3（组合式API风格）使用echarts

Vue 3是一种流行的JavaScript框架，它提供了一种组合式API风格来构建用户界面。而Echarts是一款强大的数据可视化库，可以用于创建各种图表和图形。

要在Vue 3中使用Echarts，首先需要安装Echarts库。可以通过npm或yarn来安装，例如：

npm install echarts

安装完成后，在Vue组件中引入Echarts，并在模板中创建一个容器来显示图表。然后，使用Echarts提供的API来配置和渲染图表。

下面是一个简单的示例，展示如何在Vue 3中使用Echarts：

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

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

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

      const option = {
        // 配置图表的选项和数据
        // ...
      };

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

在上面的示例中，我们首先在模板中创建了一个div元素作为图表的容器，并通过`ref`属性给它一个引用名。然后，在`mounted`生命周期钩子中调用`renderChart`方法来渲染图表。

在`renderChart`方法中，我们首先通过`this.$refs.chart`获取到图表容器的DOM元素，然后使用`echarts.init`方法初始化一个Echarts实例。接下来，我们可以使用Echarts提供的API来配置图表的选项和数据，最后通过`myChart.setOption(option)`来渲染图表。

这只是一个简单的示例，你可以根据自己的需求来配置和定制图表。如果需要更多的功能和用法，请参考Echarts官方文档。