Vue引入echarts.js輕鬆實現雷達圖(現成代碼,複製粘貼可用)

臨時的需求

業務這邊想針對女性做一個創意測評活動,端午前的週五臨近下班纔給到比較明確的開發需求跟修改後的設計稿,希望週一上線,測評結果部分需要有雷達圖展示,所以引入echarts.js來實現雷達圖

效果圖如下 – 點我可體驗頁面

引入

echarts官網介紹

cnpm install echarts --save

import echarts from 'echarts'

<!-- 雷達圖標籤-->
<div class="chart-wrap"></div>

雷達圖官網重點看下面兩個內容

• this.radarOption.radar.indicator: 雷達圖的指示器，用來指定雷達圖中的多個變量（維度）
  indicator對應官方文檔位置
• this.radarOption.series:系列列表。每個系列通過 type 決定自己的圖表類型
  series對應官方文檔位置

相關代碼參考

相關代碼參考如下

data() {
	return {
	  index1: [], // 問題1 已被選中答案index(多選)
      index2: [],
      index3: [],
      index4: [],
      index5: [],
      index6: [],
	  // 雷達圖的數據
      radarOption: {
        splitNumber: 3,
        radar: {
          // shape: 'circle',
          center: ['50%', '50%'],
          name: {
            textStyle: {
              // 文字樣式
              color: '#fff',
              fontWeight: 'bold'
            }
          },
          indicator: [
            // 雷達圖的指示器，用來指定雷達圖中的多個變量（維度）
            {
              name: '月經',
              max: 3
            },
            {
              name: '白帶',
              max: 3
            },
            {
              name: '外陰',
              max: 3
            },
            {
              name: '性生活',
              max: 3
            },
            {
              name: '尿道',
              max: 3
            },
            {
              name: '腰腹',
              max: 3
            }

          ]
        },
        // 雷達圖背景的顏色，在這兒隨便設置了一個顏色，完全不透明度爲0，就實現了透明背景
        splitArea: {
            show: true,
            areaStyle: {
                color: 'rgba(255,0,0,0)' // 圖表背景的顏色
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                width: 1,
                color: 'rgba(131,141,158,.1)' // 設置網格的顏色
            }
        },
        series: [
          {
            name: '雷達圖', // tooltip中的標題
            type: 'radar', // 表示是雷達圖
            symbol: 'circle', // 拐點的樣式，還可以取值'rect','angle'等
            symbolSize: 8, // 拐點的大小
            areaStyle: {
              normal: {
                width: 1,
                opacity: 0.2
              }
            },
            data: [
              {
                // 設置各個指標原始值
                value: [2, 3, 1, 2, 1, 0],
                // 設置區域邊框和區域的顏色
                itemStyle: {
                  normal: {
                    color: 'rgba(255,225,0,1)',
                    lineStyle: {
                      color: 'rgba(255,225,0,1)'
                    }
                  }
                }
              }
            ]
          }
        ]
      }
	}
}

展示結果頁面時,初始化雷達圖

this.$nextTick(() => {
	// 雷達圖顯示的標籤
	const chartObj = echarts.init(this.$el.querySelector('.chart-wrap'))
	// 下面是根據6道測評題目動態獲取雷達圖各指標的值,看各自業務靈活調整
	// 第五題 第二個選項纔是正常  其他都是第一個選項正常  this.index1 問題一選中的index數組
	this.radarOption.series[0].data[0].value[0] = this.index1.includes(0) ? 0 : this.index1.length
	this.radarOption.series[0].data[0].value[1] = this.index2.includes(0) ? 0 : this.index2.length
	this.radarOption.series[0].data[0].value[2] = this.index3.includes(0) ? 0 : this.index3.length
	this.radarOption.series[0].data[0].value[3] = this.index4.includes(0) ? 0 : this.index4.length
	this.radarOption.series[0].data[0].value[4] = this.index5.includes(1) ? 0 : 3
	this.radarOption.series[0].data[0].value[5] = this.index6.includes(0) ? 0 : (+this.index6.length === 1 ? 1.5 : 3)
	// 初始化雷達圖
	chartObj.setOption(this.radarOption)
})

看到這裏,直接複製代碼,根據自己業務需要靈活調整,即使不看echarts文檔,也能夠直接使用,
效果圖如下 – 點我可體驗頁面

---

謝謝你閱讀到了最後
期待你 點贊、評論、收藏、關注