echarts配置一個中間顯示文字的環形圖

先貼一張效果圖

 

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

　　

4.調用

ecInit(angular,80,20,'Angular');  //如效果圖