echarts雷达图

<template>
	<div>
	
		<div class="fxbodyblock4">
			<div id="fxmain4">
        <div
          class="fxplain3"
          ref="fxplain_ref3"
          :style="{ height: zoomNum * 490 + 'px', zoom: 1 / zoomNum }"
        ></div>
      </div>
		</div>
	</div>
</template>
<script type="text/javascript">

	export default{
		name:'',
		data(){
			return{
				zoomNum: window.screen.width / 1920, 
			}		
		},
		components:{

		},
		methods:{
			 fxplain3() {
				  let dataMax = [81,91,80,85,84,65,91];
      const source = {
        data: [43, 10, 28, 35, 50, 19, 13],
        indicator: [
          { name: '指标一', max: dataMax[0]},
          { name: '指标二', max: dataMax[1]},
          { name: '指标三', max: dataMax[2]},
          { name: '指标四', max: dataMax[3]},
          { name: '指标五', max: dataMax[4]},
          { name: '指标六', max: dataMax[5]},
          { name: '指标七', max: dataMax[6]},
        ]
      }
      const buildSeries = function(data){
        const helper = data.map((item, index) => {
          const arr = new Array(data.length);
          arr.splice(index, 1, item);
          return arr;
        })

        return [data, ...helper].map((item, index) => {
          return {
            type: 'radar',
            itemStyle: {
              color: '#FD626C'
            },
            lineStyle: {
              color: index === 0 ? '#FD626C' : 'transparent'
            },
            areaStyle: {
              color: index === 0 ? '#FD626C' : 'transparent',
              opacity: 0.3
            },
            tooltip: {
              show: index === 0 ? false : true,
              formatter: function() {
                return source.indicator[index - 1].name + '不满意度：' + source.data[index - 1]+'%';
              }
            },
            z: index === 0 ? 1 : 2,
            data: [item]
          }
        })
      }

      let plains = this.$echarts.init(this.$refs.fxplain_ref3);
      plains.setOption({  
    
        tooltip: {},
        radar: {
          // shape: 'circle',
          center:['50%','50%'],
          radius:'55%',
       name: {
                    rich: {
                        b: {
                            color: '#FD626C',
                            fontSize:14,
                            fontFamily:'SourceHanSansSC-Regular',
                            padding:[0,0,5,0]
                            // lineHeight: 20
                        },
                       a: {
                            color: '#ffffff',
                            align: 'center',
                            fontSize:14,
                            fontFamily:'SourceHanSansSC-Regular',
                            // padding: 2,
                            // borderRadius: 4
                           }
                        },
                        formatter: (b,a)=>{
                            return `{a|}\n{b|${b}}`
                        }
                },
          splitNumber: 5,
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(12,62,129,0)','rgba(12,62,129,0)','rgba(12,62,129,0)','rgba(12,62,129,0)']
              // color:'rgba(253,98,108,0.3)'
              //  color: ['#FD626C','FD626C','FD626C','FD626C']
            }
          },
          splitLine: {
            lineStyle: {
              color: '#FD626C'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#FD626C'
            }
          },
          indicator: source.indicator
        },
        series: buildSeries(source.data)
	   });
			 },
		},
		mounted: function(){
			 this.fxplain3();
		}
	}
</script>
<style type="text/css">
.fxgk .fxbodyblock4{
  width: 100%;
  height: 490px;
}
/* 第一个百分比左右，第二个上下 */
	#fxmain4{
    width: 100%;
    height: 490px;
    background: url('./images/leidatubcg.png') no-repeat 62% 100%;
  }
 .fxgk .fxplain3{
    width: 100%;
    
  }
</style>