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"
                    }
                  }
                }
              }
            ]
          }
        ]
      }