echart 饼图引导线加圆点

最新推荐文章于 2023-09-12 15:40:42 发布

番茄and西红柿

最新推荐文章于 2023-09-12 15:40:42 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/ddsuuny/article/details/127005791

本文展示了如何在ECharts饼图中实现引导线与圆点的效果，包括图例两端对齐和圆点的添加方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、效果图

在这里插入图片描述

需要两端对齐，并且加上圈

2、代码

 const colors = [
        "#0056E3",
        "#4193E8",
        "#47C1B0",
        "#47C16F",
        "#CDDC39",
        "#F1C43E",
        "#E8793F",
        "#E8493F",
        "#D500FF",
        "#8C00FF",
        "#5C00FF",
        "#000EE3",
      ];

      let data = [
      {value: "1065.00", name: "租客"}
{value: "234.00", name: "未关联客户"}
 {value: "845.00", name: "其他亲友"}
 {value: "1619.00", name: "儿媳/女婿"}
 {value: "1864.00", name: "岳父母/公婆"}
 {value: "2042.00", name: "兄弟姐妹"}
 {value: "2291.00", name: "子女"}
 {value: "2427.00", name: "父母"}
 {value: "1000.00", name: "夫妻"}
 {value: "1442.00", name: "业主"}
 {value: "1294.00", name: "共有业主"}
 {value: "693.00", name: "其他"}
]
      let leftJson = {
        租客: 0,
        未关联客户: 1,
        其他亲友: 2,
        "儿媳/女婿": 3,
        "岳父母/公婆": 4,
        兄弟姐妹: 5,
        子女: 6,
        父母: 7,
        夫妻: 8,
        业主: 9,
        共有业主: 10,
        其他: 11,
      };
      const Option = {
        color: colors,
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            return `${params.marker}${params.data.name}<span style='margin-left:10px'>${params.data.value}</span>%`;
          },
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "60%"],
            center: ["50%", "50%"],
            data: data,
            label: {
              formatter: function (v) {
                if (leftJson[v.data.name] <= 5) {
                  return `{hr|}  ${v.data.name} ${v.data.value}%`;
                } else {
                  return `${v.data.name} ${v.data.value}%  {hr|}`;
                }
              },
              rich: {
                hr: {
                  //auto自定义
                  width: 2,
                  height: 2,
                  borderRadius: 5,
                  borderWidth: 2,
                  borderColor: "auto",
                  padding: [2, 2, 0, 0],
                },
                // a: {
                //   padding: [-14, 50, -20, 15],
                // },
              },
              position: "outer",
              alignTo: "edge",
              margin: 20,
            },
            left: "10%",
            right: 0,
            top: 0,
            bottom: 0,
          },
        ],
      };