2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
2016年10月优秀小版主
2016年8月优秀小版主2016年7月优秀小版主优秀小版主2015年7月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2014年11月论坛优秀版主
本帖子已过去太久远了，不再提供回复功能。Echarts通过Ajax实现动态数据加载_Linux编程_Linux公社-Linux系统门户网站
你好，游客
Echarts通过Ajax实现动态数据加载
来源：Linux社区&
作者：Dreamer-1
Echarts（3.x版）官网实例的数据都是静态的，实际使用中往往会要求从服务器端取数据进行动态显示，官网教程里给出的异步数据加载很粗略，下面就以官网最简单的实例为例子，详细演示如下过程：1.客户端通过ajax发送请求；2.服务器端Servlet接收请求；3.生成json数据并返回给客户端；4.客户端接收数据后显示。
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"&
&meta http-equiv="Content-Type" content="text/ 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&
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div id="main" style="width: 600height:400"&&/div&
&script type="text/javascript"&
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
text: '异步数据加载示例'
tooltip: {},
data:['销量']
yAxis: {},
series: [{
name: '销量',
type: 'bar',
});　　&/script&
看到了吧，现在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"&
&meta http-equiv="Content-Type" content="text/ 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&
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div id="main" style="width: 600height:400"&&/div&
&script type="text/javascript"&
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
text: '异步数据加载示例'
tooltip: {},
data:['销量']
yAxis: {},
series: [{
name: '销量',
type: 'bar',
myChart.showLoading();
//数据加载完之前先显示一段简单的loading动画
var names=[];
//类别数组（实际用来盛放X轴坐标值）
var nums=[];
//销量数组（实际用来盛放Y坐标值）
type : "post",
async : true,
//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "TestServlet",
//请求发送到TestServlet处
data : {},
dataType : "json",
//返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
for(var i=0;i&result.i++){
names.push(result[i].name);
//挨个取出类别并填入类别数组
for(var i=0;i&result.i++){
nums.push(result[i].num);
//挨个取出销量并填入销量数组
myChart.hideLoading();
//隐藏加载动画
myChart.setOption({
//加载数据图表
data: names
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: nums
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
2.服务器端Servlet接收请求
客户端的请求url是&TestServlet&，那我们得先在web.xml配置以下映射：
&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年就没有再更新了& （日更：发现Google出品的Gson也蛮好用的，重点是很小巧，只需引入一个jar就搞定，用法也很简单）
简单介绍一下jackson的用法：
①：先去下载 jackson-core.jar，jackson-annotations.jar，jackson-databind.jar（都是2.x版本，jackson官网不知为何不提供服务了&这三个jar让我一阵好找）
②：在项目的项目WEB-INF/lib下引入这三个jar
然后就可以在TestServlet里使用jackson提供的工具类了。（关于jackson的详细用法，这里贴一下官网教程：）
TestServlet代码如下：
import java.io.IOE
import java.util.*;
import javax.servlet.ServletE
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import com.fasterxml.jackson.databind.ObjectM
public class TestServlet extends HttpServlet {
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
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/ charset=utf-8");
response.getWriter().write(json);
TestServlet类中用到的自定义的Product类代码如下：
public class Product {
//类别名称
public Product(String name, int num) {
this.name =
this.num =
public String getName() {
public void setName(String name) {
this.name =
public int getNum() {
public void setNum(int num) {
this.num =
4.客户端接收数据后显示
客户端接受服务器数据并解析后，就可以正常显示图表数据了：
本文永久更新链接地址：
相关资讯 & & &
& (04月26日)
　　　同意评论声明
　　　发表
尊重网上道德，遵守中华人民共和国的各项有关法律法规
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
本站管理人员有权保留或删除其管辖留言中的任意内容
本站有权在网站内转载或引用您的评论
参与本评论即表明您已经阅读并接受上述条款百度ECHARTS 饼图使用心得 处理data属性 - Ricky_Huang - 博客园
做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的.
今天来说说我使用echarts的饼图的心得.
先给大家看一下简单地效果图:(鼠标移动到1.0时)
使用echarts,可以去官网&/下载完整源码或者定制自己需要的模块.
使用起来很简单,首先先引用js源文件,再在js中初始化即可:
&&script src="/js/echarts.js"&&/script&
&div id="main" style="width: 100%;height:600overflow: visible"&&/div&
var myChart = echarts.init(document.getElementById('main'));//声明一个ehcarts对象var option = {
title : {//显示标题
text: 'BossApp版本信息',
textStyle: {
fontSize: '20',
color:'#333',
fontWeight: 'normal'
tooltip: {//鼠标移到模块上时,弹出框的内容
trigger: 'item',
//formatter: "{a} &br/&{b}: {c} ({d}%)"
//formatter: "{a} &br/&{b}"
formatter: function (obj) {
return obj.name.content
//legend: {
orient: 'vertical',
show:true,
align: 'left',
data:["1.0","2.0","3.0","4.0","5.0","6.0"]
name:'版本信息',
type:'pie',
//selectedMode: 'single',
radius: ['50%', '75%'],
avoidLabelOverlap: false,
formatter: function (obj) {
return obj.name.title
show: true,
position: 'inner',//文字显示位置,如上图中的1.0,1.1字样
textStyle: {
fontSize: '14',
fontWeight: 'normal'
emphasis: {
//show: true,
position: 'inner',
textStyle: {
fontSize: '14',
fontWeight: 'normal'
color:['#4fb8e3','#898989','#898989','#898989','#898989','#898989'],
labelLine: {
show: true
//{value:335, name:'1.0版本',selected:true},
{value:335, name:{
title:versionInfo[5].version,
content:versionInfo[5].html
{value:310, name:{
title:versionInfo[4].version,
content:versionInfo[4].html
{value:234, name:{
title:versionInfo[3].version,
content:versionInfo[3].html
{value:135, name:{
title:versionInfo[2].version,
content:versionInfo[2].html
{value:200, name:{
title:versionInfo[1].version,
content:versionInfo[1].html
{value:200, name:{
title:versionInfo[0].version,
content:versionInfo[0].html
]};&/script&myChart.setOption(option);//配置生成的echarts,canvas的界面与有option决定注意option的data这个属性.在官方文档上,都是写的data:[{value:100,name:ricky},{value:101,name:ricky1},.......],然后tooltip默认的显示内容就为data里面的name属性.上面的例子中,versionInfo是一个变量,通过访问后台接口获取的一个对象.versionInfo有version与html这两个属性,假如你需要将versionInfo的html属性显示在tooltip中.怎么办呢?我试过直接指定name:versionInfo.html.但是没有用.经过几次实验,发现将name当成一个对象进行处理,再设置tooltip的formatter,
formatter: function (obj) {
return obj.name.content
}这样搞定了,但由于此时legend的data与series的data不一致,所以无法展示出下图的效果
阅读(...) 评论()
Powered by:
Copyright & Ricky_Huang7125人阅读
这几天我在工作中用到了echarts开发报表。每次查询出来的数据都是新的，但是echart展现的图形报表却还是之前的数据。网上找了搜索了很多次也没能解决，后面加了技术群才解决的。
我开始已经确定是报表缓存的问题了，并不是数据的问题，但苦于找不到解决的办法，查看相关文档也没找到(可能是没仔细找)，其实主要是用到了echarts的clear()方法。请看如下代码：
requirejs.config({
baseUrl : &/js/pub/&,
&f& : &jquery.form&,
&u& : &util&
var xAixsData = []; //曲折线X轴类目
var npsData = [],qualityData = [],deliverData = [],serviceData = [],
priceData = [],versionTypeData = [],packingData = []; //曲折线数据
define([ &f&,&u& ], function(f,u) {
var fn = {
init : function() {
biz.init();
biz.bind();
var biz = {
init : function() {
//biz.event.npsOpChoose();
//$(&.npsOptions & span:first&).click();
biz.event.npsOpChooseCensus();
bind : function() {
$(&#search_btn&).on(&click&, biz.event.npsOpChooseCensus);
npsOpChoose : function(){
$(&.npsOptions & span&).toggle(
function(){
$(this).addClass(&opChooseSpan&);
biz.event.npsOpChooseCensus();
function(){
$(this).removeClass(&opChooseSpan&);
//获取曲折线类目及数据
getChartData : function(){
//初始化坐标轴、数据集
xAixsData = []; //曲折线X轴类目
npsData = [],qualityData = [],deliverData = [],serviceData = [],
priceData = [],versionTypeData = [],packingData = []; //曲折线数据
params = $(&input&,&#querys&).serializeArray();
url:&/bx/getMonthNPSData&,
type:&GET&,
data:params,
async:false,
dataType:&json&,
success:function(data){
if(undefined != data){
for(var i=0;i&data.i++){
xAixsData[i] = data[i].nps_
npsData[i] = (data[i].nps * 100).toFixed(2);
qualityData[i] = (data[i].quality_nps * 100).toFixed(2);
deliverData[i] = (data[i].deliver_nps * 100).toFixed(2);
serviceData[i] = (data[i].service_nps * 100).toFixed(2);
priceData[i] = (data[i].price_nps * 100).toFixed(2);
versionTypeData[i] = (data[i].version_type_nps * 100).toFixed(2);
packingData[i] = (data[i].packing_nps * 100).toFixed(2);
complete:function(XMLHttpRequest, textStatus){
if(textStatus == &error&){
alert(&报表统计数据获取失败!&);
//趋势图表方法
npsOpChooseCensus : function(){
var month1 = $(&#month1&).val();
var month2 = $(&#month2&).val();
if(&& == month1 || && == month2){
alert(&请选择完整的月度区间！&);
if(month1 &= month2){
alert(&开始月份必须小于结束月份&);
biz.event.getChartData();
//报表数据
chartTitle = ['NPS','质量','交期','服务','报价','打版','物流'];
chartData = [
& & & & & &name:'NPS',
& & & & & &type:'line',
& & & & & &//stack: '总量',
& & & & & &data:npsData,
& & & & & &smooth : true
& & & & & &name:'质量',
& & & & & &type:'line',
& & & & & &//stack: '总量',
& & & & & &data:qualityData,
& & & & & &smooth : true
& & & & & &name:'交期',
& & & & & &type:'line',
& & & & & &//stack: '总量',
& & & & & &data:deliverData,
& & & & & &smooth : true
& & & & & &name:'服务',
& & & & & &type:'line',
& & & & & &//stack: '总量',
& & & & & &data:serviceData,
& & & & & &smooth : true
& & & & & &name:'报价',
& & & & & &type:'line',
& & & & & &//stack: '总量',
& & & & & &data:priceData,
& & & & & &smooth : true
& & & & & &name:'打版',
& & & & & &type:'line',
& & & & & &//stack: '总量',
& & & & & &data:versionTypeData,
& & & & & &smooth : true
& & & & & &name:'物流',
& & & & & &type:'line',
& & & & & &//stack: '总量',
& & & & & &data:packingData,
& & & & & &smooth : true
//图表参数数据
option = {};
option = {
& &tooltip : {
& & & &trigger: 'axis',
& & & &formatter:function(params){
var res = params[0][1];
& & & & & &for (var i = 0, l = params. i & i++) {
& & & & & & & &res += '&br/&' +params[i][0]+& : &+params[i][2]+&%&;
& & & & & &}
& & & & & &
& & & & & &}
& &legend: {
& & & &data:chartTitle,
& & & &x: &left&
& &toolbox: {
& & & &show : true,
& & & &feature : {
& & & & & &mark : {show: true},
& & & & & &dataView : {show: true, readOnly: false},
& & & & & &magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
& & & & & &restore : {show: true},
& & & & & &saveAsImage : {show: true}
& &calculable : true,
& &xAxis : [
& & & & & &type : 'category',
& & & & & &boundaryGap : false,
& & & & & &/*axisTick : {
& & & & & &
show : true,
& & & & & &
interval : 0
& & & & & &},*/
& & & & & &data : xAixsData
& &yAxis : [
& & & & & &type : 'value',
& & & & & &
axisLabel : {
formatter : function (value){return value + '%';}
& &series : chartData
var monthLineChart = echarts.init(document.getElementById(&npsMonthCensus&));
//清空画布，防止缓存
monthLineChart.clear();
monthLineChart.setOption(option);
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：12622次
排名：千里之外
(1)(1)(1)(2)(1)(1)Ajax获取到数据放入echarts里不显示的原因分析及解决办法
作者：web郭乐
字体：[ ] 类型：转载 时间：
在做一个需要用到echarts地图的项目的时候，成功通过ajax获取到了后台提供的数据，并生成了想要的JSON串。但是，放到echarts option.series[0].data里，获取不到数据。在生成的地图上无法看到你从后台获取到的值，下面小编给大家分享我的解决办法，需要的朋友参考下
在做一个需要用到echarts地图的项目的时候，成功通过ajax获取到了后台提供的数据，并生成了想要的JSON串。但是，放到echarts option.series[0].data里，获取不到数据。在生成的地图上无法看到你从后台获取到的值。翻遍百度和必应，给出的答案五花八门，仍旧未解决问题，最后还是一个同事大牛给解决的，在此分享给大家。希望对大家有帮助，，，，
废话不多说，直接上码：
$(function () {
var data = [];
function setOption(data){
var myChart = echarts.init(document.getElementById('main'));
//window.onresize = myChart.
var option = {
text: '全国...分布图',
// subtext: '纯属虚构',
tooltip : {
trigger: 'item'
// legend: {
// orient: 'vertical',
// x:'left',
// data:['iphone3','iphone4','iphone5']
dataRange: {
x: 'left',
y: 'bottom',
text:['高','低'], // 文本，默认为数值文本
color:['#ff5e5e', '#ffa25e', '#ffd05e','#fce6b2','#e1dbcd'],
calculable : true
// toolbox: {
// show: true,
// orient : 'vertical',
// x: 'right',
// y: 'center',
// feature : {
// mark : {show: true},
// dataView : {show: true, readOnly: false},
// restore : {show: true},
// saveAsImage : {show: true}
// roamController: {
// show: true,
// x: 'right',
// mapTypeControl: {
// 'china': true
series : [
name: '...',
type: 'map',
mapType: 'china',
roam: false,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
myChart.setOption(option);
//$.getJSON('HotspotServlet',function(data){
//option.series[0].data=data.
// 为echarts对象加载数据
//myChart.setOption(option);
//获取...排行数据
function getMapData(limit){
url:'http://127.0.0.1/api/adminunit/score/top/'+limit,
type:'post',
dataType:'JSON',
success:function(objdata){
//var str = JSON.parse(objdata);
for(var i = 0;i & objdata.i ++){
var dId = parseInt(objdata[i].id);
//var dName="天津市";
//if(dId==1){
// dName="北京市";
var dName = objdata[i].
var dScore = parseInt(objdata[i].score);
var oneData = {};
var oneData = {id:dId,name:dName,value:dScore};
data.push(oneData);
console.log(data);
//option.series[0].data=
setOption(data);//执行setOption函数。传参
getMapData(2);
里面最重要的就是从后台获取到的数据是通过传参的形式放到echarts里的。
当时我做的时候未通过传参的形式，在echarts里获取到的数据始终是空的。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具