1. 安裝echarts圖表

npm i echarts

2. 雷達圖組件

<template>
<!--  雷達圖-->
<!--  圖表必須要給寬高-->
  <div ref="myDiv" class="radar-echart"></div>
</template>
<script>
// 完整加載
// var echarts = require('echarts')
// 按需加載 因為體積過大，這里只需要雷達圖
var echarts = require('echarts/lib/echarts') // 引入主模塊
require('echarts/lib/chart/radar')// 引入雷達圖
// 引入提示框和標題組件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  created() {
    // 實例創(chuàng)建完畢 但是頁面沒有渲染完畢
  },
  // 頁面渲染完畢事件
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv) // 得到圖標的實例
    myChart.setOption({
      title: {
        text: '基礎雷達圖'
      },
      tooltip: {},
      legend: {
        data: ['預算分配（Allocated Budget）', '實際開銷（Actual Spending）']
      },
      radar: {
        // shape: 'circle',
        name: {
          textStyle: {
            color: '#fff',
            backgroundColor: '#999',
            borderRadius: 3,
            padding: [3, 5]
          }
        },
        // 每個區(qū)域的最高值
        indicator: [
          { name: '工作效率', max: 100 },
          { name: '考勤', max: 100 },
          { name: '積極性', max: 100 },
          { name: '幫助同事', max: 100 },
          { name: '自主學習', max: 100 },
          { name: '正確率', max: 100 }
        ]
      },
      series: [{
        name: '預算 vs 開銷（Budget vs spending）',
        type: 'radar',
        // areaStyle: {normal: {}},
        data: [
          {
            value: [10, 1, 100, 5, 100, 0],
            name: '張三'
          },
          {
            value: [50, 50, 50, 50, 50, 10],
            name: '李四'
          }
        ]
      }]
    })
  }
}
</script>
<style scoped>
.radar-echart{
  width: 600px;
  height: 400px;
}
</style>

文章來源地址http://www.zghlxwxcb.cn/news/detail-861046.html

到了這里，關于雷達圖插件（百度的）echarts的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！