echart 雷达图

详细信息

// 图表
var myChart = echarts.init(document.getElementById('echart'));
var option = {
	radar: {
		radius: '60%',
		axisLabel: {//坐标轴刻度标签的相关设置。
			fontSize: 12//文字的字体大小
		},
		splitLine: {
			// 是否显示网格线
			show: true,
			lineStyle: {//分隔线颜色，可以设置成单个颜色。
				color: '#FAFBFD'
			}
		},
		axisLine: {
            show: false  // 隐藏对角线
        },
		splitArea: {//坐标轴在 grid 区域中的分隔区域，默认不显示
			show: true,
			areaStyle: {//分隔区域的样式设置。
				color:'#ECF1FF'
			},
		},
		nameGap: 5,//指示器名称和指示器轴的距离
		name: {
			fontSize: 10,
			color: '#000',
			lineHeight: 12,
			formatter: function(value) {//换行
				let list = value.split("");
				let result = "";
				for (let i = 1; i <= list.length; i++) {
					if (!(i % 4) && list[i] != undefined) {
						result += list[i - 1] + '\n';
					} else {
						result += list[i - 1];
					}
				}
				return result;
			}
		},
		indicator: [{
				name: '牌照指数8.56',
				max: 10,
			},
			{
				name: '用户指数8.24',
				max: 10
			},
			{
				name: '监管指数8.54',
				max: 10
			},
			{
				name: '软件指数7.71',
				max: 10
			},
			{
				name: '风控指数8.22',
				max: 10
			},
			{
				name: '业务指数9.09',
				max: 10
			}
		]
	},
	series: [{
		name: '',
		type: 'radar',
		symbolSize: 4, //边角圆珠的大小
		lineStyle: {//线条样式
			width: 0
		},
		areaStyle: {//区域填充样式
			color: '#9DB4F7'
		},
		data: [{
			value: [8.56,8.24,8.54,7.71, 8.22, 9.09]
		}]
	}]
};
myChart.setOption(option);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84