1. 程式人生 > 實用技巧 >echarts 自定義進度條圖示

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] } ] };