请教如何样让echarts后台交互从后台获取数据并展示

来源：蜘蛛抓取(WebSpider) 时间：2015-08-29 09:53 标签： echarts调用后台数据
请问怎么样让ECharts从后台获取数据并展示？
[问题点数：80分，结帖人Chen_yanxia]
请问怎么样让ECharts从后台获取数据并展示？
[问题点数：80分，结帖人Chen_yanxia]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
优秀小版主2015年7月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2014年11月论坛优秀版主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。echarts 动态获取数值，ajax后台读取
echarts 动态获取数值，ajax后台读取
动态组件option，传入动态参数，构造需要的图表
echarts开发包
引入需要的echarts包，官网下载即可，粘贴到工程文件目录内，直接复制粘贴即可 在jsp中引用需要的文件 构造取值的ajax代码，以及需要表现的option信息
载入一个div，然后刷新界面，则完成
封装的方法体还可以扩充
“动态后台”相关经验怎么样让ECharts从后台获取数据并展示_百度知道
怎么样让ECharts从后台获取数据并展示
我有更好的答案
会对人体感觉你他法国人精明能干非让他加美女的人体
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁当前访客身份：游客 [
当前位置：
发布于 日 11时,
Echarts官网的demo都采用的数据都是静态数据，本demo是在Echarts官网入门demo的基础上改的，从后台&获取数据并展示，供入门参考
代码片段(2)
1.&[代码]前端页面代码&&&&
&%@ page language="java" contentType="text/ charset=utf-8"
pageEncoding="utf-8"%&
String path = request.getContextPath();
&!DOCTYPE html&
&meta charset="utf-8"&
&title&ECharts&/title&
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div id="main" style="width: 800 height: 300px"&&/div&
&!-- ECharts单文件引入 --&
&script type="text/javascript" src="js/jquery-2.1.4.min.js"&&/script&
&script type="text/javascript" src="build/dist/echarts.js"&&/script&
&script src="/build/dist/echarts.js"&&/script&
&script type="text/javascript"&
// 路径配置
require.config({
echarts : 'build/dist'
require([ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
], function(ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip : {
show : true
legend : {
xAxis : [ {
type : 'category',
yAxis : [ {
type : 'value'
series : []
type : "POST",
url : "gettestdata",
dataType : "json",
success : function(result) {
//将从后台接收的json字符串转换成json对象
var jsonobj = eval(result);
//给图标标题赋值
option.legend.data = jsonobj.
//读取横坐标值
option.xAxis[0].data = jsonobj.
var series_arr = jsonobj.
//驱动图表生成的数据内容，数组中每一项代表一个系列的特殊选项及数据
for (var i = 0; i & series_arr. i++) {
option.series[i] = result.series[i];
//过渡控制，隐藏loading（读取中）
myChart.hideLoading();
// 为echarts对象加载数据
myChart.setOption(option);
2.&[代码]后台数据封装代码&&&&
//通过ajax请求数据 将请求的数据返回到页面进行图表的显示
@RequestMapping("gettestdata")
public void getTestData(HttpServletResponse response) {
List&String& legend = new ArrayList&String&(Arrays.asList(new String[] { "销量"}));
List&String& axis = new ArrayList&String&(
Arrays.asList(new String[] { "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" }));
List&Series& series = new ArrayList&Series&();
series.add(new Series("销量", "bar", new ArrayList&Integer&(Arrays.asList(5, 20, 40, 10, 10, 20))));
Echarts echarts = new Echarts(legend, axis, series);
response.setContentType("text/charset=utf-8");
out = response.getWriter();
Gson gson = new Gson();
String str = gson.toJson(echarts);
System.out.println("str:"+str);
out.write(str);
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
开源中国-程序员在线工具：
相关的代码(1264)
开源从代码分享开始
cobraxp的其它代码

我要回帖

更多关于 echarts调用后台数据 的文章

 

随机推荐