微信小程序使用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 wx:if="canshow" 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';

let chart = null, chartData = {x: [], y=[] }
function initChart (canvas, width, height, dpr) {

    chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
    });
    canvas.setChart(chart);
    setCharOption(chartData);
    return chart;

}
function setCharOption(data) {
    chart.setOption({
        grid: {
          left: '14%',
          right: '5%',
          top: '15%',
          bottom: '15%'
        },
        tooltip: {
          trigger: 'axis'
        },
        dataZoom: [{
          type: 'inside',
          start: 30,
          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: data.x
        },
        yAxis: {
          type: 'value',
          axisLine:{
              lineStyle: {
                  color: '#707886'
              }
          },
          splitLine: {
              lineStyle: {
                  color: '#22416b'
              }
          }
        },
        series: [
          {
              data: data.y,
              type: 'line',
              symbolSize: 6,
              areaStyle: {}
          }
        ]
      });
}
Page({
  data: {
    canshow: false,
	ec: {
        onInit: initChart,
        // lazyLoad: true ：使用lazyLoad的话，dataZoom会失效
    }
  },
  onShow() {
  		
     setTimeout(() => {
        this.setData({canshow: true})
        chartData = {
           x: ['12:01', '13:30', '13:57', '14:20', '14:45', '15:20', '16:30','16:50','17:30','18:30','19:30','20:30'],
           y: [20, 92, 91, 234, 190, 130, 132, 10, 40, 10, 33, 12, 90]
        };
     }, 1000)
  }
})