美文网首页让前端飞
echart清空折线图数据

echart清空折线图数据

作者: 如烟灬 | 来源:发表于2018-12-31 23:00 被阅读4次

    如何在获取新的数据前清空echarts折线图、柱状图中所有的折线和柱子?


            在echarts的操作实际运用中,经常发生在生成一个甚至是多个折线图和柱状图的前面需要清除之前生成折线图或者是柱状图,但是又不能确定在用新的数据绑定之前生成的是多少个折线图或者是柱状图的情况。在这里我们就实际操作解释一下如何处理这种情况。

    介于可能有部分同学对echarts的配置还不够了解,首先配置折线图的参数:

    设置好折线图参数以后,实例化echats,执行完下面两行代码就可以生成折线图了。
    var myChart = echarts.init(document.getElementById("echarts的ID"));

    myChart.setOption(option);

    ***重点来了:

    下面举例在点击完id名为BTN的按钮后清除折线图:

    $("#BTN").click(function(){

    for (var i = 0; i < option.series.length; i++) {

              option.series[i].data = [];

              option.series[i].name = "";

            }

            myChart.setOption(option);

    })

    如上执行完点击事件后,页面中的echarts中的折线和折线名字就会全部消失,核心思想就是:获取到option配置series中折线图的条数,然后循环series中的data中的数据,让他等于一个空集,并且将他的名字等于空集,然后再实例一下就可以啦~

    是不是很简单,嘿嘿~

    相关文章

      网友评论

        本文标题:echart清空折线图数据

        本文链接:https://www.haomeiwen.com/subject/nstglqtx.html