echarts 点击外部元素实现,对应图形的显示/隐藏

yuyuWu
  • 9

echarts 点击外部元素实现,对应图形的显示/隐藏

 function onclick(){

              $.ajax({
                  url: "",//请忽略这个url
                  dataType: 'jsonp',
                  jsonp: 'callback',
                  data:{
                      start_time:start,
                      end_time:end
                  }
                  ,
                  success: function (objdata) {

                      /*两个时间相减的天数*/
                      var day = (new Date(end) - new Date(start))/(24*60*60*1000);
                      var len = 0;
                      for (var i = 0; i <day; i++) {
                          var did =objdata.data.table_in[i].temp;//入管温度
                          var out1 =objdata.data.table_out[i].temp;//入管温度
                          var scale = (did/out1).toFixed(2)
                          var date =(objdata.data.table_in[i].time)
                          data.push(scale)
                          time.push(date)

                      }
                      setOption(data)
                  }
              })



        }


  $("#btn1").click(function(){
           onclick()
        })

标签:echarts

现在点击可以显示,但是,我想要的是在点击就让它隐藏,不知道怎么搞

图片描述

回复
阅读 6.8k
2 个回答

把echart.init放在外面
再声明一个flag用于控制显示隐藏

var xxx = echart.init;
var flag = false;
function onclick(){
    ajax....
    flag = true
    setOption(data)
}
$("#btn1").click(function(){
    if(flag){
        //这里根据具体需求,如果只是隐藏,则$(chartDom).hide();下面是销毁
        xxx.dispose()
    }else{
        onclick()
    }
})

看了看你下面补充的 你想实现的功能和图标中的图例(grid)类似,不过grid是在同一图表中切换
如果非要显示隐藏line的话,可以考虑在按钮中绑定如下事件

let newop = chartDom.getOption();    
newop.series = [];    //清空series,这样就图表在,无线条
chartDom.setOption(newop);

看你图中左上角的3个切换(应该是切换图表的吧),建议做成一个option,这样可以直接用echarts的grid实现3个图的切换(grid模式设置为单选),较上面重置option的方法效率高很多,

谢谢啦,那如果是隐藏掉那条折线,而不是隐藏整个元素的话,要怎么写好呢图片描述图片描述

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏