百度ECharts是个非常强大的图表工具，引入百度提供的echarts.min.js文件后，只需从后台获取数据便可以图表的形式展示数据，能够更直观的查看、比较、统计数据。
这里以一个柱状图展示动态数据的小例子讲解如何使用百度ECharts。
1.首先引入需要的js文件：
<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<!-- 百度ECharts -->
<script src="<%=basePath%>js/echarts.min.js"></script>echarts.min.js自行去百度下载
2.创建columnChart.jsp，（这里可以直接去百度ECharts下载，有各式各样的柱状图）：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>柱状图</title>
<c:import url="resources.jsp"></c:import>
</head>
<body>
<!--为Echarts准备一个Div放置图表-->
<div id="main" style="width:600px;height:400px;"></div>
</body>
<script type="text/javascript">
$(function () {
//将echart初始化到div中
var myChart=echarts.init(document.getElementById("main"));
var dataAxis = [];
var data = [];
var yMax = 500;//y轴最大值
var dataShadow = [];
for (var i = 0; i < data.length; i++) {
dataShadow.push(yMax);
}
var option = {
title: {
text: '特性示例：渐变色 阴影 点击缩放',
subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
},
xAxis: {
data: dataAxis,
axisLabel: {
inside: true,
textStyle: {
color: '#fff'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#999'
}
}
},
dataZoom: [
{
type: 'inside'
}
],
series: [
{ // For shadow
type: 'bar',
itemStyle: {
normal: {color: 'rgba(0,0,0,0.05)'}
},
barGap:'-100%',
barCategoryGap:'40%',
data: dataShadow,
animation: false
},
{
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#83bff6'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'}
]
)
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#2378f7'},
{offset: 0.7, color: '#2378f7'},
{offset: 1, color: '#83bff6'}
]
)
}
},
data: data
}
]
};
var zoomSize = 6;
myChart.on('click', function (params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
myChart.dispatchAction({
type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
});
});
myChart.setOption(option) ;
});
</script>
</html>
因为我的js文件都是在resources.jsp中引入的，所以这里在columnChart.jsp中引用resources.jsp就可以了，可以根据自己的习惯引入js文件，直接复制粘贴的小白出了问题自己解决。
另外这个时候是没有数据的，接下来写后台方法传递数据给jsp。我这里的例子是用水果的销量做展示，后台代码不做赘述，看看就好，这里最好自己写，不难。
ProductMapper.xml:
<!-- 查看所有商品销量 -->
<select id="getSales" resultType="com.demo.model.Product">
select name,sales from t_product
</select>Dao层和Service层省略，其中name是水果名，sales是销量。
ProductController.java:
/**
* 获得柱状图数据
* @return
*/
@RequestMapping("/getColumnChart")
@ResponseBody
public List<Product> getColumnChart(){
List<Product> list = productService.getSales();
return list;
}最后，回到columnChart.jsp中，写上ajax方法调用刚刚写的方法，全部代码如下：
扫描二维码关注公众号，回复：
3629482 查看本文章
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>柱状图</title>
<c:import url="resources.jsp"></c:import>
</head>
<body>
<!--为Echarts准备一个Div放置图表-->
<div id="main" style="width:600px;height:400px;"></div>
</body>
<script type="text/javascript">
function getData(dataAxis,data){
$.ajax({
async: false,
url:"getColumnChart",
type:"get",
dataType:"json",
success:function(list){
for(var i =0;i < list.length;i++){
dataAxis.push(list[i].name);
data.push(list[i].sales);
}
}
})
}
$(function () {
//将echart初始化到div中
var myChart=echarts.init(document.getElementById("main"));
var dataAxis = [];
var data = [];
getData(dataAxis,data);
var yMax = 500;//y轴最大值
var dataShadow = [];
for (var i = 0; i < data.length; i++) {
dataShadow.push(yMax);
}
var option = {
title: {
text: '特性示例：渐变色 阴影 点击缩放',
subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
},
xAxis: {
data: dataAxis,
axisLabel: {
inside: true,
textStyle: {
color: '#fff'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#999'
}
}
},
dataZoom: [
{
type: 'inside'
}
],
series: [
{ // For shadow
type: 'bar',
itemStyle: {
normal: {color: 'rgba(0,0,0,0.05)'}
},
barGap:'-100%',
barCategoryGap:'40%',
data: dataShadow,
animation: false
},
{
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#83bff6'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'}
]
)
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#2378f7'},
{offset: 0.7, color: '#2378f7'},
{offset: 1, color: '#83bff6'}
]
)
}
},
data: data
}
]
};
var zoomSize = 6;
myChart.on('click', function (params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
myChart.dispatchAction({
type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
});
});
myChart.setOption(option) ;
});
</script>
</html>
加粗特别注意：ajax方法里一定要写上async: false。async. 默认是true，即为异步方式。async设置为：false,请求为同步请求，async设置为：true，则不会等待ajax请求返回的结果，会直接执行ajax后面的语句。如果不加async:false则会导致未等ajax请求返回结果就会执行后面的语句从而导致data无值从而导致图表没有数据展示。切记切记！
效果图：
