echarts 多重环形图

 

 

 

 

<template>
  <div ref="chart" style="width: 100%;height: 100%;"></div>
</template>

<script>
  import * as echarts from "echarts";

  export default {
    name: "huanEcharts",
    data() {
      return {}
    },
    methods: {
      initEcharts() {
        const BorderWidth = '5';
        //反方向剩下部分的样式
        const placeHolderStyle = {
          normal: {
            label: {
              show: false,
              position: "center"
            },
            labelLine: {
              show: false
            },
            color: "rgba(0,0,0,0)",
            borderColor: "rgba(0,0,0,0)",
            borderWidth: 0
          },
          emphasis: {
            color: "#dedede",
            borderColor: "#dedede",
            borderWidth: 0
          }
        };
        const option = {
          backgroundColor: 'transparent',
          color: ['#FF6271', '#4ebefd', '#30ed9d', '#faa234', "#FF6271"],
          legend: {
            show: false,
            orient: 'vertical',
            left: 'left',
            top: 'middle',
            data: ['正常', '次要', '警告', '重要', '严重'],
            textStyle: {
              color: '#fff',
              fontSize: 16
            }
          },
          series: [{
            name: '正常',
            type: 'pie',
            clockWise: true, //顺时加载
            startAngle:120,//起始角度
            hoverAnimation: false, //鼠标移入变大
            radius: [70, 73],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: 'outside'
                },
                labelLine: {
                  show: false,
                  length: 100,
                  smooth: 0.5
                },
                borderWidth: BorderWidth,
                shadowBlur: 40,
                borderColor: "#263A5C",
                shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
              }
            },
            data: [{
              value: 10,
              name: '100%'
            },
              {
                value: 0,
                name: '',
                itemStyle: placeHolderStyle
              }
            ]
          }, {
            name: '完成总数',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            startAngle:120,
            radius: [59, 60],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false,
                  length: 100,
                  smooth: 0.5
                },
                borderWidth: BorderWidth,
                shadowBlur: 40,
                borderColor: "#28B3F9",
                shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
              }
            },
            data: [{
              value: 6,
              name: '60%'
            },
              {
                value: 4,
                name: '',
                itemStyle: placeHolderStyle
              }
            ]
          }, {
            name: '正常完成',
            type: 'pie',
            clockWise: true,
            startAngle:120,
            hoverAnimation: false,
            radius: [49, 50],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false,
                  length: 100,
                  smooth: 0.5
                },
                borderWidth: BorderWidth,
                shadowBlur: 40,
                borderColor: "#00D586",
                shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
              }
            },
            data: [{
              value: 5,
              name: '40%'
            },
              {
                value: 5,
                name: '',
                itemStyle: placeHolderStyle
              }
            ]
          }, {
            name: '提前完成',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            startAngle:120,
            radius: [39, 40],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false,
                  length: 100,
                  smooth: 0.5
                },
                borderWidth: BorderWidth,
                shadowBlur: 40,
                borderColor: "#FFC642",
                shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
              }
            },
            data: [{
              value: 5,
              name: '30%'
            },
              {
                value: 5,
                name: '',
                itemStyle: placeHolderStyle
              }
            ]
          }, {
            name: '逾期完成',
            type: 'pie',
            clockWise: true,
            startAngle:120,//起始角度
            hoverAnimation: false,
            radius: [29, 30],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false,
                  length: 100,
                  smooth: 0.5
                },
                borderWidth: BorderWidth,
                shadowBlur: 40,
                borderColor: "#FF6271",
                shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
              }
            },
            data: [{
              value: 4,
              name: '30%'
            },
              {
                value: 6,
                name: '',
                itemStyle: placeHolderStyle
              }
            ]
          }],
          title: {
            text: "100%",
            subtext: '完成率',
            textAlign:"center",
            left:75,
            top:55,
            textStyle: {
              fontSize: 16,
              fontFamily: 'Impact',
              color: '#FFFFFF',
              lineHeight: 16
            },
            subtextStyle: {
              fontSize: 12,
              fontFamily: 'PingFangSC-Regular, PingFang SC',
              color: '#FFFFFF',
              lineHeight: 12,
              fontWeight:400
            }
          },
        };
        const myChart = echarts.init(this.$refs.chart);
        myChart.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });

        // myChart.getZr().on("click", (params) => {
        //   let that = this;
        //   let pointInPixel = [params.offsetX, params.offsetY];
        //   if (myChart.containPixel("grid", pointInPixel)) {
        //     //点击第几个柱子
        //     let pointInGrid = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
        //     // console.log(pointInGrid)
        //     // 也可以通过params.offsetY 来判断鼠标点击的位置是否是图表展示区里面的位置
        //     // 也可以通过name[xIndex] != undefined，name是x轴的坐标名称来判断是否还是点击的图表里面的内容
        //     // x轴数据的索引
        //     let xIndex = pointInGrid[0];
        //     // y轴数据的索引
        //     let yIndex = pointInGrid[1];
        //     // console.log(xIndex)
        //     // console.log(yIndex)
        //     let time = this.xAxisData[xIndex];
        //     // console.log(time)
        //     // console.log(this.data)
        //     /*
        //       this.$store.commit("secondZhuMethod", {time:time});
        //       this.openSecond();*/
        //     this.$store.state.popWindow = true;
        //     this.$store.state.toggleCtp = "zhu-second";
        //     localStorage.setItem("firstName", "zhu-echarts");
        //     localStorage.setItem("getMonitoring", time);
        //   }
        // });
      }
    },
    mounted() {
      this.initEcharts();
    }
  }
</script>

<style scoped>

</style>

 

参考网址：用echarts来实现多重环形图_echarts实现圆环重叠_浩星的博客-CSDN博客