echarts雷达图

最新推荐文章于 2025-03-07 11:14:28 发布

原创最新推荐文章于 2025-03-07 11:14:28 发布 · 966 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#大数据 #echarts #vue.js

1：效果如图：

2：代码如下

大家对着数据修改下基本就差不多的了

      const option = {
        title: {
          text: "年度总用电\n\n" + 5,432,
          top: 10,
          left: 80,
          subtext: "KMH",
          textAlign: "center",
          textStyle: { color: "#ffc800", fontSize: 24 },
          padding: [10, 10, 10, 10],
          borderRadius: 8,
          subtextStyle: { color: "#ffc800", fontSize: 14 },
          backgroundColor: "#2d3360",
        },
        textStyle: {
          fontSize: 18,
          color: "white",
        },
        color: ["#0e9cff", "#18f8ee", "#ffc800"],
        radar: {
          center: [270, 240],
          radius: 130,
          shape: "polygon",
          splitNumber: 4,
          axisLine: {
            lineStyle: {
              color: "",
            },
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ["#2d3360"],
              // 图表背景网格的颜色
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: ["#38426b"],
              // 图表背景网格线的颜色
            },
          },

          indicator: indicatorData,
        },

        series: [
          {
            name: "用电",
            type: "radar",
            data: [
              {
                value: [6000, 9000, 7000, 6500, 5000],
                name: "",
                color: "yellow",
              },
              {
                value: [5000, 2000, 7000, 2600, 4200],
                name: "",
              },
              {
                value: [500, 4000, 800, 1800, 7000],
                name: "",
              },
            ],
          },
        ],
      };