echart柱形图-一条柱子显示多个数据

最新推荐文章于 2025-06-21 15:04:44 发布

低_调_哥

最新推荐文章于 2025-06-21 15:04:44 发布

阅读量2.2w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端-echart

本文链接：https://blog.csdn.net/caiyongshengCSDN/article/details/79106368

前端-echart 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用ECharts进行人员计数数据可视化的配置方案，详细展示了如何设置图表样式、背景颜色、提示框内容及样式等，并提供了具体的数据系列配置样例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

personCountOption = {
    backgroundColor:'#fff',
    tooltip: {
        trigger: 'item',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        padding: 10,
        formatter: function(params) {
            return params.name + '</br>' + '总&emsp;数：' + params.value + '</br>' + '待处理：' + params.data.cost + '<br/>'  + '已授权：' + params.data.early + '<br/>' + '已拒绝：' + params.data.index + '<br/>' + '回收授权：' + params.data.cur
        }
    },
    xAxis   : [
        {
            type : 'category',
            axisLine:{
                show:false,
                lineStyle:{
                    color:'#DDDDDD',
                    width:0
                }
            },
            splitLine:{
                show:false
            },
            axisTick:{
                show:false
            },
            axisLabel:{
                show:false,
                textStyle:{
                    color:'#999'
                }
            },
            data: function () {
                var list = [];
                for(var i = 1;i<=12;i++){
                    list.push(i+'月份');
                }
                return list;
            }()
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLine:{
                show:false,
                lineStyle:{
                    color:'#DDDDDD',
                    width:1
                }
            },
            splitLine:{
                show:false
            },
            axisLabel:{
                show:false,
                textStyle:{
                    color:'#999'
                }
            }
        }
    ],
    grid: {
        x: 45,
        x2: 15,
        y: 25,
        y2: 15,
        backgroundColor:'#fff',
        borderWidth: 0
    },
    series: [{
        name: '指标',
        type: 'bar',
        // barWidth: 20,
        itemStyle:{
            normal:{
                barBorderRadius: 5,
                color: function(params) {
                    var colorList = [     //柱子颜色
                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                        '#D7504B','#C6E579','#F4E001'
                    ];
                    return colorList[params.dataIndex]
                }
            },
            emphasis:{
                barBorderRadius: 5
            }
        },
        data: [{
            value: 20,
            cost: 4,
            early: 6,
            index: 2,
            cur:1
        }, {
            value: 15,
            cost: 4,
            early: 6,
            index: 2,
            cur:1
        }, {
            value: 18,
            cost: 4,
            early: 6,
            index: 2,
            cur:1
        }, {
            value: 10,
            cost: 4,
            early: 6,
            index: 2,
            cur:1
        },{
            value: 13,
            cost: 4,
            early: 6,
            index: 2,
            cur:0
        },{
            value: 13,
            cost: 4,
            early: 6,
            index: 2,
            cur:0
        },{
            value: 14,
            cost: 4,
            early: 6,
            index: 2,
            cur:0
        },{
            value: 13,
            cost: 4,
            early: 6,
            index: 2,
            cur:0
        },{
            value: 16,
            cost: 4,
            early: 6,
            index: 2,
            cur:0
        },{
            value: 25,
            cost: 4,
            early: 6,
            index: 2,
            cur:0
        },{
            value: 21,
            cost: 4,
            early: 6,
            index: 2,
            cur:0
        },{
            value: 14,
            cost: 4,
            early: 6,
            index: 2,
            cur:0
        }
        ]
    }]
};

附图：