编程知识 cdmana.com

微信小程序使用echarts不跟随页面滚动的问题

【 问题描述 】在小程序使用echarts,图表展示出来之后不跟随页面滚动,浮在最上方。
【 问题原因 】布局中含有position:fixed或absulote的元素,导致echarts图表无法滑动。
官方文件说明:canvas为原生组件故有一下的性质:bash 由于原生组件脱离在 WebView 渲染流程外,因此在使用时有以下限制: 组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。 后插入的原生组件可以覆盖之前的原生组件。 原生组件还无法在 scroll-view、swiper、picker-view、movable-view 中使用。 部分CSS样式无法应用于原生组件,例如: 无法对原生组件设置 CSS 动画 无法定义原生组件为 position: fixed 不能在父级节点使用 overflow:hidden 来裁剪原生组件的显示区域
【 解决方法 】所有父级元素(有包含ec-canvas的所有view元素)的position不可为fixed或absulote,将其改为其他,另外兄弟元素可以为position:absulote或fixed,否在还是会有重叠

以上引用自:https://blog.csdn.net/qq_25740691/article/details/81867382

echarts的使用:

  1. https://github.com/ecomfe/echarts-for-weixin 下载echarts的包,放入components里面,在需要引用的页面引用

index. json

{
    
  "usingComponents": {
    
    "ec-canvas": "../../components/ec-canvas/ec-canvas"
  },
  "navigationStyle": "custom"
}

index.wxml

<view class="my-echart">
   <!-- 在这引入echarts组件标签 -->
   <ec-canvas id="echarts_temp" canvas-id="echart_line" ec="{
    { ec }}"></ec-canvas>
 </view>

index.js

import * as echarts from '../../components/ec-canvas/echarts';
function initChart (canvas, width, height, dpr) {
    

    const chart = echarts.init(canvas, null, {
    
        width: width,
        height: height,
        devicePixelRatio: dpr
    });
    canvas.setChart(chart);
    chart.setOption({
    
      grid: {
    
        left: '14%',
        right: '5%',
        top: '15%',
        bottom: '15%'
      },
      tooltip: {
    
        trigger: 'axis'
      },
      dataZoom: [{
    
        type: 'inside',
        start: 40,
        end: 100
      }],
      color: {
    
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
        {
    
            offset: 0, color: 'rgba(79, 172, 254, 1)',
        },
        {
    
            offset: 1, color: 'rgba(47,196,154,0)',
        },
        ],
        global: false,
      },
      xAxis: {
    
        type: 'category',
        boundaryGap: true,
        data: ['12:01', '13:30', '13:57', '14:20', '14:45', '15:20', '16:30','16:50','17:30','18:30','19:30','20:30']
      },
      yAxis: {
    
        type: 'value',
        axisLine:{
    
            lineStyle: {
    
                color: '#707886'
            }
        },
        splitLine: {
    
            lineStyle: {
    
                color: '#22416b'
            }
        }
      },
      series: [
        {
    
            data: [820, 932, 901, 934, 1290, 1330, 1320,10,40,10,33,12, 90],
            type: 'line',
            symbolSize: 6,
            areaStyle: {
    }
        }
      ]
    });
    return chart;

}

Page({
    
  data: {
    
	ec: {
    
        onInit: initChart
    }
  }
})

版权声明
本文为[samscat]所创,转载请带上原文链接,感谢
https://blog.csdn.net/samscat/article/details/126182735

Scroll to Top