收藏
回答

echart在小程序中层级高过一切,要如何解决?

调试器不会出现该问题,但真机调试会出现

底部一排按钮是fixed固定在下方的,但当滚动出现echart折线图时层级会比固定区域更高

要如何处理折线图的层级问题?

<view class="container log-list">
  <block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log">
    <view style="height: 500rpx;">1111</view>
    <view style="height: 500rpx;">2222</view>
    <view style="height: 500rpx;">3333</view>
    <view style="height: 500rpx;">4444</view>
    <view style="width: 100%;border: 1px solid red;height: 400rpx">
      <ec-canvas force-use-old-canvas="true"  style="width: 100%; height: 220px;" id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
    </view>
    <view style="height: 500rpx;">5555</view>
    <cover-view class="buttom">哈哈哈哈</cover-view>
  </block>
</view>




.log-list {
  display: flex;
  flex-direction: column;
  padding40rpx;
}
.log-item {
  margin10rpx;
}
.buttom{
  height100px;
  line-height100px;
  background-color: pink;
  width100vw;
  position: fixed;
  bottom0;
  text-align: center;
}


// logs.js
const util = require('../../utils/util.js')
import * as echarts from './ec-canvas/echarts';
let chart = null;
const initChart = (canvas, width, height, dpr) => {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });
  canvas.setChart(chart);
  let option = {
      grid: {
          // top: 0,
          left: '40px',
          right: '20px',
          // bottom: 0,
          width:'auto',
          height:'auto'
      },
      xAxis: {
        type'category',
        data: [123,456],
        axisLine: {
              lineStyle: {
                  color: '#909090',
                  width: 1//这里是为了突出显示加上的  
              }
          },
          splitLine: {
              show: false,
        }
      },
      yAxis: {
        type'value',
         minInterval: 1,
        axisLine: {
              lineStyle: {
                  color: '#909090',
                  width: 1//这里是为了突出显示加上的  
              }
          },
          splitLine: {
              show: true//隐藏或显示
              lineStyle:{
                  color: ['#EBEBEB'],
                  width: 1,
                  type'solid'
             }
          },


      },
      series: [
        {
          data: [12456,6 ,7 ],
          type'line',
          symbol:'none',
          color: '#FC2853'
        }
      ]
    };
  chart.setOption(option);
  return chart;
}
Page({
  data: {
    logs: [],
    ec: {
        onInit: initChart
    },
  },
  onLoad() {


  }
})




最后一次编辑于  2022-09-08
回答关注问题邀请回答
收藏

3 个回答

  • Tom 皓⃰宇⃰
    Tom 皓⃰宇⃰
    08-02

    同样的问题,请问解决了没有?

    08-02
    有用
    回复
  • 👀
    👀
    06-08

    朋友,你解决了吗

    06-08
    有用
    回复
  • Chef-Lunixy
    Chef-Lunixy
    2022-09-07

    z-index 调大不行吗

    2022-09-07
    有用
    回复 4
    • 毛
      2022-09-07
      不行....
      2022-09-07
      回复
    • Chef-Lunixy
      Chef-Lunixy
      2022-09-07回复
      弄个简化的代码片段出来,瞅瞅
      2022-09-07
      回复
    • 毛
      2022-09-08回复Chef-Lunixy
      附上了,麻烦帮我瞅瞅问题
      2022-09-08
      回复
    • Chef-Lunixy
      Chef-Lunixy
      2022-09-09回复
      我苹果真机没问题,没有安卓设备,另外,我下载的是最新版的 echarts-for-weixin
      2022-09-09
      回复
登录 后发表内容