echarts 自定義進度條圖標

 

 

option = {
    backgroundColor:"#e4eef9",
    grid:{
      top:"3%",
      right:"6%",
      left:"18%",
      bottom:"20%",
    },
    xAxis: {
        show:false,
    },
    yAxis: {
        type: 'category',
        axisLine:{show:false},  //去除y軸線
        axisTick:{show:false},  // 去除刻度
        axisLabel:{   //坐標軸文字設置
            color:"#333",
            fontSize:14,
            margin:4,
            width:180,
            formatter:function(val){
                return val.length >5? "{b|"+val.substr(0,5)+"..."+"}" : "{a|"+val+"}";
            },
            rich:{
                a:{
                    color:"#333",
                    fontSize:16,
                    width:180,
                    align:"center",
                    padding:[0,0,0,40]
                },
                b:{
                    color:"#666",
                    fontSize:16,
                    width:160,
                    align:"right",
                    padding:[0,0,0,12]
                },
            }
        },
        data:["零售業務和批發","計算機、電信行業","傳統文化、教育","手機通訊和電子設備","金屬冶煉行業"],
        inverse:true
    },
    series: [
        {
            type: 'bar',
            barWidth:"5", //柱狀圖寬度
            showBackground: true, //顯示背景顏色
            backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.5)',
                barBorderRadius:[10,10,10,10],
            },
            data: [60, 40,26, 16, 12],
            label:{ //顯示在文本上的字
                show:true,
                position:"insideRight",
                distance:10,
                align:"left",
                formatter:function(params){
                    return "{img|}"
                },
                rich:{
                    img:{
                        backgroundColor:{
                            // image:"圖片鏈接/路徑"
                            image:"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3762380421,1758877886&fm=26&gp=0.jpg"
                        },
                        width:20,
                        height:20,
                        padding:[0,0,0,0]
                    }
                }
            },
            itemStyle:{
                normal:{
                    // 每個數據的顏色
                    color:function(params){
                        if(params.dataIndex <=2){
                            return new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [
                                    {offset: 0, color: '#2572fe'},
                                    {offset: 1, color: '#09bbdf'}
                                ]
                            )
                        }else{
                             return new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [
                                    {offset: 0, color: '#f7d23b'},
                                    {offset: 1, color: '#09bbdf'}
                                ]
                            )
                            
                        }
                    },
                    barBorderRadius:[30,30,30,30], //圓角大小
                    shadowBlur:10, //模糊程度
                    shadowColor:"rgba(0,103,255,0.3)", //顏色
                    shadowOffsetX:-5,
                    shadowOffsetY:5,
                },
            },
            z:2,
            animation:true,
            animationEasing:"cubicOut",
            animationDuration:function(){
                return 3000;
            }
        },
        {
            name:"",
            type:"bar",
            barWidth:"5",
            barCategoryGap:"30%",
            slient:true,
            barGap:"-100%",
            itemStyle:{
                normal:{
                    barBorderRadius:7,
                    color:"#1b2046"
                }
            },
            label:{
                show:true,
                position:["100%,0%"],
                offset:[10,0],
                fontSize:22,
                formatter:function(params){
                    return params.data+"%"
                },
                rich:{
                    a:{
                        fontSize:30,
                        color:"#20c5b1",
                        fontWeight:"bold",
                    },
                    b:{
                        fontSize:30,
                        color:"#9497a0"
                        
                    },
                }
            },
            z:1,
            data: [100, 100,100, 100, 100]
        }
    ]
};