echarts實現雷達圖

這裏提供兩種效果,都是對官網的demo進行一點的改進,這裏放上官網鏈接,有不清楚的參數可直接查閱->echarts官網.話不多說,直接上代碼:

//實現一
initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        title : {
          text: ' 雷達圖demo',     //這裏的參數是整個圖標的標題 後面也可以加註釋
          subtext: '888'
        },
        tooltip : {
          trigger: 'item',
        },
        legend: {
          orient : 'vertical',              //這裏主要是標識不同顏色代表不同的同學
          x : 'right',
          y : 'bottom',
          data:['A同學成績 ', 'B同學成績 ']
        },

        toolbox: {
          show : true,
          feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true},
          }
        },
        polar : [
          {
            indicator : [
              { text: '素質必修課 ', max: 5.0, color: 'red'},    //這裏用於設置各軸的參數以及最大值
              { text: '核心必修課 ', max: 5.0},
              { text: '一般必修課 ', max: 5.0},
              { text: '通識必修課', max: 5.0},
              { text: '通識限選課', max: 5.0},
            ]
          }
        ],
        calculable : true,
        series : [
          {
            name: '預算 vs 開銷（Budget vs spending）',
            type: 'radar',
            data : [
              {
                value : [3.5, 4.8, 3.2, 4.7, 4.5],
                name : 'A同學 '
              },
              {
                value : [4.2, 4.1, 3.9, 3.7, 3.5 ],
                name : 'B同學 '
              }
            ]
          }
        ]
      })
    }

效果圖

//實現二
initChart() {
	  // 根據自己的id綁定echarts需要的div
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 座標軸指示器，座標軸觸發有效
            type: 'shadow' // 默認爲直線，可選爲：'line' | 'shadow'
          }
        },
        radar: {
          radius: '66%',
          center: ['50%', '42%'],
          splitNumber: 8,
          splitArea: {
            areaStyle: {
              color: 'rgba(127,95,132,.3)',
              opacity: 1,
              shadowBlur: 45,
              shadowColor: 'rgba(0,0,0,.5)',
              shadowOffsetX: 0,
              shadowOffsetY: 15
            }
          },
          indicator: [
            { name: 'Sales', max: 10000 },
            { name: 'Administration', max: 20000 },
            { name: 'Information Technology', max: 20000 },
            { name: 'Customer Support', max: 20000 },
            { name: 'Development', max: 20000 },
            { name: 'Marketing', max: 20000 }
          ]
        },
        legend: {
          left: 'center',
          bottom: '10',
          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
        },
        series: [{
          type: 'radar',
          symbolSize: 0,
          areaStyle: {
            normal: {
              shadowBlur: 13,
              shadowColor: 'rgba(0,0,0,.2)',
              shadowOffsetX: 0,
              shadowOffsetY: 10,
              opacity: 1
            }
          },
          data: [
            {
              value: [5000, 7000, 12000, 11000, 15000, 14000],
              name: 'Allocated Budget'
            },
            {
              value: [4000, 9000, 15000, 15000, 13000, 11000],
              name: 'Expected Spending'
            },
            {
              value: [5500, 11000, 12000, 15000, 12000, 12000],
              name: 'Actual Spending'
            }
          ],
          animationDuration: animationDuration
        }]
      })
    }

歡迎大家一起來學習呀,有不足的地方可以一起討論哈