Echarts如何实现柱状图堆叠

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以用于生成各种图表，包括柱状图。要实现柱状图的堆叠，你需要设置 series 中的 stack 属性。以下是一个简单的示例：

首先，确保你已经在 HTML 文件中引入了 ECharts 的 JavaScript 文件：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>

然后，在 HTML 文件中创建一个用于渲染图表的容器：

<div id="main" style="width: 600px;height:400px;"></div>

接下来，编写 JavaScript 代码来初始化图表并设置相关配置：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['邮件营销', '联盟广告', '视频广告']
    },
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '邮件营销',
            type: 'bar',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'bar',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'bar',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

在这个示例中，我们设置了 series 中的 stack 属性为相同的值（例如 “总量”），这将使得这三个系列的柱状图堆叠在一起。你可以根据需要修改数据和配置项以满足你的需求。