vue3 echart使用

Vue3和ECharts的结合使用可以让你在Vue3项目中轻松地嵌入和使用图表。ECharts是一个使用JavaScript编写的开源可视化库，适用于商业级数据可视化。Vue3则是JavaScript框架，用于构建用户界面。以下是使用Vue3和ECharts的基本步骤：

1. 安装ECharts依赖包：
你可以通过npm或yarn来安装ECharts。

   npm install echarts --save
   # 或者
   yarn add echarts

2. 在Vue3组件中引入ECharts：
在你的Vue3组件中，你可以使用`import`语句来引入ECharts。

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

3. 创建图表容器：
在组件的模板部分，你需要一个DOM元素作为ECharts图表的容器。

   <template>
     <div ref="chartContainer" style="width: 600px;height:400px;"></div>
   </template>

4. 初始化ECharts实例并设置配置：
在`setup`函数或者Vue的生命周期钩子（如`mounted`）中，你可以初始化ECharts实例并设置图表配置。

   <script setup>
   import { onMounted, ref } from 'vue';
   import * as echarts from 'echarts';

   const chartContainer = ref(null);
   let chartInstance = null;

   onMounted(() => {
     chartInstance = echarts.init(chartContainer.value);
     chartInstance.setOption({
       // 这里填写你的ECharts配置项
       title: {
         text: 'ECharts 示例',
       },
       tooltip: {},
       xAxis: {
         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
       },
       yAxis: {},
       series: [{
         name: '销量',
         type: 'bar',
         data: [5, 20, 36, 10, 10, 20],
       }]
     });
   });
   </script>

5. 确保ECharts图表响应式更新：
如果你的数据或配置项需要根据某些响应式数据进行更新，确保你正确地使用Vue的响应式系统来实现这一点。