实现Echarts中数据的动态获取
Echarts 是用javascript 展示的 要动态的的获取数据 可以用 AJAX 获取后台数据
一般是通过ajax加数据请求过来，然后进行echarts的图表渲染
1.客户端通过ajax发送请求先绘制一个最简单的Echarts图表：
（这里就直接贴上代码了，直接用的是官网教程里异步数据加载和更新里的代码）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="echarts.min.js"></script>
<!-- 引入jquery.js -->
<script type="text/javascript" src="jquery-1.12.3.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
</script>
</body>
</html>
看到了吧，现在option中的xAxis和yAxis里的data都是空值。待会儿我们会用从服务器取回的数据去”填满“它。
下面贴上补充了ajax部分的完整前端代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="echarts.min.js"></script>
<!-- 引入jquery.js -->
<script type="text/javascript" src="jquery-1.12.3.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names=[]; //类别数组（实际用来盛放X轴坐标值）
var nums=[]; //销量数组（实际用来盛放Y坐标值）
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "TestServlet", //请求发送到TestServlet处
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
for(var i=0;i<result.length;i++){
names.push(result[i].name); //挨个取出类别并填入类别数组
}
for(var i=0;i<result.length;i++){
nums.push(result[i].num); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: nums
}]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
</body>
</html>
2.服务器端Servlet接收请求
客户端的请求url是’TestServlet‘，那我们得先在web.xml配置以下映射：
<servlet>
<servlet-name>TestServlet</servlet-name>
<servlet-class>test.TestServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>TestServlet</servlet-name>
<url-pattern>/TestServlet</url-pattern>
</servlet-mapping>
然后就来着手写处理客户端请求的TestServlet啦！
3.生成json数据并返回给客户端
生成Json数据要用到额外的jar包，这里我使用的jackson，json-lib 2010年就没有再更新了… （2016-5-3日更：发现Google出品的Gson也蛮好用的，重点是很小巧，只需引入一个jar就搞定，用法也很简单）
简单介绍一下jackson的用法：
①：先去http://mvnrepository.com/下载 jackson-core.jar，jackson-annotations.jar，jackson-databind.jar（都是2.x版本，jackson官网不知为何不提供服务了…这三个jar让我一阵好找）
②：在项目的项目WEB-INF/lib下引入这三个jar
然后就可以在TestServlet里使用jackson提供的工具类了。（关于jackson的详细用法，这里贴一下官网教程：http://wiki.fasterxml.com/JacksonInFiveMinutes）
TestServlet代码如下：
package test;
import java.io.IOException;
import java.util.*;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
public class TestServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Product> list = new ArrayList<Product>();
//这里把“类别名称”和“销量”作为两个属性封装在一个Product类里，每个Product类的对象都可以看作是一个类别（X轴坐标值）与销量（Y轴坐标值）的集合
list.add(new Product("衬衣", 10));
list.add(new Product("短袖", 20));
list.add(new Product("大衣", 30));
ObjectMapper mapper = new ObjectMapper(); //提供java-json相互转换功能的类
String json = mapper.writeValueAsString(list); //将list中的对象转换为Json格式的数组
//System.out.println(json);
//将json数据返回给客户端
response.setContentType("text/html; charset=utf-8");
response.getWriter().write(json);
}
TestServlet类中用到的自定义的Product类代码如下：
package test;
public class Product {
private String name; //类别名称
private int num; //销量
public Product(String name, int num) {
this.name = name;
this.num = num;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
}
4.客户端接收数据后显示
客户端接受服务器数据并解析后，就可以正常显示图表数据了：
Echarts 是用javascript 展示的 要动态的的获取数据 可以用 AJAX 获取后台数据。
实现Echarts中数据的动态获取
答：1.客户端通过ajax发送请求 先绘制一个最简单的Echarts图表：（这里就直接贴上代码了，直接用的是官网教程里异步数据加载和更新里的代码）<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ECharts <!-- 引入 echarts.js --...
如何使用echarts在节点显示动态数据及添加提示文本
答：1、每个节点显示动态数据，这个其实可以通过配置项完成，在series数据绑定中，可以使用原本的配置项itemStyle中的标签格式化完成，如下：代码如下，如果需要修改文字显示的样式，则需另外配置项（如font-style,font-weigth等）完成{ name: '其中：少数民族', type: 'line', data: ssmz, markPoint : { ...
Echarts如何在坐标轴上移动数据?
答：1、如果也是共用一个x轴，那蓝色数据的位置，决定于该数据的x坐标啊（你这里的话，就是时间），你把x坐标改对了，蓝色数据的位置就对了；2、如果蓝色数据使用的是另一个隐藏的x轴，那你就按需求调整那个隐藏的x轴的方向/位置呗 另外，如图：你看，line的series的data可以传入颜色，你可以把红蓝两...
echarts图形中各部件的移动
答：由于实际生产中，我们的数据会与示例数据有很大不同，导致图表中各组件出现堆叠的情况，这个时候就需要对图表中的组件位置进行调整。基本上每个参数中都有left，right，bottom，top来控制对应组件的移动。下面是各组件的移动方式：在grid参数中进行设置 left参数：控制左边距离 ，如果设置为center则为居中（lef...
echarts 动态加载数据
答：define PRICE 30 main(){ int num,total;num=10;total=num* PRICE;printf(“total=%d”,total);} ? 用标识符代表一个常量，称为符号常量。? 符号常量与变量不同，它的值在其作用域内不能改变，也不能再被赋值。? 使用符号常量的好处是：? 含义清楚；? 能做到“一改全改”...
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载...
答：首先是要连接数据库，这部分代码在connect.php中，请下载源码查看。然后就是sql查询，读取表echarts_map中的数据，最后以json格式返回。输出json格式数据 MySQL最后提供mysql数据表结构信息，数据信息可以下载源码后，将sql导入你的mysql中即可，注意演示时修改connect.php的数据库配置信息。CREATE TABLE IF ...
echarts.js怎么根后台数据动态更新数据显示
答：echarts.js根后台数据动态更新数据显示：function initDefaultChart(ec){ echarts = ec;var list_devData = ${pointDataMassage};/* console.info(list_devData); */ var str = "";for (var one in list_devData){ /* console.info("one",list_devData[one]); */ var id_data =list_...
在aspnet怎么用Echarts做出动态的数据图形
答：选择要填充的单元格，选择数据区域，并自动填充数据。
Echarts关于饼图data中数据如何动态填充?
答：var chart = eval('[ { "counts":3, "region":"东城区" }, { "counts":2, "region":"朝阳区" }, { "counts":5, "region":"海淀区" } ]');var length = chart.length;var arrays = new Array();for(var i = 0l i < length; i++){ arrays[i] = { value:chart...
Echarts如何向饼状图添加动态数据
答：先把动态数据封装成为一个符合echarts格式的数组，如下所示 var datas = [{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'} ],然后在如下设置 option = { title : { text: ...
