echarts正负坐标轴柱子渐变

echarts正负坐标轴柱子渐变

关键代码：

//负轴样式
var  itemStyle1  =  {
                                                normal:{
                                                        color:  new  echarts.graphic.LinearGradient(1,  0,  0,  0,  [{
                                                                offset:  0,
                                                                color:  "#266E6F"  //  0%  处的颜色
                                                        },  
                                                          {
                                                                offset:  1,
                                                                color:  "#51E2D5"  //  100%  处的颜色
                                                        }],  false),
                                                label:  {
                        show:  true,  //开启显示
                        position:  'top',  //在上方显示
                        textStyle:  {  //数值样式
                color:  '#687284',
                fontSize:  9,
                }
                }
                                        }
                                };
//正轴样式
var  itemStyle2  =  {
                                normal:{
                                        color:  new  echarts.graphic.LinearGradient(1,  0,  0,  0,  [{
                                                offset:  0,
                                                color:  "#642925"  //  0%  处的颜色
                                        },  
                                          {
                                                offset:  1,
                                                color:  "#EA4824"  //  100%  处的颜色
                                        }],  false),
                                label:  {
                show:  true,  //开启显示
                position:  'top',  //在上方显示
                textStyle:  {  //数值样式
        color:  '#687284',
        fontSize:  9,
        }
        }
                                }
                                }

在option中的位置

series  :  [
                {
                        name:'生活费',
                        type:'bar',
                        stack:  '总量',
                        label:  {
                                normal:  {
                                        show:  true,
                                        formatter:  '{b}'
                                }
                        },
                        data:[
                                {      value:  -0.07,  
                                        label:  labelleft,
                                        itemStyle:itemStyle1
                                },
                                {
                                     value: -0.09, 
          label: labelleft,
          itemStyle:itemStyle1
        },
        {   
         value: 0.2,
         label: labelRight,
         itemStyle:itemStyle2
         
        }
       ]
    }
   ]

完整代码示例（将代码放在echarts官网示例上可直接看效果）：

var  labelleft  =  {
        normal:  {
                position:  'left'
        }
};
var  labelRight  =  {
        normal:  {
                position:  'right'
        }
};
//负轴样式
var  itemStyle1  =  {
                                                normal:{
                                                        color:  new  echarts.graphic.LinearGradient(1,  0,  0,  0,  [{
                                                                offset:  0,
                                                                color:  "#266E6F"  //  0%  处的颜色
                                                        },  
                                                          {
                                                                offset:  1,
                                                                color:  "#51E2D5"  //  100%  处的颜色
                                                        }],  false),
                                                label:  {
                        show:  true,  //开启显示
                        position:  'top',  //在上方显示
                        textStyle:  {  //数值样式
                color:  '#687284',
                fontSize:  9,
                }
                }
                                        }
                                };
//正轴样式
var  itemStyle2  =  {
                                normal:{
                                        color:  new  echarts.graphic.LinearGradient(1,  0,  0,  0,  [{
                                                offset:  0,
                                                color:  "#642925"  //  0%  处的颜色
                                        },  
                                          {
                                                offset:  1,
                                                color:  "#EA4824"  //  100%  处的颜色
                                        }],  false),
                                label:  {
                show:  true,  //开启显示
                position:  'top',  //在上方显示
                textStyle:  {  //数值样式
        color:  '#687284',
        fontSize:  9,
        }
        }
                                }
                                }
option  =  {
        title:  {
                text:  '交错正负轴标签',
                subtext:  'From  ExcelHome',
              //  sublink:  'http://e.weibo.com/1341556070/AjwF2AgQm'
        },
        tooltip  :  {
                trigger:  'axis',
                axisPointer  :  {                        //  坐标轴指示器，坐标轴触发有效
                        show:false,
                        type  :  'shadow'              //  默认为直线，可选为：'line'  |  'shadow'
                }
        },
        grid:  {
                top:  80,
                bottom:  30
        },
        xAxis:  {
                type  :  'value',
                axisLine:  {show:  false},
                axisLabel:  {show:  false},
                axisTick:  {show:  false},
                splitLine:  {show:  false},
                position:  'left',
          //      splitLine:  {lineStyle:{type:'dashed'}},
        },
        yAxis:  {
                type  :  'category',
                show:true,
                position:  'left',
                axisLine:  {show:  true},
                axisLabel:  {show:  true},
                axisTick:  {show:  false},
                splitLine:  {show:  false},
                data  :  ['ten',  'nine',  'eight',  'seven',  'six',  'five',  'four',  'three',  'two',  'one']
        },
        series  :  [
                {
                        name:'生活费',
                        type:'bar',
                        stack:  '总量',
                        label:  {
                                normal:  {
                                        show:  true,
                                        formatter:  '{b}'
                                }
                        },
                        data:[
                                {      value:  -0.07,  
                                        label:  labelleft,
                                        itemStyle:itemStyle1
                                },
                                {
                                     value: -0.09, 
                    label: labelleft,
                    itemStyle:itemStyle1
            },
            {   
                value: 0.2,
                label: labelRight,
                itemStyle:itemStyle2
                
            },{
                    value: 0.44,
                    label: labelRight,
                     itemStyle:itemStyle2
                
            } ,{
                    value: -0.23, 
                    label: labelleft,
                    itemStyle:itemStyle1
            },{
                    value: 0.08,
                    label: labelRight,
                     itemStyle:itemStyle2
            },{
                    value: -0.17, 
                    label: labelleft,
                    itemStyle:itemStyle1
            },{
                    value: 0.47,
                    label: labelRight,
                     itemStyle:itemStyle2
            },{ 
                
                    value: -0.36, 
                    label: labelleft,
                    itemStyle:itemStyle1
           },{
                    value: 0.18,
                    label: labelRight,
                     itemStyle:itemStyle2
           }
            ]
        }
    ]
};