Echarts在线免费图表

 
            let myData1 = [
    {
      value: 126,
      name: "低保户",
    },
    {
      value: 140,
      name: "失独老人",
    },
    {
      value: 135,
      name: "失能老人",
    },
    {
      value: 52,
      name: "高龄老人",
    },
    {
      value: 235,
      name: "普通老人",
    },
  ];
  let colorA = ["#F26C4F", "#F94FFF", "#F5335C", "#FFD200", "#00E1EF"];
  let option = {
    backgroundColor: "#040F25",
    title: {
      text: "100%",
      top: "49%",
      left: "33%",
      textStyle: {
        fontSize: 16,
        color: "#ffffff",
      },
    },
    legend: {
      orient: "vertical",
      icon: "circle",
      right: "6%",
      y: "center",
      itemWidth: 14,
      itemHeight: 10,
      itemGap: 20,
      align: "left",
      textStyle: {
        rich: {
          name: {
            // width: '45%',
            fontSize: 14,
            color: "#fff",
          },
          value: {
            fontSize: 16,
            padding: [0, 5, 0, 15],
            color: "#00E1EF",
          },
        },
      },
      formatter: function (name) {
        let res = myData1.filter((v) => v.name === name);
        res = res[0] || {};
        const p = res.value;
        return "{name|" + name + "：}" + "{value|" + p + "人}";
        // return "{name|" + name + "}";
      },
    },
    tooltip: {
      show: false,
      confine: true,
      trigger: "item",
      formatter: "{b} : {c}",
    },
    series: [
      {
        avoidLabelOverlap: false,
        type: "pie",
        roseType: "area", // 玫瑰图
        center: ["36%", "50%"],
        radius: ["30%", "40%"],
        color: colorA,
        itemStyle: {
          normal: {
            borderColor: "#050F20",
            borderWidth: 3,
          },
        },
        label: {
          normal: {
            //   formatter: '{b}\n{d}%\t{c}',
            formatter: "{b|{b}}\n{d|{d}%}",
            rich: {
              icon: {
                fontSize: 14,
              },
              d: {
                fontSize: 14,
                padding: [5, 0, 0, 0],
                color: "#fff",
              },
              b: {
                fontSize: 14,
                padding: [0, 0, 5, 0],
                color: "#fff",
              },
            },
          },
        },
        labelLine: {
          normal: {
            length: 10,
            length2: 25,
          },
        },
        data: myData1,
      },
    ],
  };