ECharts Java 动态加载数据

1、前台JSP页面

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>ECharts</title><script type="text/javascript" src="${ctx}/plugins/echarts-2.2.1/echarts.js"></script><script type="text/javascript" src="${ctx}/plugins/jquery-1.8.3/jquery-1.8.3.min.js"></script><script type="text/javascript">// 配置路径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();});</script></head><body><div id="chart" style="width: 580px;height: 420px;margin: 0 auto;border: 1px solid gray;"></div></body></html>2、后台JSON数据

protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {String[] categories = {"鞋", "衬衫", "外套", "牛仔裤"};Integer[] values = {80, 50, 75, 100};Map<String, Object> json = new HashMap<String, Object>();json.put("categories", categories);json.put("values", values);JsonUtils.writeJson(json, request, response);}

3、最终实现效果

ECharts首页：

ECharts Java 类库：

，你可以这样理解 impossible(不可能)–I'm possible (我是可能的)。

相关文章：

你感兴趣的文章：

标签云：