首页新闻找找看学习计划

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>
MyStitch的主页 MyStitch | 初学一级 | 园豆:143
提问于:2016-01-27 20:45
< >
分享
最佳答案
1

按正常来 你的这种写法是可以的,应该也哪段有问题,如果找到不,你可以尝试直接重新加载这个报表

我之前的就是很野蛮的直接重新加载,也是没有问题的

http://www.cnblogs.com/zery/p/5132065.html 

收获园豆:30
Zery | 大侠五级 |园豆:6069 | 2016-01-28 17:51
其他回答(3)
0

你的刷新得重新初始化表格,为不只是重新绑定数据

不然之前的最后一条数据会遗留下来

收获园豆:20
_Arnold | 园豆:635 (小虾三级) | 2016-01-28 10:29
1

感谢两位的回答,提供了一些思路。

重新看了下API,发现 myChart.clear();这个方法可以解决问题,是最简单的。

在myChart.setOption(option);之前使用这个方法。问题得到解决。

官方解释:

{self} clear {void} 清空绘画内容,清空后实例可用

 

链接:http://echarts.baidu.com/echarts2/doc/doc.html#实例方法

MyStitch | 园豆:143 (初学一级) | 2016-01-29 17:14

找了一上午,被你的答案轻松解决了,谢谢啦

 

支持(0) 反对(0) lpnsjl | 园豆:200 (初学一级) | 2018-04-02 14:00

完美。点赞

支持(0) 反对(0) 少年_jump | 园豆:200 (初学一级) | 2019-04-29 12:13

水球图不刷新问题用这个解决了,谢谢

支持(0) 反对(0) 康康123 | 园豆:200 (初学一级) | 2019-05-30 14:40
0

赞赞,也解决了我得问题

EApple | 园豆:139 (初学一级) | 2018-09-14 09:03
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册