Echarts小结--雷达图

说明：echarts图表有很多类，这一篇主要是雷达图的我用到的部分配置，主要解决的问题就是背景色的问题。

先上图：

下面是我的配置方面：

import Echarts from 'echarts';
let options = {
    title: {
        text: '雷达图',
        textStyle: {
            color: 'rgba(221,221,221,1)', //标题颜色
            fontSize: 14,
            lineHeight: 20,
        },
        // 标题的位置，此时放在图的底边
        left: 'center',
        top: 'bottom',
    },
    tooltip: {
		trigger: 'item' //鼠标移动到节点上会显示数据，这里没有使用formatter自定义显示内容
	},
    grid: { 
		top: 30,//网格的位置，这里下调了30px
		left: 0,
		right: 0,
		bottom: 0,
		containLabel: true //containLabel：含坐标轴的刻度标签
                   //true的时候是表示上面的top等条件决定了，坐标轴标签在内的所有内容所形成的矩形的位置，这样防止标签溢出
	},
    radar: {  //只适用于雷达图的组件
			splitNumber: 4, // 雷达图圈数设置
			indicator: [  //雷达图的指示器，用于指定图中的 变量，可以单独设置颜色属性
				{
					text: '数学抽象',
					max: 100
				},
				{
					text: '逻辑思维',
					max: 100
				},
				{
					text: '数学建模',
					max: 100
				},
				{
					text: '直观想象',
					max: 100
				},
				{
					text: '数学运算',
					max: 100
				},
				{
					text: '数据分析',
					max: 100
				}
			],
			name: { //统一设置颜色字体
				textStyle: {
					color: '#f6c45f',
					fontSize: 16
				}
			},
			radius: 130, //雷达图的半径
			splitArea: { //分割区域设置
				areaStyle: { //分割区域的样式设置
					color: (function () { 
						let colors = [];
						for(let i = 0;i < 4;i++) {
							colors.push(new Echarts.graphic.RadialGradient(
								0.5, 0.5, 1.0,
								[{
									offset: 0.5,
									color: 'rgba(248, 243, 234,1)'
								},{
									offset: 0.4,
									color: '#fff'
								}]
							),);
						}
						return colors;
					})()
                    //在设置颜色时候，因为背景图是一个渐变的背景图，所以引用的是
                    //Echarts.graphic.RadialGradient这个方法，这个渐变是中心渐变，还有一个线性渐变，需要的自己去查，
                    //一样的用法，然后每一层都是一样的渐变，所以用了一个自执行的函数让他遍历出四个来
				},
				splitLine: { //分割区域分隔线的样式设置
                    show: true,
					lineStyle: {
						color: '#ddd'
					}
				}
			}
		},
}