微信小程序 调用echarts及问题解决

首先从https://github.com/ecomfe/echarts-for-weixin这里下载ec-canvas文件夹，里面已经包含echarts.js文件，不用单独下载
将ec-canvas放到小程序目录下，建议放到根目录中（尽量将该目录放到主包中，以免再使用时候出现先加载子包，然后再调用，出现调用失败的问题）
ec-canvas主要的作用是把echarts中的一些鼠标事件转换成触摸事件、相关样式的渲染的转换，从而让web版的echarts可以在移动端上展现和使用

使用步骤：
1、页面的JSON文件中加入

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

根据自己的项目更换相对路径

2、页面的JS文件顶部加入

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

根据自己的项目更换相对路径

3、页面的WXML文件中加入

<view style="width:100vw;height:500rpx;">
  <ec-canvas id="bottom-echarts-canvas" canvas-id="bottom-echarts-canvas" ec="{{ec}}"></ec-canvas>
</view>

注：外层的VIEW一定要设置高宽，Echarts在绘制时，会获取外层高宽给画布

4、定义全局变量chart1

let chart1;

在onLoad中获取组件的实例

chart1 = that.selectComponent("#bottom-echarts-canvas");

5、页面的JS的DATA中加入

    ec: {
      lazyLoad: true,//如果不需要进行动态获取数据进行加载，可以设置为false
    },

6、初始化统计图

   /**
   *初始化统计图，在动态获取数据后调用此方法
   */
  initEcharts: function() {
    var that = this;
    chart1.init((canvas, width, height) => {
      const chart1Model = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      // OPTION可以从官网调整后复制到这里
      //以下为线图样例
      chart1Model.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时']
        },
        yAxis: {
          type: 'value'
        },
        legend: {
          data: ['今日', '昨日'],
          show: true,
          left: 0,
          top: 10,
        },
        color: ['#3E5BB7', "#F07043"],
        series: [{
          name: '今日',
          data: [1, 2, 3, 10, 11, 12, 13, 14, 15, 20, 20, 20, 30, 30, 30, 40, 40, 40, 50],
          type: 'line',
          smooth: true
        }, {
          name: '昨日',
          data: [25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25],
          type: 'line',
          smooth: true
        }]
      })
      return chart1Model;
    })
  },

以下为遇到的一些问题及解决

1、当按住统计图后，快速向一侧边缘移动，移动至手机屏幕外侧后，统计图消失
ec-canvas将按压事件转换为鼠标按压和鼠标移动事件，按压移动转换为鼠标移动事件，当持续按压并移动出canvas边缘后，因无法获取有效坐标点，导致统计图重新绘制出错，所以消失了
解决方案：将外侧的view的宽度设置为100vw，将横向空间填充满，如果需要设置左右间距，可以设置option中的grid属性的left来实现
注：该方法可以杜绝大部分情况下的滑动出界问题，在手机上快速滑动出屏幕外侧时，还是会出现这个问题，之前尝试过将外侧的view设置的宽度大于100%，让canvas的有效区域超出屏幕外侧，但是canvas的最大宽度就只能是100%的宽度，并不会超出一屏，所以目前只能设置到100vw来解决大部分的滑动情况

2、提示框在屏幕边缘会超出显示
手机屏幕相比电脑屏幕来说太小了，很容易在边界的部分超出显示，虽然在tooltip中有confine可以解决这个问题，但是所有的坐标点的提示框都固定在一个位置，感觉不太友好
解决方案：有两种比较好的解决方案
第一种跟随点击坐标移动，将原先显示的位置向左侧移动提示框的宽度一半的位置，取整是为了解决样式中存在小数时，在IOS和安卓系统显示时可能出现的异常

tooltip: {
	position: function(point, params, dom, rect, size) {
        return [point[0] - parseInt(size.contentSize[0]/2), 60];
    }
}

第二种是在点击左侧区域时，在右侧显示，点击右侧时，在左侧显示，左右间距为30像素

tooltip: {
	position: function(point, params, dom, rect, size) {
       if (point[0] < size.viewSize[0] / 2) {
          return [size.viewSize[0] - size.contentSize[0] - 30, 60];
       }else{
          return [30, 60];
       }
    }
}