Echarts在线免费图表

 
            let colorList = ["rgba(123,148,255,1)", "rgba(111,233,215,1)", "rgba(249, 191, 84, 1)", "rgba(255, 130, 131, 1)", "rgba(157, 154, 252, 1)"];
let myData = [
  { name: "天津", value: 20 },
  { name: "北京", value: 25 },
  { name: "河北", value: 40 },
  { name: "山东", value: 30 },
  { name: "山西", value: 34 },
];
// 公用调整
let itemStyle = {
  normal: {
    // borderColor: "#fff",
    // borderWidth: 0,
    color: function (params) {
      return colorList[params.dataIndex];
    },
  },
};
let option = {
  backgroundColor: "#fff",
  tooltip: {
    trigger: "item",
  },
  legend: {
    show: false
  },
  title: {
    zlevel: 0,
    text: 100,
    subtext: "运维管理",
    itemGap: 0,
    x: 'center',
    y: 'center',
    textStyle: {
      color: "#000",
      fontSize: 28,
    },
    subtextStyle: {
      fontSize: 14,
      color: "#000",
    },
  },
  series: [
    {
      // 数据
      type: "pie",
      zlevel: 3,
      radius: ["35%", "55%"],
      center: ["50%", "50%"],
      itemStyle: itemStyle,
      emphasis: {
        scale: true,
        label: {
          show: false
        },
      },
      label: {
        show: false,
      },
      title: {
        show: true,
        color: "#fff",
        fontStyle: "normal",
        fontWeight: "normal",
        fontFamily: "微软雅黑",
        fontSize: 20,
      },
      data: myData,
    },
    {
      name: "阴影圈",
      type: "pie",
      radius: ["35%", "45%"],
      center: ["50%", "50%"],
      hoverAnimation: false,
      tooltip: {
        show: false,
      },
      itemStyle: {
        normal: {
          color: "rgba(255, 255, 255, 0.6)",
        },
      },
      zlevel: 4,
      labelLine: {
        show: false,
      },
      data: [100],
    }
  ],
};