Vue3 ECharts 双间隔环形图的实现

话不多说咱们先看最终效果图

可以看到图中使用空白间隔把环形图表隔开，内部使用同样颜色不同透明度展示。

一、内环 & 外环

简单说就是在饼图外部实现一个圆环的扩展弧度

因为我们的图表可能存在多个series，即多个环形图，所以我们需要找到最外部的最大环半径，从它开始向外扩展(这个可以扩展到series上，无需再添加一个图表)

实现上和内环其实一样的，只要修改一个radius的显示位置即可，从最大环半径开始向外拓展。

series: [
    // 外环
    {
      padAngle: 5, // 间隔
      center: ["25%", "50%"],
      type: "pie",
      radius: ["65%", "70%"], //修改圆圈大小
      avoidLabelOverlap: false,
      label: {
        show: false //开启提示线文字
      },
      emphasis: {
        scale: false, //鼠标划上不展示高亮放大效果
        label: {
          show: false
        }
      },
      labelLine: {
        show: false
      },
      data: [] // 数据接口获取
    },
    // 内环
    {
      padAngle: 5, // 间隔
      type: "pie",
      center: ["25%", "50%"],
      radius: ["55%", "70%"], //修改圆圈大小
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center"
      },
      emphasis: {
        scale: false, //鼠标划上不展示高亮放大效果
        label: {
          show: false
        }
      },
      labelLine: {
        show: false
      },
      data: [] // 数据接口获取
    }
  ]
});

饼图颜色可提前配置好

const colorList = [
    { color: "#FEE186", opacity: 0.2 },
    { color: "#89F3F7", opacity: 0.2 },
    { color: "#FFFFFF", opacity: 0.2 },
    { color: "#628EF6", opacity: 0.2 },
    { color: "#72508D", opacity: 0.2 }
    ....  // 按照需求增加颜色
]

通过接口返回数据

const getPlantAreaInfo = async () => {
  agricProportionValue.series[0].data = [];
  agricProportionValue.series[1].data = [];
  const res = await getPlantArea(); // 模拟接口
  // 拿到数据进行赋值
  res.result.forEach((item: any, index: any) => {
    agricProportionValue.series[0].data.push({
      value: item.area,
      name: item.name,
      itemStyle: { color: colorList[index].color }  // 外环只取颜色即可
    });
    agricProportionValue.series[1].data.push({
      value: item.area,
      name: item.name,
      itemStyle: colorList[index]  // 内环颜色取所有
    });
  });
};

二、圆环内部标题

title: [
    {
      // 第一个圆环标题
      text: "种植面积", // 主标题
      textStyle: {
        // 主标题样式
        color: "#FFFFFF",
        fontWeight: 400,
        fontSize: "18px"
      },
      left: "24%", // 定位到适合的位置
      top: "40%", // 定位到适合的位置
      subtext: "占比", // 副标题
      subtextStyle: {
        // 副标题样式
        color: "#FFFFFF",
        fontSize: "18px",
        fontWeight: 400
      },
      textAlign: "center" // 主、副标题水平居中显示
    }
  ],

三、右侧自定内容

legend: {
    orient: "vertical", // 显示方式 纵向
    right: "0%",
    top: 50,
    itemGap: 15,
    textStyle: {
      color: "#fff",
      fontSize: 15
    }
 },

拿到接口返回数据之后拼接

const res = await getPlantArea(); // 模拟接口
agricProportionValue.legend.formatter = (params: any) => {
    let name = "";
    let area = "";
    let percent = "";
    res.result.forEach((item: any, index: any) => {
      if (params == item.name) {
        name = `${item.name}`;
        area = `${item.area}`;
        percent = `${item.percent}`;
      }
    });

    return `{name|${name}} {area|${area}亩} {percent|${percent}%}`;
  };

四、鼠标悬停显示内容

 tooltip: {
    trigger: "item",
    color: "#fff",
    backgroundColor: "rgba(0,0,0,.5)", // 自定义背景颜色
    fontSize: 14,
    borderColor: "rgba(255, 255, 255, .16)", // 自定义边框颜色
    textStyle: {
      color: "#fff", // 自定义文字颜色
      fontSize: 14 // 自定义文字大小
    },
    // 自定义内容
    formatter: (params: any) => {
      return `
      <div>${params.name}</div>
      <div>${params.data.value}亩：<span style="color: #09ffd2;font-weight: bold;">${params.percent}</span> %</div>
      `;
    }
  },