美文网首页让前端飞
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清空折线图数据

    如何在获取新的数据前清空echarts折线图、柱状图中所有的折线和柱子? 在echarts的操作实际运用中...

  • echart使用心得

    最近在弄商城的图表数据,要用到了echart.js,echart是支持多种图表的,有折线图,饼图,柱形图等等,我们...

  • webpack+echart某折点变色

    webpack+echart某折点变色 一、echart折线图某折点变色 二、现在我们已经成功设置了异常拐点的颜色...

  • echarts 折线图如何添加点击事件

    给echarts折线图的某个点添加点击事件,并打印横纵坐标点的数据。 实现效果 点击事件 echart添加点击事件...

  • 使用echarts画多维柱状图

    前言在此之前,已经跟大家分享了如何使用echarts画折线图、双折线图、柱状图,今天跟大家分享一下使用echart...

  • echart动态加载数据之折线图

    几个重点 1》放在折线点的时候显示出相应x和y坐标相应的数据信息 2》修改图表的跟父容器的间距 3》设置折线图中折...

  • 为什么你做的折线图那么生硬?

    今天来讲解基本图表,折线图,以及折线图特有的美化技巧。我们常用的折线图有两种:折线图和带数据标记的折线图。数据标记...

  • echart 4 新特性 dataset

    用echart做图是很方便,但是如果是多维数据,数据处理起来就比较麻烦。还好echart4 出来了dataset,...

  • VUE移动端项目中使用Echart

    安装Echart依赖 在main.js中引入 在组件中使用 关于响应式 我用到的代码及注释 折线图 饼状图(环形图)

  • YII2 echart 饼图 demo

    echart 使用 视图层view.php 此次针对 echart 饼状图。控制器代码类似。 主要记录一下数据格式...

网友评论

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

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