elementUI+echarts 雷达图动态渲染数据

<template>
  <div class="dashboard-container">
    <el-tabs v-model="editableTabsValue" type="card" @tab-click="tabclick">
      <el-tab-pane
        :key="item.businessType"
        v-for="item in editableTabs"
        :label="businessText[item.businessType]"
        :name="item.businessType.toString()"
      >
        <el-row>
          <el-col :span="12">
            <el-table :data="item.level3MetricValue">
              <el-table-column
                prop="num"
                label="序号"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="name"
                label="名称"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="result"
                label="结果"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="average"
                label="平均"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="lowerLimit"
                label="下限"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="upperLimit"
                label="上限"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="weight"
                label="权重"
                width="180"
              ></el-table-column>
            </el-table>
          </el-col>
          <el-col :span="12"> 
            <div ref="radar" :style="{height:'500px',width:'100%'}" />
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import echarts from 'echarts'
import { debounce } from '@/utils'

export default {
  name: "Dashboard",
  data() {
    return {
      editableTabsValue: "1",
      editableTabs: [],
      businessText:{
        1: 'a',
        2: 'b',
        3: 'c',
      },
      chart:null
    };
  },
  mounted() {
    this.getEval();
  },
  methods: {
    initChart(type) {
      const cur = this.editableTabs.filter(item=>item.businessType === type)
      let result = []
      let up = []
      let low = []

      cur[0].level3MetricValue.forEach(i=>{
        i.max = 3000
        result.push(i.result)
        up.push(i.upperlimit)
        low.push(i.lowerlimit)
      })
      console.log(cur);
      this.$nextTick(()=>{
        this.chart = echarts.init(this.$refs.radar[type-1])
        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: cur[0].level3MetricValue
        },
        legend: {
          left: 'center',
          bottom: '10',
          data: ['评分结果', '上限', '下限']
        },
        series: [{
          type: 'radar',
          symbolSize: 0,
          areaStyle: {
            normal: {
              shadowBlur: 13,
              shadowColor: 'rgba(0,0,0,.2)',
              shadowOffsetX: 0,
              shadowOffsetY: 10,
              opacity: 1
            }
          },
          data: [
            {
              value: result,
              name: '评分结果'
            },
            {
              value: up,
              name: '上限'
            },
            {
              value: low,
              name: '下限'
            }
          ],
        }]
      })
      })
    },
    getEval() {
      this.editableTabs = [
        {
          businessType: 1,
          level3MetricValue: [
            { 
              num: 0, 
              name: "企业", 
              result: "20%",
              average:1,
              lowerlimit:1,
              upperlimit:2,
              weight:20,
            },
            { 
              num: 0, 
              name: "基本信息", 
              result: "20%",
              average:1,
              lowerlimit:1000,
              upperlimit:3000,
              weight:20,
            },
            { 
              num: 0, 
              name: "基本信息", 
              result: "20%",
              average:1,
              lowerlimit:1000,
              upperlimit:3000,
              weight:20,
            },
            { 
              num: 0, 
              name: "基本信息", 
              result: "20%",
              average:1,
              lowerlimit:1000,
              upperlimit:3000,
              weight:20,
            },
            { 
              num: 0, 
              name: "基本信息", 
              result: "20%",
              average:1,
              lowerlimit:1000,
              upperlimit:3000,
              weight:20,
            }
          ],
        },
        {
          businessType: 2,
          level3MetricValue: [
            { 
              num: 0, 
              name: "企业基本信息", 
              result: "20%",
              average:1,
              lowerlimit:2000,
              upperlimit:2500,
              weight:20,
            },
            { 
              num: 0, 
              name: "企业基本信息", 
              result: "20%",
              average:1,
              lowerlimit:1,
              upperlimit:2,
              weight:20,
            }
          ],
        },
        {
          businessType: 3,
          level3MetricValue: [
            { 
              num: 0, 
              name: "企业基本信息", 
              result: "20%",
              average:1,
              lowerlimit:1,
              upperlimit:2,
              weight:20,
            },
            { 
              num: 0, 
              name: "企业基本信息", 
              result: "20%",
              average:1,
              lowerlimit:1,
              upperlimit:2,
              weight:20,
            }
          ],
        },
      ];
        this.initChart(Number(this.editableTabsValue))
        this.__resizeHandler = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
        }, 100)
        window.addEventListener('resize', this.__resizeHandler)
    },
    //tab切换
    tabclick(e){
      if (!this.chart) {
        return
      }
      window.removeEventListener('resize', this.__resizeHandler)
      this.chart.dispose()
      this.chart = null
      this.initChart(Number(e.name))
      this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
      }, 100)
      window.addEventListener('resize', this.__resizeHandler)
    }
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>