ECharts Java 动态加载数据,echartsjava
来源:互联网 发布:linux nc 编辑:程序博客网 时间:2024/06/07 11:05
1、前台jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><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首页:http://echarts.baidu.com/
ECharts Java 类库:http://git.oschina.net/free/ECharts
0 0
- ECharts Java 动态加载数据,echartsjava
- ECharts Java 动态加载数据,echartsjava
- ECharts Java 动态加载数据,echartsjava
- ECharts Java 动态加载数据
- echarts动态加载数据
- Echarts动态加载数据
- 使用echarts动态加载数据
- Echarts动态加载数据demo
- echarts加载动态数据---实时统计
- Echarts ajax动态加载json数据
- echarts动态加载折线图数据demo
- ECharts动态加载数据(简单)
- echarts动态加载折线图数据demo
- Echarts的使用以及动态加载数据
- Ajax实现Echarts动态数据加载
- Echarts通过Ajax实现动态数据加载
- Echarts实现饼状图数据动态加载
- Echarts动态加载地图数据(Dynamic load Echarts map data)
- VirtualBox+mininet网络配置手记
- 仿IOS7日期选择控件(新)
- cellForRowAtIndexPath不执行
- 我们和他们,究竟谁是傻X? | 华尔街黑历史(一)
- SOUI开篇之作
- ECharts Java 动态加载数据,echartsjava
- iOS 页面组织 显示规则
- android-Location Strategies
- 使用mailx发送邮件
- State Threads 回调终结者
- TAO和ACE在Windows平台下的编译与安装
- 递归求平均数
- appium的几点总结
- Linux下配置hadoop2.2.0集群