vue3 echarts 柱状图基础

Vue3是使用JavaScript构建用户界面的渐进式框架，而ECharts是一个使用JavaScript实现的开源可视化库。在Vue3项目中使用ECharts来创建一个基础的柱状图，你需要先安装ECharts的npm包，并在你的Vue组件中引入它。

以下是使用Vue3和ECharts创建柱状图的基本步骤：

1. 安装ECharts：
你可以通过npm或yarn命令来安装ECharts。

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

2. 在Vue组件中引入ECharts：
在你的`.vue`文件中引入ECharts，并在`<script setup>`（如果你使用的是Vue3的Composition API）或者`<script>`部分中定义你的图表配置和初始化。

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

   // 创建一个echarts实例
   const chart = ref(null);
   const data = ref([4000, 3000, 2000, 2780, 1890, 2390]); // 柱状图数据

   onMounted(() => {
       // 初始化ECharts实例
       const myChart = echarts.init(chart.value);
       const option = {
           title: {
               text: 'ECharts 示例'
           },
           tooltip: {},
           xAxis: {
               data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
           },
           yAxis: {},
           series: [{
               name: '销量',
               type: 'bar',
               data: data.value
           }]
       };
       myChart.setOption(option);
       chart.value.setOption(option); // 更新图表数据
   });
   </script>

3. 在Vue模板中添加一个元素来承载ECharts图表：

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

这样，当你加载这个Vue组件时，它会自动初始化一个带有柱状图的ECharts图表。