应朋友请求，今天发表一篇关于百度Echarts和流行的Highcharts，前端报表整合详解说明。
1. 百度Echarts
1. 准备环境，js资源和选择页面
下载echarts .js（开发者建议下载源码包）
下载选择符合需求的页面（报表页面找符合需求的样式，后面会整合数据）
（1） 小熙选择的echarts.js是4.2.0的
（2）前端页面是（小熙按照自己的习惯重新排布了下页面，加入了Jquery）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.js"></script>
<script src="js/echarts.js"></script>
<script type="text/javascript">
$(function () {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '某站恶搞同座', //主标题文本
subtext: '纯属虚构', //副标题文本
x: 'center' //标题水平安放位置
}, calculable: true, //是否启用拖拽重计算特性，默认关闭
series: [{ //数据内容
name: '访问来源', //系列名称，如启用legend，该值将被legend.data索引相关
type: 'pie', //图表类型，必要参数！
radius: '55%', //半径
center: ['50%', '60%'], //圆心坐标
data: [{ //数据
value: 335,
name: '待定中'
//
},
{
value: 310,
name: '上课睡觉'
},
{
value: 234,
name: '浏览网页'
},
{
value: 135,
name: '迷糊中过去'
},
{
value: 1548,
name: '感觉自己是个智障'
}
]
}],
tooltip: { //提示框，鼠标悬浮交互时的信息提示
trigger: 'item', //触发类型，默认数据触发，可选值有item和axis
formatter: "{a} <br/>{b} : {c} ({d}%)", //鼠标指上时显示的数据 a（系列名称），b（类目值），c（数值）, d（占总体的百分比）
backgroundColor: 'rgba(0,0,0,0.7)' //提示背景颜色，默认为透明度为0.7的黑色
},
legend: { //图例，每个图表最多仅有一个图例。
orient: 'vertical', //布局方式，默认为水平布局，可选值有horizontal(竖直)和vertical(水平)
x: 'left', //图例水平安放位置，默认为全图居中。可选值有left、right、center
data: ['待定中', '上课睡觉', '浏览网页', '迷糊中过去', '感觉自己是个智障']
},
toolbox: { //工具箱，每个图表最多仅有一个工具箱。
show: true, //显示策略，可选为：true（显示） | false（隐藏）
feature: { //启用功能
// mark: { //辅助线标志
// show: true
// },
dataView: { //数据视图
show: true,
readOnly: false //readOnly 默认数据视图为只读，可指定readOnly为false打开编辑功能
},
restore: { //还原，复位原始图表 右上角有还原图标
show: true
},
saveAsImage: { //保存图片（IE8-不支持），默认保存类型为png，可以改为jpeg
show: true,
type:'jpeg',
title : '保存为图片'
}
}
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});
</script>
</head>
<body>
<div id="main" style="height: 500px"></div>
</body>
</html>
<!--简单更换数据可忽略-->
<!--1.创建div容器，有标识有大小-->
<!--2.导入Echarts文件-->
<!--3.获取div容器-->
<!--4.准备填充数据option-->
<!--3.填充并执行-->
2. 数据整合
其实整合Echarts，只需修改data即可，本案例有两处data，所以修改两处就ok了。
附上提取完data的页面
data由后台传入（注意data数据拼接完，一定要和取代的原data格式一致）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.8.3.js"></script>
<script src="js/echarts.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
url : "/echart/option",
type : "GET",
statusCode : {
200 : function (data) {
// echarts后台拼接的字符串需要，从冒号后开始截取（起始头），传入的字符串需要用eval转义为json对象
var dataEchartsList = eval(data.dataEchartsList);
var dataEchartsNmae = eval(data.dataEchartsNmae);
// 调用初始化和显示方法
echart(dataEchartsList,dataEchartsNmae);
},
500 : function () {
message.alert("服务器内部错误")
}
}
});
function echart(data1,data2) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '小白商店', //主标题文本
subtext: '纯属虚构', //副标题文本
x: 'center' //标题水平安放位置
}, calculable: true, //是否启用拖拽重计算特性，默认关闭
series: [{ //数据内容
name: '数据统计', //系列名称，如启用legend，该值将被legend.data索引相关
type: 'pie', //图表类型，必要参数！
radius: '55%', //半径
center: ['50%', '60%'], //圆心坐标
data: data1
// { //数据
// value: 335,
// name: '待定中'
// //
// },
// {
// value: 310,
// name: '上课睡觉'
// },
// {
// value: 234,
// name: '浏览网页'
// },
// {
// value: 135,
// name: '迷糊中过去'
// },
// {
// value: 1548,
// name: '感觉自己是个智障'
// }
}],
tooltip: { //提示框，鼠标悬浮交互时的信息提示
trigger: 'item', //触发类型，默认数据触发，可选值有item和axis
formatter: "{a} <br/>{b} : {c} ({d}%)", //鼠标指上时显示的数据 a（系列名称），b（类目值），c（数值）, d（占总体的百分比）
backgroundColor: 'rgba(0,0,0,0.7)' //提示背景颜色，默认为透明度为0.7的黑色
},
legend: { //图例，每个图表最多仅有一个图例。
orient: 'vertical', //布局方式，默认为水平布局，可选值有horizontal(竖直)和vertical(水平)
x: 'left', //图例水平安放位置，默认为全图居中。可选值有left、right、center
// data: ['待定中', '上课睡觉', '浏览网页', '迷糊中过去', '感觉自己是个智障']
data: data2
},
toolbox: { //工具箱，每个图表最多仅有一个工具箱。
show: true, //显示策略，可选为：true（显示） | false（隐藏）
feature: { //启用功能
// mark: { //辅助线标志
// show: true
// },
dataView: { //数据视图
show: true,
readOnly: false //readOnly 默认数据视图为只读，可指定readOnly为false打开编辑功能
},
restore: { //还原，复位原始图表 右上角有还原图标
show: true
},
saveAsImage: { //保存图片（IE8-不支持），默认保存类型为png，可以改为jpeg
show: true,
type:'jpeg',
title : '保存为图片'
}
}
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
});
</script>
</head>
<body>
<div id="main" style="height: 500px"></div>
</body>
</html>
附上后台拼接业务代码：
package com.chengxi.test.tg.controller;
import com.chengxi.product.domain.User;
import com.chengxi.product.vo.EchartData;
import com.chengxi.test.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;
@RestController
@RequestMapping(value = "/echart")
public class EechartController {
@Autowired
private UserService userService;
@GetMapping(value = "/option")
public ResponseEntity<EchartData> selectAll(){
try {
// 查询数据库数据
List<User> users = userService.selectAllUser();
// 开始拼接
String echartDate = "[";
String echartName = "[";
for (User u:users
) {
echartDate += "{ value:"+u.getUid()+",name:\""+u.getMail()+"\"},";
echartName += ("\""+u.getMail()+"\",");
}
// 截取多余的逗号
echartDate = echartDate.substring(0, echartDate.length() - 1);
// 结束echartDate拼接
echartDate += "]";
// 打印查看数据格式是否一致
System.out.println("echartDate:"+echartDate);
// 截取多余的逗号
echartName = echartName.substring(0, echartName.length() - 1);
// 结束echartNmae拼接
echartName += "]";
// 打印查看数据格式是否一致
System.out.println("echartNmae:"+echartName);
// 封装到EchartData对象中
EchartData echartData = new EchartData();
echartData.setDataEchartsList(echartDate);
echartData.setDataEchartsNmae(echartName);
// 响应回ajax
return new ResponseEntity<>(echartData,HttpStatus.OK);
} catch (Exception e) {
e.printStackTrace();
return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
}
}
}
如果只是测试，而不想查询数据库的话。可在后台传格式相同的字符串即可。
附上效果图：
其实最后的总结就是在准备完环境之后，把原data数据修改为自己的data数据即可（后台传入，格式一致）。
2. 流行Highcharts
1. 准备环境，js资源和选择页面
下载Highcharts
在官方下载选择页面
（极力推荐，在本地下载包中选择需求的页面）点击下载完的Highcharts，进如样式模板首页选择
如图：
（1）小熙下载的是Highcharts-6.1.4：
其实只需导入三个js就可以完成基本需求（一个核心js，两个模块功能js），小熙为了测试所以就全导入了。
如果还想需要其他功能，还可以从功能模块中导入对应的js。
如图：
（2）前端页面是（小熙按照自己的习惯重新排布了下页面，加入了Jquery）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highcharts Example</title>
<style type="text/css">
</style>
<script src="../Echarts/js/jquery.js"></script>
<script src="js/code/highcharts.js"></script>
<script src="js/code/modules/exporting.js"></script>
<script src="js/code/modules/export-data.js"></script>
<script type="text/javascript">
$(function () {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
2. 整合数据
个人感觉整合Highcharts要容易些，因为只需修改series即可，只有一处。
附上提取完series的页面：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highcharts Example</title>
<style type="text/css">
</style>
<script src="js/jquery-1.8.3.js"></script>
<script src="js/code/highcharts.js"></script>
<script src="js/code/modules/exporting.js"></script>
<script src="js/code/modules/export-data.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
url: "/highEchartrs/series",
type: "GET",
statusCode: {
200: function (data) {
var eval1 = eval(data);
alert("data:"+data);
highChart(eval1);
},
500: function () {
$.message.alert("抱歉数据加载失败");
}
}
});
});
function highChart(seriesData) {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: '测试数据'
},
subtitle: {
text: '小标题效果'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series:
seriesData
// [{
// name: 'Tokyo',
// data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
//
// }, {
// name: 'New York',
// data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
//
// }, {
// name: 'London',
// data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
//
// }, {
// name: 'Berlin',
// data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
//
// }]
});
}
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
附上后台拼接series的业务代码：
package com.chengxi.test.tg.controller;
import com.chengxi.product.domain.User;
import com.chengxi.test.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@RequestMapping(value = "/highEchartrs")
public class HighEchartrsController {
@Autowired
private UserService userService;
@GetMapping(value = "/series")
public ResponseEntity<String> selectHighEcharts(){
// 查询数据库数据
List<User> users = userService.selectAllUser();
// 开始拼接，因为只写了一条数据，所以name直接就指定了，多条数据定义每条拼接就好
String series = "[{ name:\"用户邮箱\",data:[";
for (User u:users
) {
series += u.getUid()+",";
}
// 截取多余的逗号
series = series.substring(0, series.length() - 1);
// 结束series拼接
series += "]}]";
// 查询拼接格式，是否正确
System.out.println(series);
// 响应回ajax
return new ResponseEntity<>(series,HttpStatus.OK);
}
}
如果只是测试，也可直接返回格式相同的字符串。
附上效果图：
总结的话，其实都没那么难，借用官网的样式模板，自己修改series数据即可完成。
3. 附加功能介绍
1.Echarts提供的基础功能
第一个是：变换为数据视图
第二个是：样式还原，相当于刷新
第三个是：下载保存，当前页面为图片
2. Highcharts提供的基础功能
注意Highcharts从6.x开始新增了下面的四个功能，之前是没有的
如果是辅助功能的话，Highcharts更好些。但是Echarts的GL实例也不错。喜好，因人而异吧。
本次分享就到此结束了。
（本文仅供学习交流，如有转载请注明出处）
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
