Echars实例—正六边形雷达图

目录

1.实验模型介绍

1.1. 业务背景

1.2. 数学模型与应用

2.前置条件

3.数据集

3.1. 数据描述

3.2. 特征说明

4.实验内容

4.1.预期效果

4.2.实验步骤

a）步骤预期

b）具体步骤

c）步骤结果

5.实验结果

6.实验完整代码

7.参考资料

7.1.关键原理、理论

7.2.扩展阅读

8.常见问题

---

1.实验模型介绍

1.1. 业务背景

本次实验通过可视化工具Echarts来对六部电影根据五种不同的因素的某网站电影评分，用雷达图进行直观的展示，是人们快速的综合了解哪部电影的质量较高。

1.2. 数学模型与应用

无

2.前置条件

1.能够使用jQuery Ajax加载数据；

2.能够掌握Echarts的基本用法；

3.掌握Echarts雷达图的绘制;

3.数据集

3.1. 数据描述

本实验用到的目标数据来自：模拟数据

3.2. 特征说明

特征名称	特征解释	数据类型	特征说明
list.name	因素	String	非空值
list.value	不同电影的评分	数组	非空值
list2.name	电影名称	String	非空值
list2.max	评分最高分	int	非空值

4.实验内容

4.1.预期效果

使用Echarts对数据进行可视化，在雷达图中直观的展示这六部电影的各五种因素的评分高低。

4.2.实验步骤

a）步骤预期

进行雷达图的绘制。

b）具体步骤

Step 1：加载js文件

在jsp页面中加载jQuery、echarts插件，参考代码如下：

Step 2: 为ECharts准备一个具备高宽的 DOM 容器

Step3 : 进行Echarts初始化

Step4 : 设置option

title是标题组件，lengend是图例组件，展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示，radar是雷达图坐标系组件，只适用于雷达图，indicator是雷达图的指示器，用来指定雷达图中的多个变量（维度），series表示系列列表，每个系列通过 type 决定自己的图表类型。参考代码如下：

var option={
	 title: {
	        text: '某网站评分雷达图'
	    },
	    legend: {
	        data: ['人物角色', '悬念','情绪','剧情','总体']
	    },
	    radar: {
	        // shape: 'circle',
	        name: {
	            textStyle: {
	                color: '#fff',
	                backgroundColor: '#999',
	                borderRadius: 3,
	                padding: [3, 5]
	           }
	        },
	        indicator: []
	    },
	    series: [{
	        name: '各要素评分',
	        type: 'radar',
	        // areaStyle: {normal: {}},
	        data : []
	    }]
};

Step5 : 加载数据

  通过 jQuery 工具异步获取数据，使用JQury Ajax异步加载方式加载json数据到雷达图中，参考代码如下：

$.ajax({
	type:'get',
	url:'data/leida.json',
	dataType:"json",
	success:function(result){
		myChart.setOption({
			radar: {
				indicator: result.list2
			},
			series: [{
				data:result.list
			}]
        });
	},
error: function (errorMsg) {
    //请求失败时执行该函数
    alert("图表请求数据失败!");
    myChart.hideLoading();
}
});

Step6：图形显示

myChart.setOption(option);	

c）步骤结果

5.实验结果

通过绘制某网站评分雷达图可以直观的看出使用这六部电影的各五种因素的评分高低。

6.实验完整代码

7.参考资料

7.1.关键原理、理论

Echarts学习参考资料:

http://echarts.baidu.com/index.html

7.2.扩展阅读

《数据可视化之美》Julie Steele / Noah Iliinsky编著  机械工业出版社2011-6

8.常见问题

1、图形加载不出来？

解答：WEB-INF下lib文件夹中的相关jar包没导入、图形数据加载不成功、数据格式不符合、js文件导入路径出错等。