Echars之雷达图的实现

骑士李四记录：

1.参数构造思路：
参数：legend的data，radar的indicator，series的data
格式：series的data中的value要和radar的indicator的name一一对应，
构造思路：
构造series的data，先要按照legend分组，然后对分组的list和indicator的list使用同一种排序算法给排序，然后把排序后的结果接受一下，作为参数传参。
排序算法：可以使用

//name是指 indicator中name的字段名称，按照此名称排序之后就对应上了。
list.sort((a, b) => a['name'] > b['name'] ? 1 : -1)

排序：https://blog.csdn.net/weixin_43978695/article/details/105790303

2.雷达图代码案例：

option = {
      tooltip: {},
      legend: {                       // 图例组件
        show: true,
        bottom : 'bottom',                    // 图例距离顶部边距
        itemWidth: 10,                  // 图例标记的图形宽度。[ default: 25 ]
        itemHeight: 10,                 // 图例标记的图形高度。[ default: 14 ]
        itemGap: 30,                	// 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
        orient: 'horizontal',             // 图例列表的布局朝向,'horizontal'为横向,''为纵向.
  		  data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
      },

      radar: [{                       // 雷达图坐标系组件，只适用于雷达图。
        center: ['50%', '50%'],             // 圆中心坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
        radius: 80,                        // 圆的半径，数组的第一项是内半径，第二项是外半径。
        startAngle: 90,                     // 坐标系起始角度，也就是第一个指示器轴的角度。[ default: 90 ]
        name: {                             // (圆外的标签)雷达图每个指示器名称的配置项。
          formatter: '{value}',
          textStyle: {
            fontSize: 12,
            color: '#000'
          }
        },
        splitArea: {                        // 坐标轴在 grid 区域中的分隔区域，默认不显示。
          show: true,
          areaStyle: {                            // 分隔区域的样式设置。
            color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],       // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
          }
        },
           indicator: [
            { name: '销售（sales）', max: 6500},
            { name: '管理（Administration）', max: 16000},
            { name: '信息技术（Information Techology）', max: 30000},
            { name: '客服（Customer Support）', max: 38000},
            { name: '研发（Development）', max: 52000},
            { name: '市场（Marketing）', max: 25000}
        ]
      }],
      series: [{
        name: '雷达图',             // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
        type: 'radar',              // 系列类型: 雷达图
        itemStyle: {                // 折线拐点标志的样式。
          normal: {                   // 普通状态时的样式
            lineStyle: {
              width: 1
            },
            opacity: 0.2
          },
          emphasis: {                 // 高亮时的样式
            lineStyle: {
              width: 5
            },
            opacity: 1
          }
        },
		data: [
            {
                value: [4300, 10000, 28000, 35000, 50000, 0],
                name: '预算分配（Allocated Budget）'
            },
            {
                value: [5000, 14000, 28000, 31000, 42000, 0],
                name: '实际开销（Actual Spending）'
            }
        ]
      }, ]
    };