echarts 漸變色進度條

 

 

option = {
    backgroundColor:"#17326b",
    grid:{
        left:"10",
        top:"10",
        right:"0",
        bottom:"10",
        containLabel:true
    },
    xAxis: {
        type: 'value',
        splitLine:{show:false},
        axisLabel:{show:false},
        axisTick:{show:false},
        axisLine:{show:false}
    },
    yAxis:[
       {
            type: 'category',
            axisTick:{show:false},
            axisLine:{show:false},
            axisLabel:{
                color:"black",
                fontSize:14,
                textStyle: {
                      color: '#fff'
                }
            },
            data:["蘋果","香蕉","橘子","梨子","葡萄","柿子","草莓","藍莓","柚子","橙子"],
            max:10, // 關鍵：設置y刻度最大值，相當於設置總體行高
             inverse:true
        },
         {
            type: 'category',
            axisTick:{show:false},
            axisLine:{show:false},
            axisLabel:{
                color:"black",
                fontSize:14,
                textStyle: {
                      color: '#fff'
                }
            },
            data:[702,350,800,600,550,700,600,800,900,600],
            max:10, // 關鍵：設置y刻度最大值，相當於設置總體行高
            inverse:true
        }
    ],
    series: [
      {
        name:"條",
        type:"bar",
        barWidth:19,
        data:[80,40,60,10,80,50,70,80,90,60],
        barCategoryGap:20,
        itemStyle:{
            normal:{
                barBorderRadius:10,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: '#22b6ed'
                }, {
                  offset: 1,
                  color: '#3fE279'
                }]),
            }
        },
        zlevel:1
        
      },{
          name:"進度條背景",
          type:"bar",
          barGap:"-100%",
          barWidth:19,
          data:[100,100,100,100,100,100,100,100,100,100],
          color:"#2e5384",
          itemStyle:{
              normal:{
                  barBorderRadius:10
              }
          },
      }
    ]
};