明
- 创建的maven项目
- 需要echarts.js和jquery.js echarts.min.js jquery-3.2.1.min.js
官网介绍
初步教程
异步加载
- 异步加载案例有加载一组数据
- 加载两组数据
- 加载饼图数据
加载一组数据
前台处理
首先看加载条形图的数据结构
option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};;可以看出，我们主要给的数据是xAxis中的data 以及series中的数据
根据官网的试例，我们先搭好结构，发送请求到后台，拿到数据后填充即可！
先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。（官网原话）
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
// 异步加载数据
$.get('data.json').done(function (data) {
// 填入数据
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});
});
在异步加载数据那里我们可以更改成发送ajax的格式请求
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "getData.action", //请求发送
dataType : "json", //返回数据形式为json
success : function(result) {
// alert(result.categories);
// alert(result.data);
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
var categories = result.categories;
for(var i=0;i<categories.length;i++){
//alert( categories[i] );
categorie.push( categories[i] ); //挨个取出类别并填入类别数组
}
var datas = result.data;
for(var i=0;i<datas.length;i++){
data.push( datas[i] ); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: categorie
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data
}]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})我们先看看服务器返回的数据结构，返回的数据是result
返回的数据是result含有一个categories数组和data数组，所以拿到数据后处理的核心代码就是这一段
-
var categories = result.categories; for(var i=0;i<categories.length;i++){ //alert( categories[i] ); categorie.push( categories[i] ); //挨个取出类别并填入类别数组 } var datas = result.data; for(var i=0;i<datas.length;i++){ data.push( datas[i] ); //挨个取出销量并填入销量数组 }
拿到数据后再填充到之前创建好的结构。
myChart.setOption({ //加载数据图表
xAxis: {
data: categorie
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data
}]
});
现在前台OK了，后台处理！
后台处理
因为需要传到前台的数据格式为json,这里使用Google的Gson包
提示一下哦，很多初学者找jar包，这个要积分，那个要积分，很痛苦的，如果你需要一些包可以来这里搜索
Maven仓库
Gson包下载地址
注释蛮清楚了，废话不多说，直接代码~
package com.wy.servlets;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
/**
* 一组数据异步加载请求处理
* @author 沪旦铭
*
*/
public class EchartsOneServlet extends HttpServlet {
private static final long serialVersionUID = 694540269429637504L;
//重写POST方法
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Gson gson = new Gson();
//传入前台的数据
Map<String,Object> map = new HashMap<String,Object>();
// categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
// data: [5, 20, 36, 10, 10, 20]
List<String> categories = Arrays.asList("衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"); //new ArrayList<String>();
List<Integer> data = Arrays.asList(5, 20, 36, 10, 10, 20); //new ArrayList<Integer>();
map.put("categories", categories);
map.put("data", data);
//设置返回类型以及编码编码，否则中文会出现乱码情况
resp.setContentType("application/json;charset=UTF-8");
//传到前台
PrintWriter out = resp.getWriter();
out.print( gson.toJson(map) );
out.flush();
out.close();
}
}
多组数据
多组数据和一组数据差不多，主要看所需要的格式
关键就是这一部分
series:[{
name: '销量', //鼠标放在柱状图上显示的文字
type: 'bar', //柱状图
data: [5, 20, 36, 10, 10, 20]
},{
name: '第二组数据', //鼠标放在柱状图上显示的文字
type: 'bar', //柱状图
data: [4, 21, 30, 21, 12, 66]
}]前端处理
<!-- 多组数据异步加载 -->
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main2" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
//初始化echarts
var myChart2 = echarts.init(document.getElementById('main2'));
// 显示标题，图例和空的坐标轴
myChart2.setOption({
title: {
text: '多组数据异步数据加载示例'
},
tooltip: {},
legend: {
data:[] //这里也需要填充 '第一组数据','第二组数据'
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量', //这个可不用写
type: 'bar', //这个可不用写
data: []
}]
});
myChart2.showLoading(); //数据加载完之前先显示一段简单的loading动画
var categorie2 = []; //类别数组（实际用来盛放X轴坐标值）
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "getDataMany.action", //请求发送
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
var categories = result.categories;
for(var i=0;i<categories.length;i++){
//alert( categories[i] );
categorie2.push( categories[i] ); //挨个取出类别并填入类别数组
}
var datas = result.data; //data返回的数值数数值 包括 name type data
var legend = []; //
var series = [];
for(var i = 0;i<datas.length;i++){
var s = datas[i];
//alert( s['name'] );
//alert( s['data'] );
legend.push(
s['name']
);
series.push({
name: s['name'],
type: 'bar',
data: s['data']
});
}
//alert(series);
myChart2.hideLoading(); //隐藏加载动画
myChart2.setOption({ //加载数据图表
legend:{
data: legend
},
xAxis: {
data: categorie2 // X坐标数值
},
series: series
});
}
},
error : function(errorMsg) { //没做出错处理
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart2.hideLoading();
}
})
</script>后台处理
后台给好数据结构即可
package com.wy.servlets;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
/**
* 多组数据异步加载请求处理
* @author 沪旦铭
*
*/
public class EchartsManyServlet extends HttpServlet {
private static final long serialVersionUID = -360655681801936072L;
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Gson gson = new Gson();
//转载数据
Map<String,Object> map = new HashMap<String,Object>();
List<String> categories = Arrays.asList("衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"); //用来填充X坐标
//用来存取多个数据
List<Object> manyList = new ArrayList<Object>();
//第一组数据
//name type data
Map<String,Object> many = new HashMap<String,Object>();
many.put("name", "第一组数据");
many.put("type", "bar");
//第一组数据
List<Integer> data = Arrays.asList(5, 20, 36, 10, 10, 20);
many.put("data", data);
//装入
manyList.add(many);
//第二组数据
Map<String,Object> many2 = new HashMap<String,Object>();
many2.put("name", "第二组数据");
many2.put("type", "bar");
//第一组数据
List<Integer> data2 = Arrays.asList(4, 10, 26, 15, 18, 20);
many2.put("data", data2);
//装入
manyList.add(many2);
map.put("categories", categories);
map.put("data", manyList);
//设置返回类型以及编码编码，否则中文会出现乱码情况
resp.setContentType("application/json;charset=UTF-8");
//传到前台
PrintWriter out = resp.getWriter();
out.print( gson.toJson(map) );
out.flush();
out.close();
}
}饼图异步加载
其实饼图和条形图类似，直接上代码吧
前端处理
<!-- 饼图异步加载 -->
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main3" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
//初始化echarts
var myChart3 = echarts.init(document.getElementById('main3'));
// 显示标题，图例和空的坐标轴
myChart3.setOption({
backgroundColor: '#FFFFFF', //设置背景颜色 #FFFFFF 2c343c
title: {
text: '饼图异步加载试列',
x: 'center' //居中显示
},
tooltip: {
show: true
},
legend: {
data:[] //这里也需要填充 '第一组数据','第二组数据'
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '',
type: 'pie',
radius: '55%', //半径 可调整饼图大小
data: [
]
}]
});
myChart3.showLoading(); //数据加载完之前先显示一段简单的loading动画
//发送请求
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "getPieData.action", //请求发送
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
var series = [];
var legend = []; //
for(var i=0;i<result.length;i++){
var res = result[i];
// alert( res.value );
legend.push( res.name );
series.push({
value: res.value,
name: res.name
});
}
myChart3.hideLoading(); //隐藏加载动画
myChart3.setOption({ //加载数据图表
tooltip:{ //设置鼠标放在图形上提示的数据格式 可不设置tooltip
trigger: 'item',
formatter: "{a}<br/>{b} : {c}({d}%)"
},
xAxis: { //隐藏X轴
show: false
},
yAxis: { //隐藏Y轴
show: false
},
legend:{
orient: 'vertical',
left: 'left',
data: legend
},
series: {
name: '访问来源',
type: 'pie', //这个类型不能少，否则js会报错
data: series
}
});
}
},
error : function(errorMsg) { //没做出错处理
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart3.hideLoading();
}
})
</script>后台处理
package com.wy.servlets;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
public class EchartsPieServlet extends HttpServlet {
private static final long serialVersionUID = 6511473073444195224L;
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//前台所需格式
// {value:235, name:'视频广告'},
// {value:274, name:'联盟广告'},
// {value:310, name:'邮件营销'},
// {value:335, name:'直接访问'},
// {value:400, name:'搜索引擎'}
Gson gson = new Gson();
List<Object> list = new ArrayList<Object>();
//数据库查询可循环处理
Map<String,Object> map = new HashMap<String,Object>();
map.put("value", 235);
map.put("name", "视频广告");
list.add(map);
Map<String,Object> map2 = new HashMap<String,Object>();
map2.put("value", 274);
map2.put("name", "联盟广告");
list.add(map2);
Map<String,Object> map3 = new HashMap<String,Object>();
map3.put("value", 310);
map3.put("name", "邮件营销");
list.add(map3);
Map<String,Object> map4 = new HashMap<String,Object>();
map4.put("value", 335);
map4.put("name", "直接访问");
list.add(map4);
Map<String,Object> map5 = new HashMap<String,Object>();
map5.put("value", 400);
map5.put("name", "搜索引擎");
list.add(map5);
//设置相应contentType
resp.setContentType("application/json;charset=UTF-8");
PrintWriter out = resp.getWriter();
out.println( gson.toJson(list) );
out.flush();
out.close();
}
}
web.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance
http://www.springmodules.org/schema/cache/springmodules-cache.xsd
http://www.springmodules.org/schema/cache/springmodules-ehcache.xsd"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
metadata-complete="true" version="3.0">
<display-name>Archetype Created Web Application</display-name>
<!-- 配置一组数据处理 -->
<servlet>
<servlet-name>echartsOneServlet</servlet-name>
<servlet-class>com.wy.servlets.EchartsOneServlet</servlet-class>
</servlet>
<!-- 配置多组数据处理 -->
<servlet>
<servlet-name>echartsManyServlet</servlet-name>
<servlet-class>com.wy.servlets.EchartsManyServlet</servlet-class>
</servlet>
<!-- 饼图 -->
<servlet>
<servlet-name>echartsPieServlet</servlet-name>
<servlet-class>com.wy.servlets.EchartsPieServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>echartsOneServlet</servlet-name>
<url-pattern>/getData.action</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>echartsManyServlet</servlet-name>
<url-pattern>/getDataMany.action</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>echartsPieServlet</servlet-name>
<url-pattern>/getPieData.action</url-pattern>
</servlet-mapping>
</web-app>整个项目请移步
效果图
1362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
