echarts implements multi-attribute radar chart

1. Preview of renderings

2. Preparation

1.JavaScript source code running file to run the code

Need to download the running file yourself

http://Link: https://pan.baidu.com/s/1shmtM36HgRqC0S1OXpNWpg?pwd=yozs Extraction code: yozs -- Sharing from Baidu Netdisk Super Member V2

https://pan.baidu.com/s/1shmtM36HgRqC0S1OXpNWpg?pwd=yozs

2. A text editor such as notepad++ is required

A useful text editor can make editing and error checking more convenient. Of course, you can also use Notepad for editing.

3. Write image attribute code

1. Editing interface preview

2. Complete code

<!DOCTYPE html>
<html>

	<head>
    		<meta charset="utf-8" />
    		<!-- 引入刚刚下载的 ECharts 文件 -->
    		<script src="echarts.min.js"></script>
  	</head>

		<body>
			<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
			<div id="main" style="width: 1200px;height:600px;"></div>

				<script type="text/javascript">
				  // 基于准备好的dom，初始化echarts实例
				  var myChart = echarts.init(document.getElementById('main')); 

				  // 指定图表的配置项和数据
				  var option = { 
							title: {
								text: '国内手机性价比对比',//标题
								left:20,      //相对左侧距离
								top:20,       //相对顶部距离
								target: 'self',
								textStyle: {
									color:'#fff',  //白
									fontSize: 25,   //字体大小
									  },
								},
							//背景颜色
							backgroundColor:'#000033',
							tooltip: {},
							radar:{
							   center:['65%','50%'],    //圆心位置
							   indicator:[
								 {name:'外观'},
								 {name:'拍照'},
								 {name:'系统'},
								 {name:'内存'},
								 {name:'屏幕'},
								 {name:'性能'},
								 ],
								 axisName: {
									  color: '#fff',//字体颜色
									  fontSize: 30,   //字体大小
									},
								},
							color: ['#59c4e6', '#fcce10', '#cbb0e3', '#7bd9a5'],//四个标签对应的颜色
							legend: {						
									data: ['华为','OPPO','VIVO','小米'],
									orient: "vertical",//纵向排列
									left:140,      //相对左侧距离
									top:100,       //相对顶部距离
									textStyle:{
										fontSize: 20,   //字体大小
										color:'#eeeeee'
										}
							
									},								

							
							series:
							[
								{
									type:'radar',
									data:[
									   {value:[80,60,80,70,70,90],name:'华为',areaStyle: {color:'#59c4e6',opacity: 0.2}},
									   {value:[90,90,70,60,82,90],name:'OPPO',areaStyle: {color:'#fcce10',opacity: 0.2}},
									   {value:[30,60,30,80,90,60],name:'VIVO',areaStyle: {color:'#cbb0e3',opacity: 0.2}},
									   {value:[50,70,80,50,65,70],name:'小米',areaStyle: {color:'#7bd9a5',opacity: 0.2}} 
								]
								}
							]//series_end
					};//op_end

				  // 使用刚指定的配置项和数据显示图表。
				  myChart.setOption(option);
				</script>

		</body>

</html>

After editing is completed, it needs to be saved as an html file, otherwise it cannot be run.

4. Operation

Note: The html file needs to be in the same directory as the js file , otherwise you need to specify the path when introducing the ECharts file in image code editing.

Open the html file in the browser to view the running results.

If you want to know and learn more graphics configuration items, you can visit Echarts official website

Documentation - Apache ECharts

Finally, if the content is helpful to you, please give it a like! !