项目路径

饼图动态获取数据的两种方式

前台代码

Insert title here

//引入两个js文件

//展示图的div，需要设置宽度高度，以及设置id

var myChart = echarts.init(document.getElementById('main'));

option = {

tooltip: {

trigger: 'item',

formatter: "{a}
{b}: {c} ({d}%)"

},

legend: {

orient: 'vertical',

x: 'left',

data:[]

},

series : []

};

//加载数据

jQuery.ajax({

url:"index/getPieData.do", //访问后台的路径

type:'get',

dataType:'json',

success:function(jsons){

var Item = function(){

return {

name:'',

type:'pie',//柱状图

radius: ['50%', '70%'],

avoidLabelOverlap: false,

label: {

normal: {

show: false,

position: 'center'

},

emphasis: {

show: true,

textStyle: {

fontSize: '30',

fontWeight: 'bold'

}

}

},

labelLine: {

normal: {

show: false

}

},

data:[]

}

};

var Series = [];

var arr = [];

for(var i=0;i < jsons.legends.length;i++){

var it = new Item();

it.name = jsons.legends[i];

arr.push({

name : jsons.nameList[i],

value : jsons.valueList[i]

});

it.data = arr;

Series.push(it);

}

option.legend.data = jsons.legends; // 设置legend

option.series = Series; // 设置图表

myChart.setOption(option);// 重新加载图表

},

error:function(){

alert("数据加载失败！请检查数据链接是否正确");

}

});

// 初次加载图表(无数据)

myChart.setOption(option);

后台的代码

package com.controller;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import org.springframework.stereotype.Controller;

import org.springframework.ui.ModelMap;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import com.client.util.Data;

@Controller

@RequestMapping("index/")

public class EchartsController {

@RequestMapping("getPieData.do")

@ResponseBody

public Map getPieDataByFree(){

Map map = new HashMap();

List valueList =new ArrayList();

valueList.add(123);

valueList.add(456);

List nameList =new ArrayList();

nameList.add("直接访问");

nameList.add("邮件营销");

String [] legends = {"直接访问","邮件营销"};

map.put("legends", legends);

map.put("nameList", nameList);

map.put("valueList", valueList);

return map;

}

}

第二种方式(前台，后台的数据格式与上面的一样)

var myChart = echarts.init(document.getElementById('main'));

option = {

tooltip: {

trigger: 'item',

formatter: "{a}
{b}: {c} ({d}%)"

},

legend: {

orient: 'vertical',

x: 'left',

data:(function(){

var arr=[];

$.ajax({

type : "post",

async : false, //同步执行

url : "index/getPieData.do",

dataType : "json", //返回数据形式为json

success : function(result) {

if (result) {

for(var i=0;i

arr.push(result.legends[i]);

}

}

},

error : function(errorMsg) {

alert("不好意思,图表请求数据失败啦!");

myChart.hideLoading();

}

})

return arr;

})()

},

series : [

{

name:'访问来源',

type:'pie',

radius : '55%',

center: ['50%', '60%'],

data : (function(){

var arr=[];

$.ajax({

type : "post",

async : false, //同步执行

url : "index/getPieData.do",

dataType : "json", //返回数据形式为json

success : function(result) {

if (result) {

for(var i=0;i

arr.push({

name : result.nameList[i],

value : result.valueList[i]

});

}

}

},

error : function(errorMsg) {

alert("不好意思,图表请求数据失败啦!");

myChart.hideLoading();

}

})

return arr;

})()

}

]

};

// 初次加载图表(无数据)

myChart.setOption(option);

折线图和柱状图的获取数据

Insert title here

var myChart = echarts.init(document.getElementById('main'));

option = {

title: {// 图表标题，可以通过show:true/false控制显示与否，还有subtext:'二级标题',link:'http://www.baidu.com'等

text: '实例'

},

tooltip : {// 这个是鼠标浮动时的工具条，显示鼠标所在区域的数据，trigger这个地方每种图有不同的设置，见官网吧，一两句说不清楚

trigger: 'axis'

},

legend: {

data:[]

},

toolbox: {

feature: {

saveAsImage: {}// 工具，提供几个按钮，例如动态图表转换，数据视图，保存为图片等

}

},

grid: {

left: '3%',

right: '4%',

bottom: '3%'// 这几个属性可以控制图表上下左右的空白尺寸，可以自己试试。

// containLabel: true

},

xAxis : [

{

type : 'category',

boundaryGap : true, //柱状图这么显示，折线图显示为false

data : []// X轴的定义

}

],

yAxis : [

{

type : 'value'// Y轴的定义

}

],

series : []// 这里就是数据了

};

//加载数据

jQuery.ajax({

url:"index/getData.do",

type:'get',

dataType:'json',

success:function(jsons){

var Item = function(){

return {

name:'',

type:'bar', //柱状图这么显示，折线图为line

data:[]

}

};

var legends = [];

var Series = [];

var json = jsons.list;

for(var i=0;i < json.length;i++){

var it = new Item();

it.name = json[i].name;

legends.push(json[i].name);

it.data = json[i].datas;

Series.push(it);

}

option.xAxis[0].data = jsons.xdata; //这块必须要写xAxis[0]

option.legend.data = legends;

option.series = Series; // 设置图表

myChart.setOption(option);// 重新加载图表

},

error:function(){

alert("数据加载失败！请检查数据链接是否正确");

}

});

// 初次加载图表(无数据)

myChart.setOption(option);

后台代码

package com.controller;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import org.springframework.stereotype.Controller;

import org.springframework.ui.ModelMap;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import com.client.util.Data;

@Controller

@RequestMapping("index/")

public class EchartsController {

@RequestMapping("getData.do")

@ResponseBody

public Map getDataByFree(){

Map map = new HashMap();

Integer[] data1 = {120, 132, 101, 134, -90, 230, 210};

Integer[] data2 = {20, 232, 11, -144, 90, 30, 90};

String [] xdata ={"a","b","c","d","e","f","g"};

map.put("xdata",xdata);

List list =new ArrayList();

Data data = new Data();

data.setName("测试数据1");

data.setDatas(data1);

Data data22 = new Data();

data22.setName("测试数据2");

data22.setDatas(data2);

list.add(data);

list.add(data22);

map.put("list", list);

return map;

}

}

package com.client.util;

public class Data {

public String name;

public Integer [] datas;

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public Integer[] getDatas() {

return datas;

}

public void setDatas(Integer[] datas) {

this.datas = datas;

}

}