小程序canvas层级过高的问题?
发布于 6 年前 作者 kpan 5506 次浏览 来自 问答

https://developers.weixin.qq.com/s/oVRJ68mY7llD

底部的tab导航栏是自己写的,echarts图表使用e-canvas写的,现在echarts层级过高盖在了tab上面,tab是使用了cover-view的

底部导航栏代码

echarts:


function initChart(canvas, width, height,dpr{
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);
  // 控制显示条数
  // var start = dataAxis.length - 6;
  // var end = dataAxis.length - 1;
  let option = {
    color: ["#3466CC"],
    grid: {
      left: '3%',
      right: '3%',
      bottom: '10%',
      top: '10%',
      width: '90%',
      containLabel: true
    },
    dataZoom: [{
      type'inside',
      start: 3,
      endValue:5
    }],
    xAxis: {
      type'category',
      boundaryGap: false,
      axisLine: {//X轴线条
        show: false
      },
      axisTick: {//X轴刻度
        show: false
      },
      data: ['01-21''01-22''01-23''01-24''01-25''01-26''01-27''01-28''01-29']
    },
    yAxis: {
      type'value',
      axisLine: {//Y轴线条
        lineStyle: {
          color: '#ccc'
        }
      },
      axisTick: {//Y轴刻度
        show: false
      }
    },
    series: [{
      type"line",
      data: [578544620436500360780854665],
    }]
  };
  chart.setOption(option);
  return chart;
}
2 回复

你给你底部导航栏加个背景色试试?

因为看起来底部导航栏是已经把canvas遮住了,

只不过没背景色导致canvas透出来了

你可以试试这样,tabbar的高度你肯定知道的。你构建一个body的盒子。盒子绝对定位,把那些图表的canvas全部丢进去。这个盒子的高度用css函数去计算。高度登陆屏幕的高度减去tabbar的高度,这也应该可以解决你这个问题。

回到顶部