关于 Vue + echarts 实现双层饼（环）状图

---

前言

这里 记录了一些本人在工作中用到的一些关于echarts的图表内容，话不多说，直接上代码

---

使用步骤

1.引入库

代码如下（示例）：

//加载组件依赖
npm install echarts
npm install echarts-liquidfill
//或者
yarn add echarts
yarn add echarts-liquidfill

//在页面里引入组件（为防止组件不能正常使用，需要在公用的页面main.js也引入一下）
import * as echarts from 'echarts';

2.读入数据

代码如下（示例）：

var trafficWay = [
  {
    name: '区域入侵告警',
    value: 20,
  },
  {
    name: '气体异常告警',
    value: 20,
  },
  {
    name: '作业超时告警',
    value: 20,
  },
  {
    name: '人员跌倒告警',
    value: 20,
  },
  { name: '开始作业/结束 作人脸打卡', value: 20 },
  { name: '离岗警告', value: 20 },
  { name: '人孔遮挡识别', value: 20 },
  { name: '安全着装识别', value: 20 },
  { name: '消防器材识别', value: 20 },
];
var dataArr = [];
for (var i = 0; i < 4; i++) {
  if (i % 2 === 0) {
    dataArr.push({
      name: (i + 1).toString(),
      value: 25,
      itemStyle: {
        normal: {
          color: "#F1B35E",
          borderWidth: 0,
          borderColor: "rgba(0,0,0,0)"
        }
      }
    }, {
      value: 4,
      name: '',
      itemStyle: {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0,
        },
      },
    })
  } else {
    dataArr.push({
      name: (i + 1).toString(),
      value: 20,
      itemStyle: {
        normal: {
          color: "#F1B35E",
          borderWidth: 0,
          borderColor: "rgba(0,0,0,0)"
        }
      }
    }, {
      value: 4,
      name: '',
      itemStyle: {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          // color: 'rgba(0, 0, 0, 0)',
          // borderColor: 'rgba(0, 0, 0, 0)',
          // borderWidth: 0,
        },
      },
    })
  }

}

var data = [];
var color = ['#00FFFF', '#00FF70', '#FFC600', '#98B3FF', '#9D8980', '#FF4600','#009CFF','#00FFE4','#FEFDFF'];
for (var i = 0; i < trafficWay.length; i++) {
  data.push(
    {
      value: trafficWay[i].value,
      name: trafficWay[i].name,
      itemStyle: {
        normal: {
          borderWidth: 4,
          shadowBlur: 2,
          borderColor: color[i],
          shadowColor: color[i],
        },
      },
    },
    {
      value: 2,
      name: '',
      itemStyle: {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0,
        },
      },
    }
  );
}
var seriesOption = [
//这里是外圈环的设置
  {
    name: '',
    type: 'pie',
    clockWise: false,
    // radius: [119, 124],
    radius: ['42%', '40%'], //大小
      center : ['50%','50%'], //位置
    hoverAnimation: false,
    labelLine: {
       normal: {
          length: 40, // 指示线长度
          length2:60, //指示线2长度
          lineStyle: {
            type: "dashed" //外引导线几种值solid/dotted/dashed
          }
        },
    },
    label: {
      show: true,
      position: 'outer',
      alignTo: 'labelLine',
      // ·圆点
      backgroundColor: 'auto',
      height: 0,
      width: 0,
      lineHeight: 0,
      distanceToLabelLine: 0,
      borderRadius: 2.5,
      padding: [2.5, -2.5, 2.5, -2.5],
      formatter: function (params) {
        if (params.name !== '') {
          return `{a|${params.name}}{b|}`;
        } else {
          return '';
        }
      },
      rich: {
        a: {
          padding: [0, 0, 0, 10],
          color: '#fff'
        },
        b: {
          padding: [0, 10, 0, 0],
          color: '#fff'
        },
      }
    },
    data: data,
  },
  //这里是内圈的设置
  {
     type: 'pie',
      radius: '35%',
      center: ['50%', '50%'],
      label: {
         show: false,
      },
      labelLine: {
         show: false
      },
      itemStyle: {
         color: 'rgba(0, 0, 0, 1)'
      },
      silent: true,
      data: [
         {
            value: 100,
            name: ''
         }
      ]
  },
];
let option = {
  backgroundColor: 'rgba(21, 26, 38, 1)',
  color: color,
  //中间文字和数字的设置
  title: [{
    // text: '开始作业/...',
    text: '6000',
    subtext: '统计数',
    left:"center",
    top:"44%",
    textStyle:{
        color:"#fff",
        fontSize:36,
        align:"center"
    },
    subtextStyle: {
        fontSize: 28,
        fontWeight: '700',
        align:"center",
        color:'#fff'
    },
    
  }],
  tooltip: {
    show: false,
  },

  toolbox: {
    show: false,
  },
  series: seriesOption,
};

---

展示效果如下图所示（中间的内圈是黑色的背景）

其他细节（html div 部分和js 事件部分 都差不多，唯一不同的就是数据的这一部分）可以参考 vue 水波纹 echarts-liquidfill组件

总结

以上就是关于部分不同的饼状图和环形图的介绍和使用，亲测有效，自己做个记录，也希望能够给您提供些许的帮助。