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);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值