先貼一張效果圖

1.導包

我沒有用什麼框架，直接引入echarts.min.js檔案,程式碼如下：

  <script src="./js/echarts.min.js"></script>

　　注意這樣引入不要放在header標籤裡，會阻塞html渲染，導致報錯。

2.給echarts一個盒子

   <div id="angular" class="everySkill"></div>

3.配置環形圖

我這裡寫成了一個函式，方便一個頁面複用。

function ecInit(dom, value1, value2, name) {
  var dom = dom; //就是你要放入的盒子元素
  var myChart = echarts.init(dom);
  option = {
    tooltip: {
      show: false,
      trigger: 'item',
      formatter: "{a} : {c} ({d}%)"
    },
    //  color: ['#546570', '#c4ccd3'],
    // color: ['rgb(255,159,127)', 'rgb(50,197,233)'],
    // legend: {
    //   orient: 'vertical',
    //   x: '35%',
    //   top: '27%',
    //   itemHeight: 10,//圖例的高度
    //   itemGap: 8,//圖例之間的間距
    //   data: ['通過率' + pass_rate + '%', '平均值' + average + '%']
    //   //圖例的名字需要和餅圖的name一致，才會顯示圖例
    // },
    title: {
      text: value1 + '%',  //圖形標題，配置在中間對應效果圖的80%
      left: "center",
      top: "50%",
      textStyle: {
        color: "rgb(50,197,233)",
        fontSize: 16,
        align: "center"
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['70%', '90%'],  //設定內外環半徑,兩者差值越大，環越粗
        hoverAnimation: false,　 //移入圖形是否放大
        label: {     //對應效果圖中的Angular顯示與否以及設定樣式
          // show: true,
          // position: 'center',
          normal: {
            show: true,
            position: 'center',
            padding: [0, 0, 20, 0],  //設定字angular的邊距
            fontSize: 16,
          }
        },
        labelLine: {
          normal: {  //label線不顯示
            show: false
          }
        },
        // emphasis: { //滑鼠移入時效果
        //   label: {
        //     show: false,
        //     fontSize: '20',
        //     fontWeight: 'bold'
        //   }
        // },
        data: [
          {                   
            name: name,   //資料，name對應Angular
            value: value1,  //對應顯示的部分資料即80%
            itemStyle: {
              normal: {
                color: 'rgb(50,197,233)',
              }
            }
          },
          {
            value: value2,
            itemStyle: {
              normal: {
                color: 'transparent'
              }
            }
          }
        ]
      }
    ]
  };
  myChart.setOption(option, true);
}