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: `{three|{d}/%}\n{white|{b}}`,
      formatter: function (params) {
        return `{three|${params.value}/${(Number(params.value)/maxValue).toFixed(2)}%}\n{white|${params.data.name}}`
      },
      rich: {
        test: {},
        white: {
          align: "left",
          color: "#666666",
          padding: [10, 0],
          fontSize: 15,
        },
        three: {
          color: "#000",
          align: "left",
          padding: [5, 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: 30,
        lineStyle: {
          color: "rgba(229, 229, 229, 1)"
        }
      },
      labelLayout: function (params) {
        const isLeft = params.labelRect.x < myChart.getWidth() / 2;
        const points = params.labelLinePoints;
        points[2][0] = isLeft
          ? params.labelRect.x
          : params.labelRect.x + params.labelRect.width;
        return {
          labelLinePoints: points
        };
      },
      data: seriesData
    },
  ],
};