分页雷达图echarts radar配置项内容和展示

配置项如下
      // 为保证正常绘图,代码格式与所选格式需保持一致;
// 请输入JS代码或前往官网复制示例代码;
// 复制完代码后,请先将代码中的数据列替换为绑定的数据列,绑定的数据列从上至下依次为column1、column2......,option部分请添加options.data以引用绑定列,chart绘制的DOM id会自动替换为变量$container
test = [
	{
		"column1": "大区部",
		"column2": "Sum_total",
		"column3": "Sum_roughtotal",
		"column4": "Sum_buildingtotal"
	},
	{
		"column1": "北京大区",
		"column2": 100,
		"column3": 200,
		"column4": 300
	},
	{
		"column1": "华东大区",
		"column2": 400,
		"column3": 500,
		"column4": 600
	},
	{
		"column1": "川藏大区",
		"column2": 700,
		"column3": 800,
		"column4": 900
	},
	{
		"column1": "东北大区",
		"column2": 1000,
		"column3": 1100,
		"column4": 1200
	},
	{
		"column1": "赣闽大区",
		"column2": 1300,
		"column3": 1400,
		"column4": 1500
	},
	{
		"column1": "河南大区",
		"column2": 1600,
		"column3": 1700,
		"column4": 1800
	},
	{
		"column1": "湖北大区",
		"column2": 1900,
		"column3": 2000,
		"column4": 2100
	},
	{
		"column1": "津冀大区",
		"column2": 2200,
		"column3": 2300,
		"column4": 2400
	},
	{
		"column1": "山东大区",
		"column2": 2500,
		"column3": 2600,
		"column4": 2700
	},
	{
		"column1": "陕晋大区",
		"column2": 2800,
		"column3": 2900,
		"column4": 3000
	},
	{
		"column1": "上海大区",
		"column2": 3000,
		"column3": 2800,
		"column4": 2605
	},
	{
		"column1": "苏北大区",
		"column2": 2600,
		"column3": 2400,
		"column4": 2200
	},
	{
		"column1": "西北大区",
		"column2": 2200,
		"column3": 2000,
		"column4": 1800
	},
	{
		"column1": "湘贵大区",
		"column2": 1800,
		"column3": 1600,
		"column4": 1400
	},
	{
		"column1": "云桂大区",
		"column2": 1400,
		"column3": 1300,
		"column4": 1200
	},
	{
		"column1": "浙南大区",
		"column2": 1200,
		"column3": 1000,
		"column4":1900
	},
	{
		"column1": "浙皖大区",
		"column2": 2000,
		"column3": 3000,
		"column4": 875
	},
	{
		"column1": "重庆大区",
		"column2": 2000,
		"column3": 2500,
		"column4": 534
	}
]

var i=0;
var m=0;
var radarloop=[];
while(i<test.length-1){
  if(m==8){
    m=0
  }
  if(m==0){
    radarloop.push([]);
  }
  pos=[]
    if((parseInt(m/4))%2==0){
      pos=[15*(m+1)+9*m,25]
    }
    else{pos=[15*((m-4)+1)+9*(m-4),65]}
      
    radarloop[parseInt(i/8)].push({
        indicator: [{ text: '综合评分',max:3000},{ text: '竞争力',max:3000},{ text: '发展面积' ,max:3000},{ text: '增长潜力',max:3000 },{ text: '市场容量',max:3000 },{ text: '市场饱和度',max:3000 },{ text: '执行力' ,max:3000},{ text: '招商能力' ,max:3000},{ text: '客户体验' ,max:3000},{ text: '直播能力' ,max:3000}],
        center:[pos[0]+'%',pos[1]+'%'],
        radius:100,
        startAngle: 90,
        splitNumber: 5,
        shape: '',
        axisName: {
          formatter: '{value}',
          color: '#000',
          fontSize: 5
        },
        splitArea: {
          areaStyle: {
            color: ['#E6E6E6', '#F5F5F5', '#E6E6E6', '#F5F5F5'],
            shadowColor: 'rgba(0, 0, 0, 0)',
            shadowBlur: 10
          }
        },
        axisLine: {
          lineStyle: {
            color: '#DFDFDF'
          }
        },
        name: {
          textStyle: {
            color: '#fff',
            fontSize: 10
          },
        },
        splitLine: {
          lineStyle: {
            color: '#DFDFDF'
          }
        }
      });
        m++;
        i++;
}

var j=0;
var k = 0;
var seriesloop=[]
while(j< test.length-1){
    valueloop = [test[j+1].column2,test[j+1].column3,test[j+1].column4,test[j+1].column5,test[j+1].column6,test[j+1].column7,test[j+1].column8,test[j+1].column9,test[j+1].column10,test[j+1].column11]
    if(k==8){
      k=0
    }
    if(k==0){
      seriesloop.push([]);
    }
    seriesloop[parseInt(j/8)].push({
        type: 'radar',
        name:test[j+1].column1,
        tooltip:{
          trigger:'item'
        },
        radarIndex: k,
        emphasis: {
          lineStyle: {
            width: 4,
          }
        },
        data: [
          {
            value: valueloop,
            //name: 'Data A',
            areaStyle: {
              color: '#7BACFA'
            },
            itemStyle:{
              color: '#FFF',
              borderColor: '#5ABAFD',
              borderWidth: 0.5
            },
            lineStyle:{
              color:'#2577FB'
            }
          },
        ],
        symbol: 'circle',
      })
    k++;
    j++;
}

optionsloop=[];
for(var a=0;a<3;a++){
  optionsloop.push({radar: radarloop[a],series:seriesloop[a]});
}

console.log(optionsloop[2])
option = {
  tooltip: {              // 本系列特定的 tooltip 设定。   
                show: true,
                formatter: "",
                backgroundColor: "rgba(255,250,255,0.4)",  // 提示框浮层的背景颜色。注意:series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
                borderColor: "#333",        // 提示框浮层的边框颜色。...
                borderWidth: 0,             // 提示框浮层的边框宽。...
                padding: 5,                 // 提示框浮层内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。...
                textStyle: {                // 提示框浮层的文本样式。...
                    // color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
                },
        },
  timeline:{
      data:[1,2,3],
      label : {
        formatter : function(s) { return "第"+s+"页"; }
      },
      autoPlay : false,
      playInterval : 1500,
      tooltip:{formatter : function(s) {return "第"+s.value+"页"; }},
      replaceMerge:['radar','series']
  },
  options:optionsloop
};
    
截图如下