Echarts在线免费图表

 
            let countValue = 88;
let amountValue = 7800;
option = {
  backgroundColor: "#fff",
  legend: {
    x: "center",
    textStyle: {
      color: ["#777"],
    },
    icon: "circle", // 图例的形状
    // 环图之间间隔，图例防抖动
    inactiveBorderWidth: 0,
    itemStyle: {
      borderWidth: 0,
    },
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  title: [
    {
      left: "75%",
      top: "45%",
      textAlign: "center",
      text: "{a|" + amountValue + "}{c|亿元}",
      textStyle: {
        fontSize: 14,
        rich: {
          a: {
            fontSize: 30,
            color: "#313131",
          },
          c: {
            fontSize: 10,
            color: "#535353",
          },
        },
      },
      subtext: "总金额",
      subtextStyle: {
        fontSize: 15,
        color: ["#535353"],
      },
    },
    {
      left: "25%",
      top: "45%",
      textAlign: "center",
      text: "{a|" + countValue + "}{c|家}",
      textStyle: {
        fontSize: 14,
        rich: {
          a: {
            fontSize: 30,
            color: "#313131",
          },
          c: {
            fontSize: 10,
            color: "#535353",
          },
        },
      },
      subtext: "总家数",
      subtextStyle: {
        fontSize: 15,
        color: ["#535353"],
      },
    },
  ],
  series: [
    {
      name: "参与金额",
      type: "pie",
      radius: ["35%", "45%"],
      center: ["75%", "50%"],
      data: [
        {
          value: 10,
          name: "前期",
        },
        {
          value: 130,
          name: "初参与",
        },
        {
          value: 130,
          name: "初中期",
        },
        {
          value: 130,
          name: "中期",
        },
        {
          value: 130,
          name: "中后期",
        },
        {
          value: 130,
          name: "后期",
        },
      ],
      label: {
        normal: {
          show: false,
        },
      },
      // 环图之间间隔
      itemStyle: {
        normal: {
          borderWidth: 2,
          borderColor: "#fff",
        },
    	},
    },
    {
      name: "参与家数",
      type: "pie",
      radius: ["35%", "45%"],
      center: ["25%", "50%"],
      data: [
        {
          value: 1050,
          name: "前期",
        },
        {
          value: 130,
          name: "初参与",
        },
        {
          value: 130,
          name: "初中期",
        },
        {
          value: 130,
          name: "中期",
        },
        {
          value: 130,
          name: "中后期",
        },
        {
          value: 130,
          name: "后期",
        },
      ],
      label: {
        normal: {
          show: false,
        },
      },
      // 环图之间间隔
      itemStyle: {
        normal: {
          borderWidth: 2,
          borderColor: "#fff",
        },
    	},
    },
  ],
  color: [
    "#D4DEEC",
    "#006AB2",
    "#15D2D6",
    "#61D4AD",
    "#FEC054",
    "#44A0CF",
  ],
};