echart - 餅圖（環形）

安裝echarts依賴

npm install echarts -S

首先需要全局引入

在main.js中

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

 

實現效果：

<template>
  <div id="myChartByQuality" :style="{width: '320px', height: '300px'}"></div>
</template>

<script>

  import api from '@/server/userConfig';
  import { Empty } from 'vant';
  import Vue from 'vue';
  Vue.use(Empty);
  export default {
    name: 'qualifiedRateRingEchart',
    data () {
      return {

        legendDataByQuality:[],
        seriesDataByQuality:[],

      }
    },

    methods: {

      drawLine(){

        // 基於准備好的dom，初始化echarts實例
        let chartByQuality = this.$echarts.init(document.getElementById('myChartByQuality'))
        // 繪制圖表
        chartByQuality.setOption({

          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: ({d}%)'
          },

          itemStyle : {
              label : {
                show : false      /*標注不顯示*/
              },
              labelLine : {
                show : false     /*標注的指向線不顯示*/
              }
            },


            legend: {
              orient: 'vertical',
              right: 28,
              top: 90,
              "itemGap": 50,    /*legend 之間的間距 ：經過測試如果代碼位置網上挪則 文字部分不會在右邊而是在上面*/
              'itemWidth':18,
              selectedMode:false,//取消圖例上的點擊事件
              data: this.legendDataByQuality  /*["通過  17 次", "未通過 2 次"]*/

          },


          series: [
            {
              name: '合格率',
              type: 'pie',
              radius: [60, 45],  /*第一個數值,值越小，環形越粗*/
              center: ['35%', '45%'], //圖的位置，距離左跟上的位置 :  第一個值：距離左邊距離 ；第二個值距離上面的距離
              avoidLabelOverlap: false,
              hoverAnimation: false, /*是否開啟 hover 在扇區上的放大動畫效果 ：即點擊環圖不會放大*/
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '14',  /*環形里面的lable的大小*/
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false      /*環圖指向的線不顯示*/
              },
              data: this.seriesDataByQuality  /*[{value: 3, name: '通過'，itemStyle：{color:#24C768}}]*/

            }
          ]


        });

            window.onresize = chartByQuality.resize;   //根據屏幕進行適配
      },

      getEquipmentStatistics(){

        api
          .getEquipmentStatistics({

            companyId:this.$store.state.companyId,

          })
          .then((res) => {

            if (res.code == 200) {

     /*  legendDataByQuality：["通過  17 次", "未通過 2 次"]
     seriesDataByQuality [{value: 3, name: '通過'，itemStyle：{color:#24C768}}] */

              /*1.合格率通過和不通過的計算*/

              let objPass = {};
              let objNoPass = {};
              objPass.name = "通過  "+res.data.pass+" 次";
              objPass.value = res.data.pass;
              objPass.itemStyle = {color:"#24C768"};  /*改變默認顏色*/

              objNoPass.name = "未通過 "+res.data.nopass+" 次";
              objNoPass.value = res.data.nopass;
              objNoPass.itemStyle = {color:"#FF5640"};  /*改變默認顏色*/



              this.seriesDataByQuality.push(objPass);
              this.seriesDataByQuality.push(objNoPass);

              this.legendDataByQuality.push(objPass.name)
              this.legendDataByQuality.push(objNoPass.name)


              this.drawLine();  /*數據准備好了*/

            } else {

              this.$message({
                message: res.message,
                icon: 'error',
                timeout: 1500,
              });
            }


          });

      },
    },


    mounted () {
      this.getEquipmentStatistics();
    }

  }



</script>


<style scoped>

</style>