小程序canvas层级过高的问题?

发布于 8 年前作者 kpan5624 次浏览最后编辑 8 年前来自 ask

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: [578, 544, 620, 436, 500, 360, 780, 854, 665],
    }]
  };
  chart.setOption(option);
  return chart;
}
2 回复
fang21
fang211 楼6 年前

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

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

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

houxiulan
houxiulan2 楼6 年前

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