史上最全的ECharts讲解与使用
首先搞清楚，什么是ECharts？ECharts，一个使用 JavaScript 实现的开源可视化库。ECharts支持数据类型支持直接传入包括二维表，key-value 等多种格式的数据源。常用的key-value格式数据、如json和HashMap都是key-value的数据存储方式。简单介绍json和HashMap两种数据结构JSON建构于两种结构：1、 “名称/值”对的集合。 ...
文章共4,378字 · 阅读需要大约15分钟
首先搞清楚，什么是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
完结，喜欢点个赞吧！
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
14
0- 0
已为社区贡献5条内容
所有评论(0)