java中echat如何动态_ECharts Java 动态加载数据，echartsjava

1、前台jsp页面

pageEncoding="UTF-8"%>

html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

ECharts

// 配置路径

require.config({

paths: {

echarts: '${ctx}/plugins/echarts-2.2.1'

}

});

// 按需加载

require(

[

'echarts',

'echarts/chart/bar',

'echarts/chart/line'

],

function (ec) {

var chart = document.getElementById('chart');

var echart = ec.init(chart);

echart.showLoading({

text: '正在努力加载中...'

});

var categories = [];

var values = [];

// 同步执行

$.ajaxSettings.async = false;

// 加载数据

$.getJSON('${ctx}/dataAccessServlet', function (json) {

categories = json.categories;

values = json.values;

});

var option = {

tooltip: {

show: true

},

legend: {

data: ['销量']

},

xAxis: [

{

type: 'category',

data: categories

}

],

yAxis: [

{

type: 'value'

}

],

series: [

{

'name': '销量',

'type': 'bar',

'data': values

}

]

};

echart.setOption(option);

echart.hideLoading();

}

);

2、后台JSON数据

protected void doPost(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

String[] categories = {"鞋", "衬衫", "外套", "牛仔裤"};

Integer[] values = {80, 50, 75, 100};

Map json = new HashMap();

json.put("categories", categories);

json.put("values", values);

JsonUtils.writeJson(json, request, response);

}

3、最终实现效果

ECharts首页：http://echarts.baidu.com/

ECharts Java 类库：http://git.oschina.net/free/ECharts