JavaScript实现堆叠图echarts

EBYB

已于 2022-03-23 17:51:53 修改

阅读量615

点赞数

分类专栏： JavaScript

于 2022-03-22 23:49:07 首次发布

本文链接：https://blog.csdn.net/qq_53326467/article/details/123674938

版权

Echarts 堆叠图柱状图数据可视化 JavaScript

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

echarts.js下载链接

提取码：qj3g

根据以下数据实现堆叠图

堆叠图数据
	男	女
20~29岁	4	6
30~39岁	0	3
40~49岁	1	0

代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="echarts.js"></script>
</head>

<body>
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title: {
                text: '会员年龄段分布情况',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow' 
                }
            },
            legend: {
                data: ['男', '女']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['20~29岁', '30~39岁', '40~49岁']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '男',
                    type: 'bar',
                    stack: '111',
                    data: [4, 0, 1],
                },
                {
                    name: '女',
                    type: 'bar',
                    stack: '111', 
                    data: [6, 3, 0]
                },
            ]
        };
        myChart.setOption(option); 
    </script>
</body>

</html>