Echarts在线免费图表

 
             var fourPieData = [
        {
          name: "总则",
          max: 3500,
          value: 1185,
        },
        {
          name: "路基",
          max: 3200,
          value: 2011,
        },
        {
          name: "路面",
          max: 30000,
          value: 24737,
        },
        {
          name: "桥梁涵洞",
          max: 30000,
          value: 8757,
        },
      ];
      var titleArr = [],
        seriesArr = [];
      let colors = [
        ["#57bbf7", "pink"],
        ["#ffc969", "#f4f4f7"],
        ["#f38b97", "#f4f4f7"],
        ["#b1d882", "#f4f4f7"],
        ["#c0acf9", "#f4f4f7"],
      ];
      fourPieData.forEach(function(item, index) {
        titleArr.push({
          text: item.name,
          left: index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
          top: index < 2 ? "40%" : "90%",
          textAlign: "center",
          textStyle: {
            fontWeight: "normal",
            fontSize: "16",
            color: colors[index][0],
            textAlign: "center",
          },
        });

        seriesArr.push({
          name: item.name,
          type: "pie",
          clockWise: false,
          radius: [60, 70],

          itemStyle: {
            normal: {
              color: colors[index][0],
              shadowColor: colors[index][0],
              shadowBlur: 0,
              label: {
                show: true,
              },
              labelLine: {
                show: true,
              },
            },
          },
          hoverAnimation: false,
          center: [index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%", index < 2 ? "20%" : "70%"],
          data: [
            {
              value: item.value,
              name: "完成额",
              label: {
                normal: {
                  formatter: function(params) {
                    let num = Math.floor((item.value / item.max) * 100);
                    return ["{a|" + num + "%}", "{b|" + "完成度" + "}"].join("\n");
                  },
                  rich: {
                    a: {
                      color: "#000",
                      fontWeight: 500,
                      fontSize: 10,
                      lineHeight: 20,
                      align: "center",
                    },
                    b: {
                      color: "#000",
                      fontSize: 14,
                    },
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "20",
                    fontWeight: "bold",
                    color: colors[index][0], //跟随其他颜色
                  },
                },
              },
              itemStyle: {
                emphasis: {
                  color: colors[index][0],
                },
              },
            },
            {
              value: item.max - item.value,
              name: "总额",
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              itemStyle: {
                normal: {
                  color: colors[index][1],
                },
              },
            },
          ],
        });
      });
option = {
    title: titleArr,
        series: seriesArr,
        tooltip: {
          trigger: "item",
          formatter: "{b}<br> {c}",
        },
};