可视化例子(12)——ECharts堆叠直方图_echarts 堆叠直方图-CSDN博客

本文链接：https://blog.csdn.net/Ocean111best/article/details/104950376

堆叠直方图主要是要 series.stack 属性一样。

全部代码如下

<!DOCTYPE html>
<html style="height: 100%">
<head>
	<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/echarts-gl.min.js"></script>
<script type="text/javascript" src="../js/theme/dark.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom,'dark');
var app = {};
option = null;

//确诊人数
dataGD01 = [53,78,98,146,188,241,311,393,520,604,683,797,870,944,
    1018,1075,1120,1151,1177,1219,1241,1261,1294,1316,1322,1328,1331];
//累计出院
dataGD02 = [2,2,2,2,4,5,6,9,10,12,14,20,32,49,68,97,
    125,143,181,241,284,332,386,436,473,530,571];

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    title: {
        text: '广东省每日确诊和累计出院人数变化趋势',
        top:20,
        left: 'center',
        textStyle:{
            fontSize: 25
        }
    },
    legend: {
        orient: 'vertical',
        itemWidth: 20,
        itemHeight:10,
        right: 50,
        top:15,
        data: [ '广东省每日确诊人数', '广东省每日累计出院人数']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            axisLabel:{'interval':0},
            data: ['1/23','1/24','1/25','1/26', '1/27',
                '1/28', '1/29', '1/30', '1/31', '2/1', '2/2', '2/3',
                '2/4', '2/5', '2/6', '2/7', '2/8', '2/9', '2/10',
                '2/11','2/12','2/13','2/14','2/15','2/16','2/17','2/18']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '广东省每日确诊人数',
            type: 'bar',
            stack: '广告',
            barMinHeight: 2,
            data: dataGD01,
			label:{
                show: true
			},
            itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                    ]
                )
            }
        },
        {
            name: '广东省每日累计出院人数',
            type: 'bar',
            stack: '广告',
            barMinHeight: 2,
            data: dataGD02,
            label:{
                show: true
            },
            itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#99D8C9'},
                        {offset: 0.5, color: '#238B45'},
                        {offset: 1, color: '#238B45'}
                    ]
                )
            }
        }
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
</script>
</body>
</html>