堆叠柱状图_qiun-data-charts堆叠柱状-优快云博客

本文链接：https://blog.youkuaiyun.com/lianflower/article/details/107983118

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px;height: 600px;border: red solid 1px;"></div>
<script>
    var myChart = echarts.init(document.getElementById('chart'), null, {devicePixelRatio: 3});
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {},
            }
        },
        legend: {
            data: ['邮件营销', '联盟广告', '视频广告', '上门推销']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '邮件营销',
                type: 'bar',
                stack: '广告',
                label: {
                    show: true,
                    color: 'white'
                },
                data: [120, 132, 101, 134, 90, 230, 210],
                barWidth: '40%'
            },
            {
                name: '联盟广告',
                type: 'bar',
                stack: '广告',
                label: {
                    show: true,
                    color: 'white'
                },
                data: [220, 182, 191, 234, 290, 330, 310],
            },
            {
                name: '视频广告',
                type: 'bar',
                stack: '广告',
                label: {
                    show: true,
                    color: 'white'
                },
                data: [150, 232, 201, 154, 190, 330, 410],
            },
            {
                name: '上门推销',
                type: 'bar',
                stack: '广告',
                label: {
                    show: true,
                    color: 'white'
                },
                data: [170, 202, 101, 254, 90, 230, 310],
            }
        ]
    };
    myChart.setOption(option);

</script>
</body>
</html>