vue + Echart 实现可视化（二）雷达图

雷达图

<template>
  <div class="card-chart-radar">
    <chart :options="option" ref="leaderEduBar" autoresize />
    <p class="chart-empty" v-if="!chartData">本单位暂时没有开启能力模型</p>
  </div>
</template>

配置

      option: {
        grid: {
          position: "center"
        },
        tooltip: {
          //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
          confine: true,
          enterable: true //鼠标是否可以移动到tooltip区域内
        },
        legend: {
          x: "right",
          y: "24px",
          icon: "circle",
          orient: "vertical",
          data: ["岗位", "个人"],
          align: "left",
          itemGap: 20,
          itemWidth: 8
        },
        radar: [
          {
            indicator: [
              { text: "知识", max: 100 },
              { text: "廉洁", max: 100 },
              { text: "业绩", max: 100 },
              { text: "技能", max: 100 },
              { text: "素质", max: 100 }
            ],
            center: ["40%", "55%"], // 调位置
            radius: 90, // 调大小
            splitNumber: 7, // 雷达图圈数设置
            name: {
              textStyle: {
                color: "#838D9E"
              }
            },
            // 设置雷达图中间射线的颜色
            axisLine: {
              lineStyle: {
                color: "rgba(0,0,0,0.15)"
              }
            },
            splitArea: {
              show: false,
              areaStyle: {
                color: "rgba(255,255,255,0)" // 图表背景的颜色
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: "rgba(0,0,0,0.15)" // 设置网格的颜色
              }
            }
          }
        ],
        series: [
          {
            type: "radar",
            grid: { containLabel: true },
            tooltip: {
              trigger: "item"
            },
            //设置拐点颜色
            areaStyle: {
              normal: {
                width: 1,
                opacity: 0.2
              }
            },
            symbol: "circle", // 拐点样式
            symbolSize: 6, // 拐点大小
            itemStyle: {
              normal: { areaStyle: { type: "default" }, color: ["#1FC48D", "3F8FFF"] }
            },
            data: [
              {
                value: [],
                name: "岗位",
                itemStyle: {
                  normal: {
                    color: "#1FC48D",
                    lineStyle: {
                      color: "#1FC48D"
                    }
                  }
                }
              },
              {
                value: [],
                name: "个人",
                itemStyle: {
                  normal: {
                    color: "#3F8FFF",
                    lineStyle: {
                      color: "#3F8FFF"
                    }
                  }
                }
              }
            ]
          }
        ]
      }