小程式echarts雷達圖元件封裝

由于業務需要學員和非學員資料的對比雷達圖或者個人單次的雷達圖，有時候顯示legend類型有時候不需要顯示。是以為了使用友善直接封裝了echarts雷達圖元件。需要的童鞋們！直接拿走，項目親測有效。

實際項目展示：

(1)對比

（2）單個展示

代碼講解部分

真實使用時隻需要元件傳參：

(1)radarList為對象

(2)isShowLegend 當值為true顯示legend否則不顯示

radarList: {
      name: '2021-09-09',
      list: [{
          name: '體型',
          value: '80'
        },
        ...
        {
          name: '機能',
          value: '80'
        },
        {
          name: '柔韌',
          value: '80'
        },
      ]
    },
           

1.index.wxcss部分

.container {
  width: 100%;
  height: 500rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

ec-canvas {
  width: 100%;
  height: 100%;
}
           

2.index.wxml

<view class="container">
  <!-- force-use-old-canvas="true" 頁面滑動，雷達圖不動覆寫頁面内容解決，但是該屬性會導緻雷達圖像素變低-->
  <ec-canvas id="mychart-dom-graph" canvas-id="mychart-graph" ec="{{ ec }}" ></ec-canvas>
</view>
           

3.index.js

注意：在引入ec-canvas/echarts前需要先去下載下傳 ecomfe/echarts-for-weixin 後，直接複制ec-canavs到你的項目，然後再做如下操作

import echarts from "../../../../../miniprogram_npm/ec-canvas/echarts"
Component({
  /**
   * 元件的屬性清單
   */
  properties: {
    from: {
      type: String,
      value: ""
    },
    radarList: {
      type: Object,
      value: {}
    },
    isShowLegend: {
      type: Boolean,
      value: true
    }
  },

  /**
   * 元件的初始資料
   */
  data: {
    ec: {
      lazyLoad: true // 延遲加載
    },
    radarList: {},
    // isShowLegend:true,
    radarList1: {},
    indicatorList: [],
    legendList: [],
    radarValueList: [],
  },
  /**
   * 元件的方法清單
   */
  methods: {
    // 設定雷達圖顔色
    formatRadarColor($color1, $bgColor1, $bgColor2) {
      return {
        lineStyle: { //輻射區線條顔色
          color: $color1 || '#1890FF'
        },
        itemStyle: { // 單個拐點标志的樣式設定。
          normal: {
            color: $color1 || '#1890FF'
          }
        },
        areaStyle: // 雷達圖輻射區域的樣式
        {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [{
                offset: 0,
                color: $bgColor1 || '#C2EDFF'
              },
              {
                offset: 1,
                color: $bgColor2 || '#BDE0FF'
              }
            ]
          )
        },
      }
    },


    // 格式化傳參資料----------------------
    formatData(radarList, $color1, $bgColor1, $bgColor2) {
      let indicatorList = [];
      let radarValueItem = [];
      radarList.list.forEach(item => {
        indicatorList.push({
          name: item.name,
          max: 100
        })
        radarValueItem.push(item.value)
      })
      indicatorList[0].axisLabel = { //設定坐标軸上文字顔色
        show: true,
        fontSize: 12
      }
      // 1: '#1890FF','#36C8FF','#2494FF'
      let a = this.formatRadarColor($color1, $bgColor1, $bgColor2)
      this.data.radarValueList.push({
        value: radarValueItem,
        name: radarList.name,
        ...a
      })
      this.data.legendList.push(radarList.name)
      this.setData({
        indicatorList,
        radarValueList: this.data.radarValueList,
        legendList: this.data.legendList
      })
    },
    
    // 初始化雷達圖--------------------
    init_radarMap: function () {
      // 建立雷達圖執行個體
      this.data.radarMapComponnet && this.data.radarMapComponnet.init((canvas, width, height, dpr) => {
        const radarMap = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr
        });
        // 取消legend的事件  此事件暫時未達到預期效果
        radarMap.on('legendselectchanged', function (params) {
          radarMap.setOption({
            legend: {
              selected: {
                [params.name]: true
              }
            }
          })
        })
        // 設定相關配置項
        radarMap.setOption(this.getRadarMapOption());
        return radarMap;
      });
    },
    
    // 雷達圖的配置項---------------------
    getRadarMapOption: function () {
      this.formatData(this.data.radarList)
      if (Object.keys(this.data.radarList1).length) {
        this.formatData(this.data.radarList1, '#FA6561', '#F3E7E5', '#FFEAE9')
      }
      return {
        backgroundColor: "#ffffff",
        xAxis: {
          show: false
        },
        yAxis: {
          show: false
        },
        legend: {
          data: this.data.legendList,
          type: 'scroll',
          orient: 'horizontal', //設定欄位如何顯示,橫軸或縱軸
          bottom: '0',
          left: this.data.legendList.length == 2 ? '10%' : '30%',
          show: this.data.isShowLegend
        },
        radar: {
          // shape: 'circle',
          indicator: this.data.indicatorList,
          radius: 65, //縮放 防止文字遮擋
          center: ['50%', '50%'], //位置
          axisLine: { // (圓内的幾條直線)坐标軸軸線相關設定
            lineStyle: {
              color: '#BFBFBF',
              // 坐标軸線線的顔色。
              width: 1,
              // 坐标軸線線寬。
              type: 'solid',
              // 坐标軸線線的類型。
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: '#fff'
              // 圖表背景網格的顔色
            }
          },
          splitLine: { // (這裡是指所有圓環)坐标軸在 grid 區域中的分隔線。
            lineStyle: {
              color: '#e9e9e9',
              // 分隔線顔色
              width: 1,
              // 分隔線線寬
            }
          },
          name: { //文本名稱樣式
            textStyle: {
              color: 'rgba(0, 0, 0, 0.45)',
            }
          },
        },
        series: [{
          type: 'radar',
          symbolSize: 0, //設定拐點的圈為0，不顯示
          data: this.data.radarValueList,
        }]
      };
    }
  },
  lifetimes: {
    attached() {
      // 擷取ec-canvas元件
      this.setData({
        radarMapComponnet: this.selectComponent("#mychart-dom-graph")
      })
      // 初始化雷達圖資料
      this.init_radarMap()
    }
  }
})