百度echarts实现横向渐变效果

一、样例一：

效果图：

代码

option = {
    title: {
      text: 'aaa',
      x: "left"
    },
    tooltip: {
        trigger: 'item',
        position:'right',
        /*
        formatter:function(data){
          //console.info('data',data);
          return data.data.value;
        },*/
        formatter:'{c}',
    },
    grid: {
      x: 0,  //左留白
      bottom: '20px',
      containLabel: true
    },
    xAxis: {
        show:false,
        type: 'value',
        splitLine: {
            show: false
        },
    },
    yAxis: {
        type: 'category',
        axisLine: {
            show:false,
            onZero: false,
        },
        axisTick:{//刻度线
          show:false
        },
        axisLabel: {
            formatter: '{value}'
        },
        boundaryGap: true,
        data: ['广州食药监','广州社保局','广州人民政府','广州气象局'],
        
    },
    series: [
      {
        type: 'bar',
        smooth: true,
        barWidth : 6,//柱图宽度
        barCategoryGap: 10,
        data: [
            {name:'广州食药监',value:222},
            {name:'广州社保局',value:222},
            {name:'广州气象局',value:222},
            {name:'广州人民政府',value:222}
        ],
        itemStyle: {
            emphasis: {
                //barBorderRadius: 7
            },
            normal: {
                //barBorderRadius: 7,
                color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                        {offset: 0, color: '#CCEEFF'},
                        {offset: 1, color: '#5599FF'}
                    ]
                )
            }
        }
      }
    ]
};

样例二：

效果图：

代码：

option = {
    title: {
      text: 'aaa',
      x: "left"
    },
    tooltip: {
        trigger: 'item',
        position:'right',
        /*
        formatter:function(data){
          //console.info('data',data);
          return data.data.value;
        },*/
        formatter:'{c}',
    },
    grid:{   //绘图区调整
      x:25,  //左留白
      y:30,   //上留白
      x2:25,  //右留白
      y2:0,   //下留白
      containLabel: false
    },
    xAxis: {
        show:false,
        type: 'value',
        splitLine: {
            show: false
        },
    },
    yAxis: {
      show:false,
      type: 'category',
      axisLine: {
        onZero: false,
      },
      boundaryGap: true,
    },
    series: [
      {
        type: 'bar',
        smooth: true,
        barWidth : 6,//柱图宽度
        barCategoryGap: 10,
        data: [
            {name:'广州食药监',value:222},
            {name:'广州社保局',value:222},
            {name:'广州气象局',value:222},
            {name:'广州人民政府',value:222}
        ],
        label: {
          normal: {
            show: true,
            position: [0,-16],//'insideLeft',
            formatter:'{b}',
            textStyle: {
              fontSize: '13',
              //fontWeight: 'bold',
              color:'#727475'
            }
          }
        },
        itemStyle: {
            emphasis: {
                //barBorderRadius: 7
            },
            normal: {
                //barBorderRadius: 7,
                color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                        {offset: 0, color: '#CCEEFF'},
                        {offset: 1, color: '#5599FF'}
                    ]
                )
            }
        }
      }
    ]
};