Echarts笔记——柱状图（1）水平堆叠柱状图

最新推荐文章于 2024-05-15 11:06:01 发布

寧三一

最新推荐文章于 2024-05-15 11:06:01 发布

阅读量1.5k

点赞数 2

分类专栏： echarts 文章标签：数据可视化 echarts js

本文链接：https://blog.csdn.net/weixin_51967583/article/details/115333009

版权

echarts 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

Echarts笔记——柱状图(1)水平堆叠柱状图

1.柱状图类型（ bar )

2.水平（x轴，y轴对调属性）

3.堆叠（series里添加stack属性）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平堆叠柱状图</title>
    <script src="../../js/echarts.js"></script>
</head>
<body>
    <div id="main" style="height: 800px;width: 1200px;"></div>

    <script>
        barData = [3324, 2352, 4522, 1469, 6379, 5315, 2793, 4324]
        barData1 = [2312,3145, 6754, 8712, 3157, 1023, 5623, 8324]
        x_Data = ['a部门', 'b部门', 'c部门', 'd部门', 'e部门', 'f部门', 'g部门', 'h部门']

         // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main'))
        var option = {
            title: [
                {
                    text: 'a公司一季度各部门销量(主标题）',
                    left: '30%',
                    textStyle: {
                        color: 'red',
                        fontSize: 20,
                        fontFamily: "serif"
                    }
                }, {
                    text: '我是副标题',
                    left: '80%',
                    top: '5%',
                    textStyle: {
                        color: 'green',
                        fontSize: 15
                    },
                }
            ],
            tooltip: {
                trigger: "axis",                //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                formatter: '{b}销量为：{c}件'
            },
            toolbox: {      // 工具栏组件
                feature: {      // 工具配置项
                    dataView: { show: true, readOnly: false },      // 数据视图工具
                    dataZoom: { show:true},             // 数据区域缩放
                    magicType: { show: true, type: ['line', 'bar'] },    //动态类型切换
                    restore: { show: true },        // 配置项还原
                    saveAsImage: { show: true }     // 保存为图片
                }
            },
            yAxis: {
                name: '部门',
                type: 'category',
                data: x_Data
            },
            xAxis: {
                name: '销量(件)',
                type: 'value',
                min: 0,
                max:10000,
                interval: 2000      // 刻度强制分割
            },
            legend:{
                show:true,
                data:['销量柱状图','总量柱状图'],
                left:'5%'
            },
            series: [
                {
                    name: '销量柱状图',
                    type: 'bar',
                    data: barData,
                    stack:'总量',
                    barWidth: 25,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' }
                        ],
                    },

                },
                {
                    name: '总量柱状图',
                    type: 'bar',
                    data: barData1,
                    label:{
                        show:true
                    },
                    barWidth: 25,
                    stack:'总量',
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' }
                        ],
                    },
                }
            ]
        };
        myChart1.setOption(option)
    </script>
</body>

</html>

寧三一

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Echarts笔记——柱状图（1）水平堆叠柱状图

Echarts笔记——水平堆叠柱状图1. 水平（x轴，y轴对调属性）2.堆叠（series里添加stack属性）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte.
复制链接

扫一扫