首先搞清楚,什么是ECharts?
ECharts,一个使用 JavaScript 实现的开源可视化库。
ECharts支持数据类型
支持直接传入包括二维表,key-value 等多种格式的数据源。常用的key-value格式数据、如json和HashMap都是key-value的数据存储方式。
简单介绍json和HashMap两种数据结构
JSON建构于两种结构:
1、 “名称/值”对的集合。 不同的语言中,它被理解为对象(object),记录(record),结构(struct),字典(dictionary),哈希表(hash table),有键列表(keyed list),或者关联数组 (associative array)。
数据格式:
{
"站长": "soso,QQ:8446666",
"域名": "https://www.sojson.com",
"开发语言": "最牛逼的语言——Java ^_^",
"编码": "UTF-8"
}
2、 值的有序列表。 在大部分语言中,它被理解为数组(array)。
{
"技术使用": [
"SpringMVC",
"Mybatis ",
"Freemarker",
"Shiro"
],
"数据存储": [
"Redis",
"RDS",
"阿里云OSS"
]
}
数组是值(value)的有序集合。一个数组以”[”(左中括号)开始,"]"(右中括号)结束。值之间运用 “,”(逗号)分隔。
不难理解,"技术使用"就是一个变量(key), 值是包含一个条目的数组.每个条目是一个变量的记录。
Java 提供两种不同的类型
1、内置数据类型: java提供了八种基本数据类型。六种数据类型(四个整数型,两个浮点型),一种字符类型,一种布尔型
如:Int是java的原始数据类型,Integer是java为int提供的封装类。Java为每个原始类型提供了封装类,int的默认值为0,Integer的默认值为null。
2、引用数据类型:
1、对象、数组都是引用数据类型
2、所有引用类型的默认值都是null
举例:User user = new User(“yandongfa”, 22);
Java为每个原始类型提供了封装类
原始类型 | 封装类 |
boolean | Boolean |
char | Character |
byte | Byte |
short | Short |
int | Integer |
long | Long |
float | Float |
double | Double |
5 分钟上手 ECharts
第一步:获取 ECharts(下载库)
获取官方源码包后构建。通过 jsDelivr 等 CDN 引入等等
第二步:引入 ECharts
通过标签方式直接引入构建好的 echarts 文件
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
第三步:官方实列代码讲解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>myProject</title>
<!-- 引入 lib/echarts.custom.min.js -->
<script src="lib/echarts.custom.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
// 绘制图表。
echarts.init(document.getElementById('main')).setOption({
series: {
type: 'pie',
data: [
{name: 'A', value: 1212},
{name: 'B', value: 2323},
{name: 'C', value: 1919}
]
}
});
</script>
</body>
</html>
[
{name: 'A', value: 1212},
{name: 'B', value: 2323},
{name: 'C', value: 1919}
]
从中可以看出他需要的数据类型,这是一个json数组
此时它接受的是json格式的数据,所以后台返回json数据填充进去,我们就可以动态绘制数据图表
数据请求过程如下:
1.客户端通过ajax发送请求获取json数据;
2.控制层controller接收请求;
3.获取mysql数据,转为Json格式并返回给客户端;
4.客户端接收数据后显示。
实列项目说明(统计各个专业考试及格人数)
效果实列图如下
1.客户端通过ajax发送请求
部分重要代码如下
<script type="text/javascript">
//#start -----------------------------初始化开始--------------
loadData();
function loadData(){
var myChart = echarts.init(document.getElementById('main'));//基于准备好的dom,初始化echarts实例
// 指定图表的配置项和数据
var names=[]; //类别数组(实际用来盛放X轴坐标值)
var values=[]; //及格人数数组(实际用来盛放Y坐标值)
//数据加载完之前先显示一段简单的loading动画
myChart.showLoading();
$.ajax({
type: "post",
async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url: "/online/examOnline/examCharts",
data : {},
dataType : "json", //返回数据形式为json
success: function(result){
//请求成功时执行该函数内容,result即为服务器返回的json对象
console.log(result);
if (result) {
for(var i=0;i<result.length;i++){
names.push(result[i].name); //挨个取出考试名称并填入类别数组
values.push(result[i].passNum); //挨个取出及格人数并填入类别数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption(
{
title: {
/*text: '各场考试人数及格统计'*/
},
tooltip : {
trigger : 'axis',
showDelay : 0, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'line' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
y2: 100 //增加柱形图纵向的高度
},
legend: {
data:['各场考试人数及格统计']
},
xAxis: {
data: names,
axisLabel:{
textStyle:{
color:"#656566",
fontWeight:"bold", //文字粗细bold bolder lighter 100 | 200 | 300 | 400...
fontFamily:"sans-serif", //字体系列
fontSize:12 //字体大小
},
interval:0, //横轴信息全部显示
rotate: 25 //25度角倾斜显示
},
name : '考试名称' //显示在轴上的标题
},
yAxis: {
axisLabel:{
textStyle:{
color:"#000"
}
},
name : '及格/人数' //显示在轴上的标题
},
color : [ '#e6254c' ],
series: [{
name: '各场考试人数及格统计',
type: 'line',
data: values
}]
}
);
}
},
error: function(){
toastr.error('系统忙,请稍后再试');
top.location.reload();
}
});
}
</script>
这是我后端接口地址 url: “/online/examOnline/examCharts”,
success: function(result) 成功回调后我们可以打印出数据类型看看,是不是我们需要的数据格式(json),通过控制台输出打印可以看出,这正是我们需要的json数据而且是》》》》Json对象。
简单说明Json对象和Json字符串
1>Json对象:(最显著的特征:对象的值可以用 “对象.属性” 进行访问)
{
name: "严东发"
}
2>json字符串:(所谓字符串:单引号或者双引号引起来)
{
"name": "严东发"
}
2、控制层controller接收请求和获取mysql数据,通过@ResponseBody注解将list集合转为Json数据格式并返回给客户端;
@RequestMapping(value = "/examCharts")
@ResponseBody
public List<Exam> getExamEcharts(){
//创建ArrayList集合:接受查询返回的数据
List<Exam> examList = examService.getExamEcharts();
System.out.println("集合打印输出:"+examList);
return examList;
}
集合打印输出如下:
[Exam(id=null, name=java编程基础测试, subjectId=null, startTime=null, endTime=null, avaliableTime=0, questionNum=0, totalScore=0, passScore=0, singleQuestionNum=0, checkboxQuestionNum=0, judgeQuestionNum=0, paperNum=0, examedNum=0, passNum=1, createTime=null), Exam(id=null, name=大数据入门测试, subjectId=null, startTime=null, endTime=null, avaliableTime=0, questionNum=0, totalScore=0, passScore=0, singleQuestionNum=0, checkboxQuestionNum=0, judgeQuestionNum=0, paperNum=0, examedNum=0, passNum=0, createTime=null),省略......]
总结:上面实际上就是接受页面请求,然后获取数据库数据,保存到list集合(包括ArrayList和LinkedList这两个类),然后list转json格式的数据,作为json对象返回前台页面。
Service层,以及接口实现类等省略,直接给xml
<select id="getExamEcharts" resultType="com.digit.online.pojo.Exam">
select name,passNum from sys_exam
</select>
3.客户端接收数据后显示
success:function() 成功后的回调函数,接受数据成功后使用
1》初始化两个空数组
var names=[];
var values=[];
2》遍历循环json对象
for(var i=0;i<result.length;i++){
names.push(result[i].name); //挨个取出考试名称并填入考试名称数组
values.push(result[i].passNum); //挨个取出及格数并填入及格人数数组
}
3》设置图表实例的配置项以及数据
myChart.setOption
4》开始重构图表数据,也就是把获取到的数据填入进去。
data: names,
data: values
5》ECharts各种属性请看官方讲解,太多不细说https://www.echartsjs.com/zh/api.html#echarts
ECharts各种配置项请看官方讲解,https://www.echartsjs.com/zh/option.html#title
完结,喜欢点个赞吧!