vue echarts 堆叠pictorialBar

Vue Echarts 是将 ECharts 这款强大的数据可视化库与 Vue.js 框架结合的一个组件化解决方案。当你想要在 Vue 项目中使用 Echarts 的堆叠柱状图（Pictorial Bar），可以按照以下步骤操作：

1. 首先，在你的 Vue 项目中安装 Vue ECharts 组件库，你可以使用 npm 或者 yarn 安装：

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

2. 在你的组件中引入并配置 Echarts：

<template>
  <div id="chartContainer" style="height:400px;"></div>
</template>

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

export default {
  components: {
    ECharts,
  },
  data() {
    return {
      chartOption: {
        // 设置堆叠柱状图的基础选项
        series: [{
          type: 'pictorialBar',
          stack: '总量', // 堆叠层名称
          data: [
            { name: 'A', value: 50 },
            { name: 'B', value: 70 },
            { name: 'C', value: 80 }
          ]
        }]
      };
    };
  },
  mounted() {
    this.$refs.chart.render(this.chartOption);
  },
};
</script>

在这个例子中，`stack` 属性指定了堆叠层名，每个系列的数据包含名字和值。