Echarts在线免费图表

 
             //存放需要显示刻度值
      const arr = [];
      //颜色
      const colorList = ["rgba(0,183,238, 1)", "rgba(86,199,60, 1)"];
      //指示器数组
      const indicatorList = [
        { name: "南京", max: 20000 },
        { name: "苏州", max: 20000 },
        { name: "无锡", max: 20000 },
        { name: "常州", max: 20000 },
        { name: "镇江", max: 20000 },
        { name: "扬州", max: 20000 },
        { name: "南通", max: 20000 },
        { name: "泰州", max: 20000 },
        { name: "徐州", max: 20000 },
        { name: "连云港", max: 20000 },
        { name: "淮安", max: 20000 },
        { name: "盐城", max: 20000 },
        { name: "宿迁", max: 20000 },
      ];
      //真实后端数据
      const seriesList = [
        [
          17500, 13800, 13900, 14000, 13400, 12000, 17000, 13400, 9855, 16700,
          13500, 16000, 13000,
        ]
      ];
      // 配置项
      const option = {
        color: colorList,
        tooltip: {
          show: true,
          trigger: "item",
        },
        backgroundColor: "#fff",
        title: {
          text: "设备地市分布",
          left: "center",
          textStyle: {
            color: "#333333",
          },
        },
        radar: {
          center: ["50%", "50%"],
          radius: "70%",
          startAngle: 90,
          splitNumber: 4,
          splitArea: {
            areaStyle: {
              color: ["transparent"],
            },
          },
          name: {
            color: "#999",
          },
          axisLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#d1d1d1",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#099B93",
            },
          },
          axisLabel: {
            show: true,
            color: "#ccc",
            // 设置只在一个刻度上显示值
            formatter: function (value, index) {
              // 显示四个刻度值
              if (!arr.includes(value)) {
                arr.push(value);
                return value;
              }
              return "";
            },
          },
          indicator: indicatorList,
        },
        series: [
          {
            name: "设备台数",
            type: "radar",
            symbol: "circle",
            //连接处小圆圈大小
            symbolSize: 3,
            areaStyle: {
              normal: {
                //径向渐变
                color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
                  { offset: 1, color: "#099B93" },
                  { offset: 0.46, color: "rgba(192,255,0,0.74)" },
                  { offset: 0, color: "#FFD904" },
                ]),
              },
            },
            itemStyle: {
              color: "#6CC3BF",
              borderColor: "#099B93",
              borderWidth: 3,
            },
            //线的颜色
            lineStyle: {
              normal: {
                color: "#6CC3BF",
                width: 2,
              },
            },
            label: {
              normal: {
                show: true,
                color: "#000",
              },
            },
            data: seriesList,
          },
        ],
      };