echarts 为柱状图添加数值线

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

如图echarts 为柱状图添加数值线_第1张图片

思路是给加上两条最大最小的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: '预警线'
                    }
                ]
            }
        }
    ]
};



你可能感兴趣的:(echars)