html52.com
我爱小程序-开发者交流社区

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

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

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

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

要如何处理折线图的层级问题?<view class="container log-list">
  <block wx:for="{{logs}}" wx:key="t

要如何处理折线图的层级问题?<view class="container log-list">
  <block wx:for="{{logs}}" wx:key="t

要如何处理折线图的层级问题?<view class="container log-list">
  <block wx:for="{{logs}}" wx:key="t

<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() {


  }
})




网友回复

Su_Ginny:

z-index 调大不行吗

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

真正的个人免签约支付接口

云免签H5支付