收藏
回答

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

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 个回答

  • A notorious liar
    A notorious liar
    10-16

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

    10-16
    有用
    回复 2
    • 保持可爱🐈
      保持可爱🐈
      10-16
      我没大懂你的时候,是说类似scroll-view这样的盒子装起来,然后将多余的隐藏,只滑动这在scroll-view部分的数据的意思吗?然后我试了用这个方法,我发现canvas有被控制到,但是canvas上的echarts就不行
      10-16
      回复
    • 保持可爱🐈
      保持可爱🐈
      10-17
      应该是没有问题了,没有改代码,就是原来那样,电脑开发者工具会有问题,手机预览不会
      10-17
      回复
  • 吃鱼先生
    吃鱼先生
    10-16

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

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

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

    10-16
    有用
    回复 2
    • 保持可爱🐈
      保持可爱🐈
      10-16
      我加了背景颜色在里面的
      10-16
      回复
    • 保持可爱🐈
      保持可爱🐈
      10-17
      应该是没有问题了,没有改代码,就是原来那样,电脑开发者工具会有问题,手机预览不会
      10-17
      回复
登录 后发表内容
问题标签