<div class="panel-body"><div class="panel-echart" id="echart1"></div></div>
// echart1
var piedom1 = document.getElementById("echart1");
var piedChart1 = echarts.init(piedom1);
var data1 = [20, 50, 60, 60, 90, 80]
pieoption1 = {
	tooltip: {
		//雷达图的tooltip不会超出div,也可以设置position属性,position定位的tooltip 不会随着鼠标移动而位置变化,不友好
		confine: true,
		enterable: true, //鼠标是否可以移动到tooltip区域内
	},
	legend: {
		icon: 'circle',
		right: '10',
		textStyle: {
			fontSize: 14,
			color: '#fff'
		},
		itemGap: 20,
		itemWidth: 14,
		data: ['红牌', '黄牌']
	},
	radar: {
		name: {
			textStyle: {
				color: '#acc3e5',
				fontSize: 14,
			},
		},
		shape: 'polygon',
		center: ['40%', '50%'],
		radius: '60',
		scale: true,
		axisLine: {
			lineStyle: {
				color: '#122742',
			},
		},
		splitLine: {
			show: true,
			lineStyle: {
				width: 1,
				color: '#122742', // 设置网格的颜色
			},
		},
		indicator: [{
				name: '赫塔菲',
				max: 100,
			},
			{
				name: '亚拉斯加',
				max: 100,
			},
			{
				name: '佩斯齐亚',
				max: 100,
			},
			{
				name: '塞尔塔',
				max: 100,
			},
			{
				name: '马赛',
				max: 100,
			},
		],
		splitArea: {
			show: false,
		},
	},
	grid: {
		position: 'center',
	},
	polar: {
		center: ['50%', '50%'], // 默认全局居中
		radius: '0%',

	},
	angleAxis: {
		min: 0,
		clockwise: false,
		axisTick: {
			show: false,
		},
		axisLabel: {
			show: false,
		},
		axisLine: {
			show: false,
		},
		splitLine: {
			show: false,
		},
	},
	radiusAxis: {
		min: 0,
		interval: 20,
		splitLine: {
			show: false,
		},
	},
	series: [{
		name: '红牌',
		type: 'radar',
		symbol: 'circle', // 拐点的样式,还可以取值'rect','angle'等
		symbolSize: 4, // 拐点的大小
		itemStyle: {
			normal: {
				color: '#294b92',
			},
		},
		areaStyle: {
			normal: {
				color: '#20489f',
				opacity: 0.5,
			},
		},
		lineStyle: {
			width: 1,
			color: '#294b92',
		},
		label: {
			normal: {
				show: true,
				formatter: (params) => {
					return params.value;
				},
				color: '#294b92',
			},
		},
		data: [{
			value: data1,
		}, ],
	}, {
		name: '黄牌',
		type: 'radar',
		symbol: 'circle', // 拐点的样式,还可以取值'rect','angle'等
		symbolSize: 4, // 拐点的大小
		itemStyle: {
			normal: {
				color: '#6f3eb3',
			},
		},
		areaStyle: {
			normal: {
				color: '#6f3eb3',
				opacity: 0.5,
			},
		},
		lineStyle: {
			width: 1,
			color: '#6f3eb3',
		},
		label: {
			normal: {
				show: true,
				formatter: (params) => {
					return params.value;
				},
				color: '#294b92',
			},
		},
		data: [{
			value: [60, 60, 90, 80, 20, 50],
		}, ],
	}, ],
}
if (pieoption1 && typeof pieoption1 === "object") {
	piedChart1.clear();
	piedChart1.resize();
	piedChart1.setOption(pieoption1, true);
};

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注