echarts 为柱状图添加数值线

最新推荐文章于 2025-05-30 08:59:48 发布

我是一个诗人

最新推荐文章于 2025-05-30 08:59:48 发布

阅读量1.7w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： echars

本文链接：https://blog.youkuaiyun.com/sinat_28761919/article/details/48441925

echars 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Echarts柱状图中添加数值线，以增强数据对比效果。通过设置markline，添加最大值和最小值线，并依据数值动态调整线的颜色，以实现视觉上的强烈对比。

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

情景：需要给柱状图的数据加个比较强烈的对比

如图

思路是给加上两条最大最小的markline，并根据具体数值大小来改变线的颜色

js控制方法

var colorList = [];
if(_seriesData[0]>_seriesData[1]){
	colorList = ['#00D8CD','#FA8565'];
}else{
	colorList = ['#FA8565','#00D8CD'];
}
_curOption.series[0].markLine.itemStyle.normal.color = function(params) {
	return colorList[params.dataIndex]
 };//为markline设置颜色

bar.js

option = {
   

    tooltip : {
                 formatter: "{c}"     // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
            },
    xAxis : [
        {
            type : 'category'
        }
    ],
    yAxis : [
        {
           
            type : 'value'
        }
    ],
    series : [
        {  
            name:'',
            type:'bar',
           
            itemStyle: {
                normal: {
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = [
                          '#FA8565','#00D8CD'
                        ];
                        return colorList[params.dataIndex]
                    },
                    label: {
                        show: true,
                        position: 'inside',
                        formatter: '{b}\n{c}'
                    }
                }
            }, 
            barCategoryGap : '60%',
            barMinHeight: 20,
            barMaxWidth: 60,
           
            markLine : {
                itemStyle: {
                normal: {
                    color:'#FA8565',
                    label: {
                      
                        formatter: '{c}'
                    }
                }
                 }, 
                data : [
                    {type : 'min',
                         name: '预警线'
                    },
                    {type : 'max',
                         name: '预警线'
                    }
                ]
            }
        }
    ]
};