[JavaScript知识库]echarts雷达图样式配置

1. 雷达图背景颜色
2. 雷达图网格颜色
3. indicator文字颜色
4. 数据区域边框颜色
5. 雷达图内部射线颜色
6. 雷达图的圈数
7. 雷达图每圈具体数值的显示
8. 具体数值拐点样式

function getRadarChart(){
      var option = {
          radar: {
              shape: 'square', //设置雷达图形状，值有circle、square,默认为方形
              splitNumber: 5, // 雷达图圈数设置
              indicator: [	//不同的参照条件，可以设定最大值和最小值
                  { name: '渠道1', max: 65000},
                  { name: '渠道2', max: 16000},
                  { name: '渠道3', max: 30000},
                  { name: '渠道4', max: 52000},
                  { name: '渠道5', max: 38000},
                  { name: '渠道6', max: 25000}
              ],
              axisLine: {  // 设置雷达图中间射线的颜色
                  lineStyle: {
                      color: '#c0c0c0',
                  },
              },
              splitArea : {  //设置图表颜色，show的值为true
                  show : true,
                  areaStyle : {
                  	  // color:"#c1ddf8", //一般设置方式
                  	  //设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr)
                  	  //a ,b,c,d值可为0，1 a:1表示arr中的颜色右到左；c:1 arr中的颜色左到右
					  //b:1表示arr中的颜色下到上；d:1表示arr中的颜色上到下
                      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                          {offset: 0, color: '#c1ddf8'}, // 0% 处的颜色 
                          {offset: 1, color: '#1e83e4'}// 100% 处的颜色
                      ], false)
                  }
              },
              splitLine : { //网格颜色设置
                  show : true,
                  lineStyle : {
                      width : 1,
                      color : '#1e83e4',
                  },
              },
              name:{ //修改indicator文字的颜色
                  textStyle:{
                      color:"#4f4f4f"
                  }
              }
          },
          series: [{
              name: '受理渠道分类',
              type: 'radar',
              symbol: 'circle', // 单个数值点的样式，还可以取值'rect','angle'等
              symbolSize: 6, // 数值点的大小
              data: [
                  {
                      value: [4200, 3000, 20000, 35000, 30000, 18000],
                      name: '渠道分类',
                      itemStyle: { //该数值区域样式设置
                            normal: {
                                color: 'rgba(255,225,0,.3)', //背景颜色，还需设置areaStyle
                                lineStyle: {
                                    color: 'rgba(255,225,0,.3)', //边框颜色
                                },
                            },
                        },
                        label: {  //显示value中具体的数值
                            normal: {
                                show: true,
                                textStyle:{  //更改数值样式
                                    color:'orange'
                                }
                            },
                        },  
                        areaStyle: { //设置区域背景颜色透明度
                            normal: {
                                width: 1,
                                opacity: 0.8,
                            },
                        },                
                    }
              ]
          }]
      };
        return option
    }

效果显示：