Echarts在线免费图表

 
            let data1 = [
  { name: "已验收", value: 1100 },
  { name: "未验收", value: 110 },
];
let legendData = ["已验收", "未验收"];
let colorList = ["#00FFFF", "#FFEF3A"];
option = {
  backgroundColor: '#021124',
  tooltip: {
    trigger: "item",
    padding: 5,
    backgroundColor: "rgba(0,0,0,0.5)",
    borderWidth: 0,
    textStyle: { color: "#fff" },
  },
  legend: {
    orient: "horizontal",
    // left: '50%',
    left: "center",
    align: "auto",
    bottom: -1,
    // top: 235,
    itemGap: 10,
    itemWidth: 8,
    itemHeight: 8,
    textStyle: {
      fontSize: 14,
      color: "#fff",
    },
    data: legendData,
    formatter: function (params) {
      let sum = 0;
      data1.forEach((i) => {
        sum += i.value;
      });
      let val = 0;
      data1.forEach((i) => {
        if (i.name === params) val = i.value;
      });
      return `${params} (${
        Math.round((val / sum) * 100) ? Math.round((val / sum) * 100) : 0
        }%)`;
    },
    // formatter(text) {123
    //   const arr = values.value.filter(item => item.name === text)
    //   return `${arr[0].name} ${arr[0].value}`
    // },
    // formatter: function (name) {11
    //   for (var i = 0; i < legendData.length; i++) {
    //     if (legendData[i] == name) {
    //       return name + '  ' + values[i]
    //     }
    //   }
    // },
  },
  series: [
    {
      type: "pie",
      z: 3,
      // center: ["55%", "50%"],
      // center: ['20%', '50%'],
      radius: ["38%", "60%"],
      // radius: ['50%', '65%'],
      clockwise: true,
      avoidLabelOverlap: true,
      hoverOffset: 15,
      itemStyle: {
        // borderRadius: 10,
        borderWidth: 4,
        borderColor: "#1A2361",
        color: function (params) {
          return colorList[params.dataIndex];
        },
      },
      label: {
        normal: {
          color: "#fff",
          show: true,
          // position: 'outside',
          formatter: function (params) {
            console.log(params);
            if (params.dataIndex === 0) {
              return `{a|${params.data.name}}\t{hr|${params.data.value}}\n{hc|●}`;
            } else {
              return `{b|${params.data.name}}\t{he|${params.data.value}}\n{hc|●}`;
            }
          },
          rich: {
            a: {
              fontSize: 14,
              padding: [-20, 0, 0, -100],
            },
             b: {
              fontSize: 14,
              padding: [-20, 0, 0, 0],
            },
            f: {
              padding: [0, -30, -60, 0],
            },
            hr: {
              fontSize: 18,
              fontWeight: 500,
              padding: [-20, 0, 0, 0],
              // align: "center",
            },
            he: {
              fontSize: 18,
              fontWeight: 500,
              padding: [-20, -100, 0, 0],
              // align: "center",
            },
            hc: {
              padding: [-10, -10, 0, 0],
            },
            hl: {
              backgroundColor: "#fff",
              borderRadius: 3,
              width: 0,
              height: 0,
              padding: [3, -3, 3, -3],
              align: "left",
            },
          },
          padding: [0, 0, 0, 0],
        },
      },


      labelLine: {
        lineStyle: {
          color: "#fff ",
          type: "dashed",
        },

        length: 10,
        length2: 150,
        maxSurfaceAngle: 80,
      },

      data: data1,
    },

    {
      name: "外边框",
      type: "pie",
      clockWise: false, //顺时加载
      hoverAnimation: true, //鼠标移入变大
      // center: ['20%', '50%'],
      // center: ["55%", "50%"],
      radius: ["65%", "65%"],
      // radius: ['70%', '70%'],
      label: {
        show: false,
      },
      data: [
        {
          value: 1,
          name: "",
          itemStyle: {
            borderWidth: 6,
            borderColor: "rgba(49, 62, 87, .4)",
            // borderColor: '#284465', //'rgba(11,82,99,.5)'
          },
        },
      ],
    },

    {
      // radius: ['40%', '60%'],
      z: 3,
      radius: ["38%", "50%"],
      // radius: ['50%', '57%'],
      // center: ["55%", "50%"],
      hoverAnimation: false,
      type: "pie",
      label: {
        show: false,
        emphasis: {
          show: false,
        },
      },
      labelLine: {
        show: false,
      },
      emphasis: {
        show: false,
      },
      animation: false,
      tooltip: {
        show: false,
      },
      data: [
        {
          value: 1,
          itemStyle: {
            color: "rgba(49, 62, 87,0.8)",
            // color: 'rgba(250,250,250,0.2)',
          },
        },
      ],
    },

  ],
};