echarts图表动态刷新数据不能请空问题 转载.
ztt项目中如果执行一次查询时间区间的历史数据，显示历史曲线图，再执行一次其他时间区间的查询，如果查询区间没有数据或有不同的其他数据，那么需要将上次查询的折线图的数据首先要清空更新，然后再用新查询到的数据填充显示。关键代码如下。如果不清空，会导致上次的查询的曲线图遗留的问题，图得不到更新。顾工提到的实时数据监控页面的不刷新问题除了session超时外，还有一种不刷新的原因就是上次数据没有清空，导致页面不刷新，因此要先清空然后赋予新的值。示范代码如下：
//气温-折线图
myChart_line = echarts.init(document.getElementById('wendu1'));
option_line11.series[0].data=[null];//这行很关键，要清空上次的数据。
for (var i = 0; i < data_ret.length; i++) {
option_line11.series[0].data[i]=[data_ret[i].data_time,data_ret[i].temperatur];
}
option_line11.title.text = '气温(℃)';
myChart_line.setOption(option_line11);
另外一篇文章觉得后面写的不错，转载如下
看文章的最后。可能会有用，但是我的问题是用上面提到的方案解决的。下面的可供参考
悬赏园豆：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>
按正常来 你的这种写法是可以的，应该也哪段有问题，如果找到不，你可以尝试直接重新加载这个报表
我之前的就是很野蛮的直接重新加载，也是没有问题的
http://www.cnblogs.com/zery/p/5132065.html
你的刷新得重新初始化表格，为不只是重新绑定数据
不然之前的最后一条数据会遗留下来
感谢两位的回答，提供了一些思路。
重新看了下API，发现 myChart.clear();这个方法可以解决问题，是最简单的。
在myChart.setOption(option);之前使用这个方法。问题得到解决。
浙公网安备 33010602011771号