js引入echarts 实现雷达图

引入echarts.js

<script src="../static/js/echarts.js"></script>

为echarts准备容器

<div id="main" style="width: 250px; height:250px; margin: 5px auto"></div>

配置数据展示

<script type="text/javascript">
	// 基于准备好的dom,初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	option = {
		title: {
	},
	tooltip: {},
	radar: {
	name: {
		textStyle: {
			 color: '#fff',
			 backgroundColor: '#999',
			 borderRadius: 3,
			 padding: [3, 5]
			}
		},
	   indicator: [
			 { name: '知识', max: 100},
			 { name: '技能', max: 100},
			 { name: '素质', max: 100},
		]
		},
		series: [{
		     name: '',
			 type: 'radar',
			 data : [
			     {
			         value : ["${zs}", "${jn}", "${sz}"],//后台传的数据
			     },
			     ]
			}]
	    };
	myChart.setOption(option);
	</script>

猜你喜欢

转载自blog.csdn.net/z_victoria123/article/details/85636609