间隔色echarts 柱状配置项内容和展示

两种写间隔色的方法 第一种比较复杂 推荐使用这一种 不过另一种也是一种思路 希望能给你带来帮助。

      var data=[220, 182, 191, 234, 290, 330, 310];
// 求一个数组的最大值
function max(data){
    var max=data[0];
    for(var i=0;i<data.length;i++){
        if (max<data[i]) {
            max=data[i];
        }
    }
    return max;
}
// 背景xdata  渐变色柱状图   间隔色 两种  你可以设置多种
var bgData=[];
for(var i=0;i<data.length;i++){
    bgData.push(max(data));
}

option = {
    title: {
        text: '间隔色'
    },
    tooltip:{},
    xAxis: {
        data: ['优酷', '爱奇艺', '腾讯', '乐视', '暴风影音', '百度', '其他'],//x轴
        axisTick:{
            alignWithLabel:true
        },
        axisLabel:{
            rotate:50,
            margin:10
        }
    },
    yAxis: {},
    series: [{//如果不需要背景色  可以把此 bar删掉  上方求bgData的过程删掉
        type: 'bar',
        data:bgData,
        tooltip:{
            show:false
        },
        silent:true,
        itemStyle:{
            normal:{
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(137, 189, 27, 0.3)'//起始色  可以自己设置
                }, {
                    offset: 1,
                    color: 'rgba(137, 189, 27, 0)'//结束色
                }], false)
            }
        }
    },{
       type:"bar",
       data:data,
       barGap:'-100%',
       barCategoryGap:'50%' ,
       itemStyle:{
           normal:{
               color:function(d){//颜色判断  这里用到两种  你可以设置多种
                   if(d.dataIndex%2===0){
                       return 'blue';
                   }else{
                       return 'red';
                   }
               }
           }
       }
    }]
};