我在一个界面上异步渲染数据加载了echarts,现在需要加一个遮罩层,如图效果,想问问有没有好办法?
发布于 5 年前 作者 gtao 9549 次浏览 来自 官方Issues

现在就是希望这个日历能是最高层,但是好多方法就失败了,比如position之后用z-index,都没有用,想问问有没有好办法,样式代码贴在下面

试图在echarts全部渲染完之后再渲染遮罩层,但是echarts的canvas都是异步加载的,微信小程序dom无法操作,也不知道该怎么办,想问问大家有没有好办法,下面是js代码

const app = getApp()

import * as echarts from '../../ec-canvas/echarts';

var Chart = null;

Page({

  onShareAppMessage: function (res) {

    return {

      title: '',

      path: '/pages/index/index',

      success: function () { },

      fail: function () { }

    }

  },

  data: {

    calcal: false,

    calendarData: '2008-01-01',

    calendar: 'none',

    ec: {

      lazyLoad: true // 延迟加载

    },

    ec1: {

      lazyLoad: true // 延迟加载

    },

   

  },

  onLoad: function () {

    var time = util.formatTime(new Date());

    this.setData({

      calendarData: time.split(' ')[0]

    })

    this.echartsComponnet = this.selectComponent('#lineChart');

    this.echartsComponnet1 = this.selectComponent('#barChartD');

    let params = {

      dayDate: this.data.calendarData

    }

    this.getListData(params); //获取数据

  },

  onReady() {

 

  },

  getListData (params) {

    let that = this;

    

    wx.showLoading({

      title: '加载中',

    });

   

    wx.request({

      url: url就不说了

      header: {

        "Content-Type": "application/json"

      },

      method: "GET",

      success:function(res){

        console.log(res.data.data)

        if(res.data.code == 200 && res.data.data){

          that.setData({

            HourData:res.data.data.HourData,

            DayData:res.data.data.DayData,

            calendarData:res.data.data.date.split(' ')[0]

          })

            that.init_echarts(); //初始化图表

        }else {

          wx.showToast({

            title: '暂无数据',

          })

        }

       

        wx.hideLoading()

      },

      fail:function(err){

        console.log('err=============='+err)

        wx.hideLoading()

      }

    })

  },

  //初始化图表

  init_echarts: function () {

    var that = this;

    this.echartsComponnet.init((canvas, width, height,dpr) => {

      // 初始化图表

      Chart = echarts.init(canvas, null, {

        width: width,

        height: height,

        devicePixelRatio: dpr //解决小程序视图模糊的问题,必写

      });

      Chart.clear();

      Chart.setOption(this.getOption(this.data.HourData,'line'));

      

      return Chart;

    });

  

  

  },

  getOption( data , type) {

   

    var option = { ……};

    return option;

  },

  showCalendar () {

   

  },

  changeCalendarData(e) {

   

  },


}

2 回复

echart 默认是canvas2d同层渲染。正常view使用定位 加上层级可以做到盖在canvas上了。能否提供可复现问题的代码片段。

用setData修改遮罩层展示,按理来说是重新渲染了遮罩层,但是这个位置就一直卡在中间,求指导,另外,需要柱状图点击事件,所以无法转化为图片。其次,其实已经在最上面覆盖了,点击柱状图无效,但是可以点到日历上,效果回调都是正常的,就是看着不在最上面

回到顶部