標籤：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" "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>
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);}
ECharts首頁：http://echarts.baidu.com/
ECharts Java 類庫：http://git.oschina.net/free/ECharts
ECharts Java 動態載入資料
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
