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

echarts微信小程序组件：兼容小程序 Canvas的组件ec-canvas，可以方便地使用 ECharts，载gitHub项目。

ec-canvas 目录下有一个 echarts.js，默认echarts-for-weixin 项目发版的时对应最新版的 ECharts，可以自行从官网自定义构建，并修改文件名为echarts.js，替换ec-canvas 目录下的 echarts.js，以减小文件大小。

Echarts官方地址：Echarts官方介绍微信小程序使用Echarts

图表组件下载地址：github官网上的 ecomfe/echarts-for-weixin 项目下载

创建图表：在json配置如下：

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

 wxml 中，创建 组件：（设置force-use-old-canvas="true"  可以解决图表不跟随页面滚动问题 **）

  <view class="chart-container" >
    <ec-canvas wx:if="{{!echartsShow}}" id="mychart-dom-bar"  force-use-old-canvas="true"  
     canvas-id="mychart-bar1" ec="{{ec100}}"></ec-canvas>
  </view>

wxss 中，设置宽高： 

.chart-container {
  width: 100%;
  height: 200px;
  /* background-color: rgb(151, 112, 112); */
}

js中（重点********）

import * as echarts from '../../ec-canvas/echarts.min';

let chart = null;

Page({

  data: {
     // 图表 
    ec: {
      lazyLoad: true
    },

    zheData: [1, 0, 2, 6, 9, 8, 6, 1, 2, 1, 3, 5, 4, 1, 5, 9, 9, 8, 7, 6, 8, 9, 8, 9, 8, 2, 4, 9, 8, 7, 8],

    zhehArr: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],

  },

  onLoad: function (options) {
    this.initChart();
  },

  // 初始化组件
  initChart() {
    const data = this.selectComponent("#mychart-dom-bar");
    data.init((canvas, width, height) => {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: 1
      });
      canvas.setChart(chart);
      this.setOption();
      return chart;
    })
  },
  setOption() {
    chart.clear(); // 清除
    chart.setOption(this['getOption'](), true); //获取新数据
  },
  getOption() {
    const that = this;
    return {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: "95%",
        right: "98%",
        bottom: "95%",
        top: "95%",
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: that.data.zhehArr,
        axisTick: {
          show: false
        },
        axisLabel: {
          color: 'rgba(0,0,0,0.45)',
          fontWeight: 'bold',
          lineHeight: 14,
          padding: [10, 0, 19, 0]
        },
        axisLine: {
          lineStyle: {
            color: '#000'
          }
        },
        axisLabel: {
          color: '#fff',
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#fff',
          fontWeight: 'bold',
          lineHeight: 14,
          padding: [0, 8, 0, 0]
        },
        splitLine: {
          show: false
        }
      },
      series: [{
        data: that.data.zheData,
        name: '数据一',
        type: 'line',
        color: '#EA484D',
        smooth: true,
        symbol: 'none',
        areaStyle: {
          color: '#EA484D'
        },
      }]
    }
  },

})