柱子样式变化pictorialBar图

1、示例

2、源码

var warningcolorValue=400;//根据预警值变化柱子的颜色，值设置
option = {
    tooltip: {
            trigger: 'axis',
            formatter: '{b}：{c}人',//悬停显示数据单位
            backgroundColor:'gray',
            borderWidth: 2,
            extraCssText: 'box-shadow: 0 0 13px yellow;',
            axisPointer: {
                type: 'line',
                lineStyle:{
                   type:'dotted',
                }
            }
    },
    grid: [{
        top: 50,
        width: '50%',
        bottom: '45%',
        left: 400,
        containLabel: false,
        // backgroundColor: 'red',
    },],
    xAxis: [{
        type: 'value',
        axisLine: {show: false},
        splitLine: {show: false},
        axisTick: {show: false},
        offset: 10,
        axisLabel: {
            margin:10,
            textStyle: {
            color: function (value) {//x轴颜色的设定
                 return value >= warningcolorValue ? 'red' : 'blue';//横坐标预警值
            },
        }
    }
    }],
    yAxis: [{
        type: 'category',
        data: ['巴西','印尼','美国','中国'],
        splitLine: {
            show: true,
            lineStyle:{
                width:1,
                type:'dotted',
            }
        },
        axisTick: {show: false},
        axisLine: {show: false},
        axisLabel: {
            formatter: function (value) {
                return '{value|' + value + '}';
            },
            margin: 10,
            rich: {
                value: {
                    height: 50,
                    align: 'center',
                    backgroundColor: '#dfeefd',
                    width:100,
                    color: '#000',
                    fontSize: 16,
                    borderWidth:1,
                    borderColor:'#bddaf7',
                },
            }
        },
        splitArea : {
					show : true,
					areaStyle : {
						color : [ '#dfeefd', '#fff', ]
					}
				},
    }],
    series: [{
        type: 'pictorialBar',//指定类型
        symbol: 'roundRect',//柱子显示的样式，'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
        symbolRepeat: true,//每个小symbol是否重复
        symbolSize: [10, 30],//图形的宽和高
        symbolMargin: 1,//图形之间的间距
        itemStyle : {  
                  color: function (params){
                        if(params.data>warningcolorValue){//系列预警值，根据预警值变化柱子的颜色
                            var warningColor= new echarts.graphic.LinearGradient( 0, 0, 1, 0,[{offset: 0, color: '#ff995b'},{offset: 1, color: '#eb3838'}]);
                            return warningColor;
                        }
                        else{
                            var normalColor= new echarts.graphic.LinearGradient( 0, 0, 1, 0,[{offset: 0, color: '#6fb7ff'},{offset: 1, color: '#1f81e2'}]);
                            return normalColor;
                        }
                    },
                    
        },
        emphasis: { 
            itemStyle : { 
                shadowColor: 'gray',
                shadowBlur: 10,
                shadowOffsetX:10,
                shadowOffsetY:-4,
            }
        },
        label: {
                position: 'right',//标签数据显示的位置
                show: true,
                formatter: '{c}人'//加单位
        },
        data: [103, 401, 234, 170],
    }]

}