堆叠区域图数据筛选echarts cross配置项内容和展示

本作品可以实现数据筛选,对于数据为0的不显示tooltip图例,可以指定,数值为0显示暂无数据

配置项如下
          var res = ''
    var projectArray =[]
    var colorArray =['#D48265','#61A0A8"','#2F4554','#B43F3D']
    var showDetails=''
option = {
    title: {
        text: '堆叠区域图'
    },
    tooltip : {
        trigger: 'axis',
		formatter: function (params) {
		    for(var i =0;i<params.length;i++){
		        if(params[i].value!='0'){
                projectArray.push('</br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+colorArray[i]+'"></span>'+params[i].seriesName+':'+params[i].value+'人');
              }
		    }
		    if(projectArray.length!=0){
		      showDetails =''+params[0].name+projectArray.join("");
              projectArray=[]
              return showDetails
		    }else{
		      showDetails = ''+params[0].name+'</br>各项暂无数据';
              projectArray=[]
              return showDetails
		    }
              
          },
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data:['门诊人数','急诊人数','住院人数','在院人数']
    },
    toolbox: {
        feature: {
            saveAsImage: {
                
            }
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'门诊人数',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
           data:[120, 132, 101, 0, 90, 230, 0]
        },
        {
            name:'急诊人数',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[0, 182, 191, 234, 290, 330, 0]
        },
        {
            name:'住院人数',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[150, 232, 201, 0, 190, 0, 0]
        },
        {
            name:'在院人数',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[0, 332, 301, 334, 390, 330, 0]
        },
        
    ]
};

    
截图如下