echarts 的数据如何动态地和后端交互? 比较急，求助

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

Meteor

JSLint - a Javascript code quality tool

jsFiddle

D3.js

WebStorm

推荐书目

Javascript 权威指南第 5 版

Closure: The Definitive Guide

这是一个创建于 3598 天前的主题，其中的信息可能已经有所发展或是发生改变。

比如说我有一个 echarts 的地图，地图是这个：
http://echarts.baidu.com/echarts2/doc/example/map4.html
我初始化的时候 echarts 的 data:[]是为空的，但是我在页面上想做到这样的效果：

单击 2010 年按钮，就会有 2010 年的数据，地图也是 2010 年的人口地图
单击 2011 年按钮，就会有 2011 年的数据。。。。。。

也就是说， echarts 在初始化以后，如何动态地与后端服务器进行交互来改变 echarts 的 data?

echarts

地图

单击

后端

9 条回复 2016-02-25 10:49:33 +08:00

lincanbin

2016-02-19 15:52:16 +08:00

在 Ajax 回调中改变 option 中 data 的值，然后 setOption 刷新。

anonymoustian

2016-02-19 16:05:40 +08:00

@lincanbin 请问如何改变 option 中 data 的值？

anonymoustian

2016-02-19 16:08:23 +08:00

@lincanbin 我现在只想到重绘这个 echarts

lincanbin

2016-02-19 16:09:39 +08:00

@anonymoustian 如果你的 option 是一个全局变量……
这么写可能有点 dirty ，但是挺方便。

我不太确定 EC 里是否有对应的 API ，你可以查询一下 documentation 。

lincanbin

&nsp; 2016-02-19 16:13:47 +08:00

@anonymoustian 我第一个回复就告诉你了。
你重新 init 后 setOption(option, true)就是重绘。

anonymoustian

2016-02-19 16:14:33 +08:00

@lincanbin 好的谢谢您

WhoMercy

2016-02-19 16:18:21 +08:00

你可以看一下这个官方示例： http://echarts.baidu.com/gallery/editor.html?c=dynamic-data

官方的 data 是随机生成的，你需要换成 ajax 轮询交互后台获取数据

然后在
setInterval(function (){}
这个方法里设置
option.xAxis[0].data.shift();
option.xAxis[0].data.push(axisData);
option.xAxis[1].data.shift();
option.xAxis[1].data.push(app.count++);

myChart.setOption(option);
更改你需要的坐标和数据

这样就能实现动态更新数据。

whahuzhihao

2016-02-19 16:19:31 +08:00

ajax 重新设置 option 就行了
echarts 这点做的比 highcharts 简单多了不过新版本还是好多 bug

zxx1130

2016-02-25 10:49:33 +08:00

ajax 异步获取数据以后，把值重新赋给 option 里面的参数，再 setOption 就 ok 了