echarts图表动态刷新数据不能请空问题
0
悬赏园豆：50
[已解决问题]
解决于 2016-01-29 17:15
使用百度的echarts图表进行数据报表，后端使用json来加载数据，前端有几个button来切换不同的查询条件。实际在使用时发现echarts呈现的数据刷新不完全。
现象如下：
使用数据：
{ "data": [1, 2, 1, 2, 3, 2], "date": ["2015.12.15", "2015.12.20", "2015.12.21", "2016.01.12", "2016.01.14", "2016.01.26"], "name": "Bugs2" }
显示为：
数据为：
{ "data": [3, 2, 1, 2, 1], "date": ["2015.11.13", "2015.11.24", "2015.12.19", "2016.01.12", "2016.01.14"], "name": "Bugs2" }
显示为：
问题是：第二次加载的数据，只有五个日期的，前面的五列日期和数值都刷新了，但是第六列的数据却残留了（如蓝色框所示），使用alert显示数据也只有五组数据。
尝试了多个方法都没有解决。
另外查看“数据视图”中，数据显示是有多余这一列数据的。
我的代码如下：
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['Bugs2']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
//saveAsImage : {show: true}
}
},
xAxis : [
{
type : 'category',
data : []
}
],
yAxis : [
{
type : 'value'
}
],
series : [{name:'',type:'bar',data:[]}]
};
//有bug，不能动弹刷新
$(function() {
$('tr td a').bind('click', function() {
//alert($(this).closest('tr').find('td:eq(1)').text());
$.getJSON("/productdatas", {
product: $(this).closest('tr').find('td:eq(1)').text(),
},function(data) {
//alert(data.date);
option.xAxis[0].data = data.date;
option.series[0].name = data.name;
option.series[0].data = data.data;
alert(option.series[0].data)
myChart.setOption(option);
//myChart.setSeries(data.data);
});
});
});
}
);
</script>
最佳答案
1
按正常来 你的这种写法是可以的，应该也哪段有问题，如果找到不，你可以尝试直接重新加载这个报表
我之前的就是很野蛮的直接重新加载，也是没有问题的
http://www.cnblogs.com/zery/p/5132065.html
收获园豆：30
其他回答(4)
0
你的刷新得重新初始化表格，为不只是重新绑定数据
不然之前的最后一条数据会遗留下来
收获园豆：20
2
感谢两位的回答，提供了一些思路。
重新看了下API，发现 myChart.clear();这个方法可以解决问题，是最简单的。
在myChart.setOption(option);之前使用这个方法。问题得到解决。
官方解释：
| {self} clear | {void} | 清空绘画内容，清空后实例可用 |
链接：http://echarts.baidu.com/echarts2/doc/doc.html#实例方法
找了一上午,被你的答案轻松解决了,谢谢啦
完美。点赞
水球图不刷新问题用这个解决了，谢谢
找了大半天，还得是你
0
赞赞，也解决了我得问题
0
赞 谢谢 clear()真好用