一、效果图预览
二、准备
1.JavaScript源码运行文件，用以运行代码
需要运行文件的自行下载
http://链接：https://pan.baidu.com/s/1shmtM36HgRqC0S1OXpNWpg?pwd=yozs提取码：yozs --来自百度网盘超级会员V2的分享
https://pan.baidu.com/s/1shmtM36HgRqC0S1OXpNWpg?pwd=yozs
2.需要文本编辑器如notepad++
好用的文本编辑器能够使编辑和查错更方便，当然也可以用记事本进行编辑。
三、编写图像属性代码
1.编辑界面预览
2.完整代码
<!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>编辑完成后需要保存为html文件，否则无法运行。
四、运行
注意：html文件需要和js文件在同一个目录下，否则图像代码编辑当中引入ECharts文件时就需要指定路径。
浏览器打开html文件即可查看运行结果。
想要了解和学习更多图形配置项可浏览Echarts官网
Documentation - Apache ECharts
最后，如果内容对你有帮助，不妨点个赞！！