echars 環形圖百分比

 

 

 代碼如下：（角度需要自己計算，如果是百分百的圓就不需要averagenum,直接寫值就可以了）

function mychart3() {

　　var averagenum=50.22；

  myChart3=echarts.init(document.getElementById('profitIncome'));
  option = {
    var pass_rate = 70,average = averagenum*0.7,total = 100;  // 360*70%=252度數     252/360=0.7
        let option = {
            series: [
                {
                    name:'通過率'+pass_rate+'%',
                    type:'pie',
                    radius: ['52%', '54%'],
                    //禁止鼠標懸停放大
                    hoverAnimation: false,
                    silent: true,
                    //環的位置
                    label: {
                       show: false,
                       position: 'center',
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {
                          value:pass_rate, //需要顯示的數據
                        //   name: '通過率'+pass_rate+'%',
                          itemStyle: {
                            normal: {
                             color:'#008AD4',
                            }
                          }
                        },
                        {
                          value:total-pass_rate,
                          //不需要顯示的數據，顏色設置成和背景一樣
                          itemStyle: {
                            normal: {
                             color: 'transparent'
                            }
                          }
                       }
                    ]
                },
                {
                    name:'平均值'+average+'%',
                    type:'pie',
                    // roundCap: true,
                    radius: ['48%', '52%'],
                    hoverAnimation: false,
                    silent: true,
                    label: {
                       show: false,
                       position: 'center',
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {   
                            // name:'平均值'+average+'%',
                            value:average,
                            itemStyle: {
                                normal: {
                                    color: {
                                        // 完成的圓環的顏色
                                        colorStops: [
                                            {
                                            offset: 0,
                                            color: "#2449F3" // 0% 處的顏色
                                            },
                                            {
                                            offset: 1,
                                            color: "#7493F8" // 100% 處的顏色
                                            }  
                                        ]
                                    },
                                }
                            }
                        },
                       {
                            value:total-average,
                            itemStyle: {
                                normal: {
                                    color: 'transparent'
                                }
                             }
                       }
                    ],
                },
            ]
        };
  }
  myChart3.setOption(option);
}