实现无数据的柱子在trigger中不显示echarts

最新推荐文章于 2024-09-11 11:31:40 发布

胆大王-

最新推荐文章于 2024-09-11 11:31:40 发布

阅读量454

点赞数

分类专栏： vue与elementUI 文章标签：前端 echarts

本文链接：https://blog.youkuaiyun.com/wulikunbing/article/details/129625332

版权

vue与elementUI 专栏收录该内容

42 篇文章

订阅专栏

没有数据的柱子置为null，但是trigger还是会显示该柱子的信息，如下图所示，此时我想让它不显示，就用formatter判断了一下，只显示value值有数据的，完整代码如下：

option = {
tooltip: {
    trigger: 'axis',
    formatter:function(param){
      var toolShow = param[0].name;
      for(let i=0;i<param.length;i++)
        if(param[i].value!==undefined)
          toolShow+="<br>" + param[i].marker + " " + param[i].seriesName+":"+param[i].value
      return toolShow;
    }
},
legend: {},
xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed']
    }
],
yAxis: [
    {
      type: 'value'
    }
],
series: [
    {
      name:'blue',
      type: 'bar',
      data: [320, 100,500]
    },
    {
      name:'green',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [120, 132,2]
    },
    {
      name: 'orange',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [220, null,100]
    },


]
};