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>