引起我使用ECharts的起因,最近一个老项目的图表功能不可使用了,发现是客户的电脑中没有安装flash插件,导致原有的图表控件功能无法加载动画展示数据图表。于此,决定改造该项目的图表插件,而选择ECharts的原因是它是一款开源的,兼容多种浏览器的,底层只依赖轻量级矢量图形库的图表插件。
ECharts的特性
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
丰富的可视化类型
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
多种数据格式无需转换直接使用
千万数据的前端展现
移动端优化
多渲染方案,跨平台使用
深度的交互式数据探索
多维数据的支持以及丰富的视觉编码手段
动态数据,可在时间状态上选择合适动画
。。。。。。
ECharts的下载
官网:Apache ECharts(PS:ECharts 目前正在 Apache 软件基金会孵化,所以之前的域名已经不再使用了)
学习推荐大家下载源代码,源代码里面包含了所有图表组件以及常见的警告和错误。若在项目中使用则可以根据需求选择合适的个性化定制。
ECharts的快速使用
这里我们可以查看帮助文档:快速上手 - Handbook - Apache ECharts
下面通过一个小demo来带大家快速上手一个例子,成功实现一个demo可以帮助大家积极学习。
第一步、先引入js支持 echarts.js
下载地址:JavawebJavaScriptEChartecharts.js图表插件-Javascript文档类资源
第二步、建一个前端页面(这里我用jsp做演示,ajax请求的数据,当然也可以在页面中定义变量将第三步的报文赋值给变量即可。)
Tips:图表里面的数据也是可以自定义的,若想通过ajax请求过来的数据渲染,直接在ajax的回调函数里面直接给option赋值或者修改也可以。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<% String path = request.getContextPath(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow-x: hidden;">
<head>
<script type="text/javascript" src="<%=path%>/javascript/echarts/echarts.js"></script>
<script type="text/javascript">
var myChart;
function initComplete(){
myChart = echarts.init(document.getElementById('div_chart_bar'));
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
getChartData();
}
function makeBarChart(x, y) {
myChart = echarts.init(document.getElementById('div_chart_bar'));
//3.初始化,默认显示标题,图例和xy空坐标轴
var option = {
tooltip: {
trigger: 'axis',// 背板顶线
axisPointer: {
type: 'shadow'// 背板线改背板条
}
},
legend: {},
// 图表边框样式(四周padding)
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
// 工具栏
toolbox: {
show : false,// 是否展示
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
// x轴
xAxis: x,
// y轴
yAxis: [
{ type: 'value' }
],
// 数据集
series: y
};
myChart.setOption(option);// 加载样式
}
// 获取数据
function getChartData() {
var names = []; //用来展示于x轴
var nums = []; //用来展示于y轴series数据
$.ajax({
url: '<%=path%>/charts/findBarChartData.do', // 替换自己的url路径
type: 'POST',
async: true,
data: {},
dataType: 'json',
success: function(results){
if (results.res) {
if (results.eChart && results.eChart.xAxis) {
names.push({
type: results.eChart.xAxis['type'],
data: results.eChart.xAxis['data']
});
} else {
top.Dialog.alert("图表数据异常");
}
if (results.eChart && results.eChart.EChartSeriesList) {
for (var i = 0; i < results.eChart.EChartSeriesList.length; i++) {
nums.push({
name: results.eChart.EChartSeriesList[i].name,
type: results.eChart.EChartSeriesList[i].type,
stack: results.eChart.EChartSeriesList[i].stack,
emphasis: results.eChart.EChartSeriesList[i].emphasis,
data: results.eChart.EChartSeriesList[i].data
});
}
} else {
top.Dialog.alert("图表数据异常");
}
var x = names;
var y = nums;
makeBarChart(x, y);// 装载图表
}
myChart.hideLoading();// 隐藏加载动画
},
error: function(){
}
});
}
</script>
</head>
<body>
<!--标头start-->
<div id="title">
<div class="biaoti">柱状图</div>
</div>
<!--内容start-->
<div id="tagContent" style="height: 260px; overflow-x: auto; overflow-y: auto;">
<div id="div_chart_bar" style="height: 300px; width: 500px;" ></div>
</div>
</body>
</html>
第三步、后端报文(下面是模拟的数据报文)
{
"eChart":
{
"EChartSeriesList":
[
{"data":["75","155","165","45","125","95","15","55","45","105"],"emphasis":{"focus":"series"},"type":"bar","name":"客户1","stack":""},
{"data":["95","195","125","35","165","155","65","25","35","15"],"emphasis":{"focus":"series"},"type":"bar","name":"客户2","stack":""},
{"data":["25","115","95","25","135","25","95","25","155","165"],"emphasis":{"focus":"series"},"type":"bar","name":"客户3","stack":""}
],
"xAxis":
{
"data":["2022-11-10","2022-11-11","2022-11-12","2022-11-13","2022-11-14","2022-11-15","2022-11-16","2022-11-17","2022-11-18","2022-11-19"],
"type":"category"
},
"yAxis":null
},
"res":true,
"message":"获取数据成功"
}
第四步、运行前端页面,这时,图表就可以展示了,怎么样,是不是很有成就感
第五步、去模板库学习更多需要的图表样式
点击要使用的图表样式可以进入模板代码页面。