关于echarts:Echarts实现34环形图

3/ 4 环形图实现

1. 通过循环数据，把每一条数据放入一个环形图内，每一个环形图分为 3 块空间：

   • 理论数据占据的空间

   这里占据的空间须要转换成 3 / 4 比例：value * 0.75

   • 虚构的 3 / 4 环形图剩下的数据

   这里是占据 3 / 4 空间内除了理论数据之后残余空间：(总数据 -value) * 0.75

   • 1/ 4 须要做成通明的数据

   始终占据 1 / 4 空间：总数 * 0.25, 色彩设置为 transparent 通明色

2. 利用 y 轴上浮现旁边的正文。留神 x 轴也必须写!

   xAxis: [{show: false}],
   yAxis: [
     {
    type: "category",
    inverse: true,
    axisLine: {show: false,},
    axisTick: {show: false,},
    axisLabel: { },
    data: lineYAxis,
     },
   ],

   效果图

长处：

通过这一系列计算保障了环形图数据量过大时不会溢出

毛病：

• 环形图数据项不能过多，因为内圈最小就是 0%。
• 在缩放的时候放大根本没问题，放大的时候会呈现数据正文对应不上的问题。
  因为这里是 grid 定位，y 轴 label 来显示数据，思考给 grid 设置一个高度，然而这个高度应该随着环形图的半径来变动，而环形缩放的时候 resize 办法是依照盒子给定的最小宽或高来设置大小，用来放弃为一个圆。所以不晓得怎么取这个高度能力为最小 …
  心愿读者能解决这个问题，并评论补充！

js 实现代码：

export default {data() {
    return {ectOpts: {},
      error: "",
      loading: false,
      latest: true,
      data: [],};
  },
  computed: {total() {let total = this.data.reduce((item1, item2) => {return (typeof item1 === "number" ? item1 : item1.num) + item2.num;
      });
      return total;
    },
  },
  created() {this.getData();
  },
  mounted() {this.initEchart();
  },
  methods: {getData() {
      this.data = [{ name: "钱包领取", num: 13210},
        {name: "现金支付", num: 42111},
        {name: "记账领取", num: 81711},
        {name: "挪动领取", num: 121700},
      ];
      this.data.forEach((item) => {item.percent = ((item.num / this.total) * 100).toFixed(1);
      });
    },
    initEchart() {
      let color = ["rgba(255, 135, 0, 1)",
        "rgba(255, 195, 0, 1)",
        "rgba(0, 228, 115, 1)",
        "rgba(0, 157, 255, 1)",
      ].reverse();
      let pieSeries = [];
      let lineYAxis = [];
      this.data.forEach((item, index) => {
        let iname = item.name;
        let inum = item.num;
        pieSeries.push({
          name: iname,
          type: "pie",
          radius: [65 - 15 * index + "%", 57 - 15 * index + "%"],
          // 敞开悬停动画
          hoverAnimation: false,
          // 是否顺时针旋转
          clockwise: false,
          center: ["35%", "50%"],
          label: {show: false,},
          data: [
            {
              // 只设置 3 / 4 的值，以用于 3 / 4 环形图
              value: inum * 0.75,
              name: iname,
              tooltip: {formatter: (item) => {
                  return `<div style="display:flex;font-size:12px;">
                        <div style="color:${item.color};margin-right:10px;">●</div>
                        <div>
                          <div>${item.seriesName}：${item.value} 辆 </div>
                          <div> 占比：${(item.percent / 0.75).toFixed(1) + "%"}</div>
                        </div>
                      </div>
                      `
                },
              }
            },
            {
              // 这里的值 + 下面的值为总和，然而只占比 75%
              value: (this.total - inum) * 0.75,
              itemStyle: {color: "rgba(0, 132, 251, 0.2)",
              },
              tooltip: {show: false}
            },
            {
              // 弃用 25% 的环形图不做显示
              value: this.total * 0.25,
              itemStyle: {color: "rgba(0,0,0,0)",
              },
              tooltip: {show: false}
            },
          ],
        });
        lineYAxis.push({
          value: index,
          textStyle: {
            rich: {
              circle: {color: color[index],
                padding: [0, 5],
              },
            },
          },
        });
      });
      this.ectOpts = {
        tooltip: {trigger: "item",},
        color,
        grid: {
          top: "15%",
          bottom: "54%",
          left: "35%",
          containLabel: false,
        },
        // 有 yAxis 必须有 xAxis
        xAxis: [{show: false}],
        yAxis: [
          {
            type: "category",
            // 反向坐标轴
            inverse: true,
            axisLine: {show: false,},
            axisTick: {show: false,},
            axisLabel: {formatter: (params) => {let item = this.data[params];
                return `{line|----------}{circle|●}{name|${item.name}：}{value|${item.num} 辆，}{percent| 占 ${item.percent}%}`;
              },
              interval: 0,
              inside: true,
              rich: {
                line: {
                  // width: 50,
                  // height: 1,
                  color: "rgba(236, 236, 236, 1)",
                  // 以后 echart 版本不反对 borderType 用 ------ 代替
                  // borderType: "dashed",
                  // borderColor: "#D9DFEB",
                  // borderWidth: 1,
                },
              },
              textStyle: {
                color: "#fff",
                fontSize: 12,
              },
              show: true,
            },
            data: lineYAxis,
          },
        ],
        series: pieSeries,
      };
    },
  },
};