vue echarts 柱状图设置柱状的大小宽度

在 Vue 中使用 ECharts 创建柱状图并设置柱子的宽度，你可以通过 `series` 对象配置 `barWidth` 属性来实现。首先，你需要安装 ECharts 的 Vue 组件库，例如 "vue-echarts"。

以下是一个简单的例子：

<template>
  <div id="chart-container">
    <v-chart :options="chartOptions"></v-chart>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ECharts } from 'vue-echarts';

export default {
  components: {
    VChart: {
      extends: ECharts,
      props: ['options']
    }
  },
  data() {
    return {
      chartOptions: {
        series: [
          {
            name: '柱状图',
            type: 'bar', // 设置为柱状图类型
            data: [50, 70, 80, 90], // 数据数组
            barWidth: '40%', // 设置每根柱子的宽度为 40% （可根据需要调整）
            itemStyle: {
              normal: {
                color: '#3398DB' // 柱子颜色
              }
            }
          }
        ],
        xAxis: { // x轴配置
          data: ['A', 'B', 'C', 'D'] // 列表标签
        }
      }
    };
  }
};
</script>

在这个例子中，我们设置了每个柱子的宽度为 40%，并且指定了柱子的颜色。你可以根据实际数据和设计需求修改这些属性。