Echarts在线免费图表

 
            var colorList = [
  'rgba(150, 160, 240, 1)',
  "rgba(206, 164, 255, 1)"
];

var echartData = [
  {
    value: 154,
    name: " 实时",
  },
  {
    value: 56,
    name: " 历史",
  }
];
const maxValue = Number(echartData[0].value) + Number(echartData[1].value)
//把echartData数据遍历实现不同指线文字背景色
var seriesData = echartData.map((item, index) => {
  return {
    ...item,
    actValue: item.value,
    label: {
      show: true,
      position: "outside",
      borderRadius: 5,
      padding: [10, -10, 3, -3],
      color: colorList[index],
      textStyle: {
        fontSize: 15,
      },
      formatter:
        "{white|{b}}\n{three|{d}%} ",
      rich: {
        test: {},
        white: {
          align: "left",
          color: "#666666",
          fontSize: 15,

        },
        three: {
          color: "#000",
          align: "left",
          padding: [6, 0],
          fontSize: 15,
        },
      },
    },
  };
});

option = {
  title: {
    show: true,
    text: `{value|${maxValue}}{unit|次}`,
    itemGap: 4,
    x: 'center',
    y: 'center',
    subtext: '预警总数',
    textStyle: {
      rich: {
        value: {
          align: "left",
          color: "rgba(64, 64, 64, 1)",
          fontSize: 20,

        },
        unit: {
          color: "rgba(155, 155, 155, 1)",
          align: "left",
          fontSize: 12,
        },
      },
    },
    subtextStyle: {
      fontSize: 14,
      // padding: [0, 0],
      color: 'rgba(64, 64, 64, 1)'
    },
  },
  series: [
    {
      name: "pie",
      type: "pie",
      radius: ["60%", "70%"],
      hoverAnimation: false,
      color: colorList,
      itemStyle: {
        normal: {
          borderColor: "#fff",
          borderWidth: 4,
        },
      },
      labelLine: {
        length: 10,
        length2: 50,
        lineStyle: {
          color: "rgba(229, 229, 229, 1)"
        }
      },
      data: seriesData
    },
  ],
};