Echarts日常：四角雷达图封装以及名称过长换行处理

项目场景：

要求四角类似正方形的雷达图，名字过长可换行

---

问题描述

四角雷达图的关键点就是 起始角度的设置 属性startAngle: 135,//起始点角度  下文中有放置位置

背景为圆形四环，通过以下两个属性定义

shape: 'circle',//背景是圆形还是正方形，不设置默认正方形

splitNumber: 4,//有几个环

同时四角边角的形状也是可以改变的，我用的是圆形，外带边框样式

itemStyle:{

                  borderColor:'#FFFFFF',//边角圆珠边框的颜色

                  borderWidth:0.5,//边角圆珠边框的大小

              },

以下为封装后的具体代码：

option = {
      // color: ['#5189F8'],
      tooltip: {},
      legend: {//图例
          data:legendData,  
          icon: 'circle',  //图例数据项
          bottom: 0,
          left:0,
          itemWidth: 16, // 图例标记的图形宽度。
          itemHeight: 16,
          textStyle:{          //图例的文本样式                   
              color:'#818487',    //文本颜色
              fontSize:14      //文本字体大小
          }
      },
      radar: {
          // axisName: {
          //     fontSize: 14,
          //     color: '#6D7278',
          // },
          name: { // (圆外的标签)雷达图每个指示器名称的配置项。
            textStyle: {
                fontSize: 14,
                color: '#6D7278',
            },
            formatter: function(value) {
            //   if(txtlength){
                let list = value.split("");
                let result="";
                for(let i=1;i<=list.length;i++) {
                  if(!(i%15)&&list[i]!=undefined) {
                    result += list[i-1]+'\n';
                  }else {
                    result += list[i-1];
                  }
                }
                return result;
            //   }else{
            //     return value
            //   }
            },
        },
          axisLine: {
              lineStyle: {
                  color: '#ebeef3',
              },
          },
          splitArea:{
              show: true,
                  areaStyle: {
                      color: '#fff',
                  }
          },
          shape: 'circle',//背景是圆形还是正方形，不设置默认正方形
          splitNumber: 4,//有几个环
          center:  ['50%', '50%'],
          radius:  '70%',
          triggerEvent: false,
          startAngle: 135,//起始点角度
          indicator: radarData,
      },
      color: ['#6998C4', '#93E3D6','#CC98FF'],
      series: [
          {
              type: 'radar',
              symbolSize: 10,//边角圆珠的大小
              symbolRotate :90,
              itemStyle:{
                  // color:'rgba(245, 166, 35, 1)',
                  borderColor:'#FFFFFF',//边角圆珠边框的颜色
                  borderWidth:0.5,//边角圆珠边框的大小
              },
              lineStyle: {
                  width: 2
              },
              data : radar_seriesData
          },
      ],
  };

---

下面这段代码是name过长时设置换行i%num,num视情况可自行定义

formatter: function(value) {

            //   if(txtlength){

                let list = value.split("");

                let result="";

                for(let i=1;i<=list.length;i++) {

                  if(!(i%15)&&list[i]!=undefined) {

                    result += list[i-1]+'\n';

                  }else {

                    result += list[i-1];

                  }

                }

                return result;

            //   }else{

            //     return value

            //   }

            },

---

数据传参格式：

let legendData =  ['a','b','c'];
let  min = 0, max = 100;
let radarData = [
            {
                name: 'Name1',
                max: max,
                min: min,
            },
            {
                name: ' too long long long Name2',
                max: max,
                min: min,
            },
            {
                name: 'Name3',
                max: max,
                min: min,
            },
            {
                name: 'Name4',
                max: max,
                min: min,
            },
];
let radar_seriesData = [
{
            value : [95, 73, 64,88],
            name : 'a'
},
{
            value : [94, 73, 64,77],
            name : 'b'
}
,
{
            value : [64, 75, 94,99],
            name : 'c'
}
];