vue3中的echarts中的柱状图，如何显示每个柱子的数据

在 Vue3 中使用 ECharts 来创建柱状图，并展示每个柱子的数据，你需要先安装 ECharts 和相关的依赖，然后在组件中配置图表。以下是基本步骤：

1. **安装依赖**：
使用 npm 或者 yarn 安装 echarts 和 axios（用于获取数据）：

   npm install echarts axios

2. **引入并初始化 ECharts**：
在你的组件里导入 ECharts 并在 mounted 钩子函数中初始化图表：

   import ECharts from 'echarts';
   import axios from 'axios';

   export default {
     setup() {
       const chart = ref(null);
       onMounted(() => {
         initChart();
       });
   
       async function initChart() {
         // ... 后续设置图表配置
         const option = {
           // ... 柱状图配置，包含 series 数据
         };
         chart.value = new ECharts({
           container: '#chart',
           // 其他 ECharts 初始化配置
         });
         chart.value.setOption(option);
       }
   
       return { chart };
     }
   };

3. **添加柱状图数据**：
在 `series` 中，你需要一个数组来存储每个柱子的数据，例如每个柱子代表一个类别及其对应的值：

   const data = [
     { name: '类别A', value: 45 },
     { name: '类别B', value: 60 },
     { name: '类别C', value: 75 },
     // 更多类别...
   ];
   
   const option = {
     series: [{
       type: 'bar',
       data,
       label: {
         show: true,
         position: 'top',
         formatter: '{b}: {c} ({d}%)' // 显示柱子名称、值以及百分比
       }
     }]
   };

这里的 `{b}` 表示柱子名称，`{c}` 表示值，`{d}` 表示值占总值的比例。

4. **显示每个柱子的具体数值**：
在 `formatter` 属性的回调函数中，你可以自定义每个柱子标签的内容，使其显示详细的数值信息。

label: {
  show: true,
  position: 'top',
  formatter: (params) => `${params.name}: ${params.value}`
}

这样就实现了每个柱子显示其数据的功能。