目录

实现效果

实现原理：

代码

---

实现效果

 项目中需要实现上图效果，看了一下echarts，应该有两种方式实现环形图，下面是通过饼图实现的，看了网上的其他案例，还可以通过柱状图设为极坐标的方式实现。

实现原理：

圆环效果：修改饼图直径radius变为数组: [X, Y],即可形成圆环。

多个圆环：通过遍历出多个option.series

圆环位置：改变每个圆环的中心点位置

中心点文字：显示的是serise中data.name，所以动态设置name

label: {
            show: true, // 显示饼图每块区域的名称
            position: "center", // 标签文字显示在圆环中间
            color: "#000", // 每个饼图的标签文字颜色
          },

name: item.value + "%" + "\n\n" + item.name, //lable显示的文字内容，\n表示换行

代码

html

 <!-- 环形图 -->
            <div style="width: 100%;height: 90%;position: relative;">
              <div class="c1" ref="contract_chart" style="width: 100%;height:100%;"></div>
            </div>    

js

//灰色部分统一设置颜色
var placeHolderStyle = {
  normal: {
    color: '#e9eef4'
  },
  emphasis: {
    color: '#e9eef4'
  }
}
export default {
  data() {
    return {
      //圆环数据
      looppieData: [
        {
          name: "一号楼",
          space: 40,
          value: 60,
        },
        {
          name: "二号楼",
          space: 50,
          value: 50,
        },
        {
          name: "三号楼",
          space: 20,
          value: 80,
        },
        {
          name: "四号楼",
          space: 60,
          value: 40,
        },
        {
          name: "五号楼",
          space: 20,
          value: 80,
        },
        {
          name: "六号楼",
          space: 75,
          value: 25,
        },
        {
          name: "七号楼",
          space: 50,
          value: 50,
        },
        {
          name: "八号楼",
          space: 20,
          value: 80,
        },
        {
          name: "九号楼",
          space: 50,
          value: 50,
        },
        {
          name: "十号楼",
          space: 20,
          value: 80,
        },
      ],
      //圆环中心位置
      positionArr: [
        ["18%", "25%"],
        ["34%", "25%"],
        ["50%", "25%"],
        ["66%", "25%"],
        ["82%", "25%"],
        ["18%", "75%"],
        ["34%", "75%"],
        ["50%", "75%"],
        ["66%", "75%"],
        ["82%", "75%"],
      ],
      // 圆环颜色
      colorArr: [
        "#e86452", "#5ad8a6", "#5b8ff9", "#5ad8a6", "#5b8ff9",
        "#e86452", "#5ad8a6", "#5b8ff9", "#5ad8a6", "#5b8ff9"
      ],
      // 环状图
      option: {
      },
    };
  },
  mounted() {
    this.getEchartData();
  },
  methods: {
    //环形图
    getEchartData() {
      let seriesArr = this.looppieData.map((item, index) => {
        return {
          name: item.name,
          type: "pie",
          radius: [50, 40], // 圆环饼图内外直径的大小
          center: this.positionArr[index], // 饼图的位置——正中心
          label: {
            show: true, // 显示饼图每块区域的名称
            position: "center", // 标签文字显示在圆环中间
            color: "#000", // 每个饼图的标签文字颜色
          },
          labelLine: {
            show: false, // 隐藏名字和图之间默认的一条线
          },
          data: [
            {
              value: item.value,
              name: item.value + "%" + "\n\n" + item.name, //lable显示的文字内容
              itemStyle: {
                color: this.colorArr[index],//该区域对应渐变色
              }
            },
            {
              // name: "空白",
              name: item.value + "%" + "\n\n" + item.name, //lable显示的文字内容
              value: item.space,
              itemStyle: placeHolderStyle,
            },
          ],
        };
      })
      this.option.series = seriesArr
      const myChart = this.$echarts.init(this.$refs.contract_chart)
      myChart.setOption(this.option);
    },
  }
};

坑：

彩色部分小于灰色时不显示彩色的文字，所以需要在灰色部分也添加文字

// name: "空白",
              name: item.value + "%" + "\n\n" + item.name, //lable显示的文字内容