微信小程序中應用echart圖表

ECharts的微信小程序版本

Echarts的官方文檔

自定義小程序echart插件圖表的點擊事件

微信小程序在ios下Echarts圖表不能滑動的解決方案

注：echarts.js能夠根據自己項目的須要，在echarts的官網上，在線定製下載，以減小文件體積；
複製代碼

1、小程序中echart用法

wxml

<ec-canvas id="mychart-dom-come" canvas-id="come" ec="{{ ecCome }}"></ec-canvas>
複製代碼

index.js

Page({
    data: {
        ecCome: {},
        payWidth:0,
        payHeight:0,
    }，
     /**監聽頁面加載 */
  onLoad: function (options) {
      var that = this;
      var id = options.id;
      
      //建立節點選擇器
    const query = wx.createSelectorQuery()
    query.select('.tabCon').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
      res[0].top       // 節點的上邊界座標
      res[1].scrollTop // 顯示區域的豎直滾動位置
      that.setData({
        payWidth: res[0].width,  //節點的寬度
        payHeight: res[0].height //節點的高度
      })
    })
    
  },
/**監聽頁面初次渲染完成，獲取自定義子組件 */
  onReady: function () { 
    var that = this;
    that.comeComponent = that.selectComponent('#mychart-dom-come');
  },
  
/* 動態傳入數據，獲取數據後執行這個方法並傳入數據 */
  comeEchartInit: function(list){

    var that = this;
    that.comeComponent.init((canvas, width, height)=>{
    
        //當圖表經過display:none隱藏後再顯示，不能獲取canvas的寬高，須要傳入數值
      that.initChartCome(canvas, that.data.payWidth, that.data.payHeight, list);
      
    })
  },
  /*圖表初始化*/
  initChartCome: function (canvas, width, height, list) {
   
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    canvas.setChart(chart);


    var option = {
     ...
    }
    chart.setOption(option);
    return chart;
  }
})

複製代碼

2、小程序的原生組件使用限制

官方文檔說明連接：小程序的原生組件使用限制

一、出現的問題：在圖表外層view加點擊事件，觸發不了事件？

緣由：

（1）不管是加大view上的z-index值，仍是將absolute改成fixed，ec-canvas組件所渲染的圖表就是在view上面，而沒有被view遮擋。

圖表是一個canvas組件，而小程序中canvas是一個原生組件！！！

（2）因爲微信小程序 canvas組件沒有提供tap事件，因此致使echart的插件也沒法相應tap事件，因此這裏須要咱們自定義tap事件

解決方法：

自定義小程序echart插件圖表的點擊事件：

打開插件目錄下 ec-canvas.js （tap的原理就是，touchstart----untouchmove----->touchend）添加以下代碼：

data: {
    startPoint:false //添加事件標誌位
},
...
touchStart(e) {
    //記錄標記
   this.data.startPoint = true ;
   ...
},
touchMove(e) {
    //移動了就不能實現tap，因此清空記錄標記
    this.data.startPoint = false;
    ...
},
touchEnd(e) {
    //若是沒有移動過
   if (this.data.startPoint){
           this.data.startPoint = false;
      //執行點擊事件，這裏是觸發父組件的myevent方法（一般就是調用echart插件的那個頁面）
      this.triggerEvent('myevent', {}, {});
   }
}
複製代碼

在調用echart插件的地方，註冊myevent

<ec-canvas bindmyevent="test"></ec-canvas>
//test方法寫在當前page的js中便可
複製代碼

3、echarts渲染完後轉成圖片

wxml:

<view class="echart-container">
  <image wx:if="{{echartImgSrc!==''}}" src="{{echartImgSrc}}" class='echart-img'></image>
  <ec-canvas wx:if="{{echartImgSrc===''}}" id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}" bind:init="echartInit"></ec-canvas>
</view>
複製代碼

js：

Page({
  data: {
    ec: {
    },
    echartImgSrc: ''
  },
  initChart(canvas, width, height) {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    canvas.setChart(chart);

    var option = {
      // ...
    };
    chart.on('finished', () => {
      this.selectComponent('#mychart-dom-pie').canvasToTempFilePath({
        success: res => {
          this.setData({
            echartImgSrc: res.tempFilePath
          })
        },
        fail: res => console.log('轉換圖片失敗', res)
      });
    })
    chart.setOption(option);
    return chart;
  },

  echartInit(e) {
    this.initChart(e.detail.canvas, e.detail.width, e.detail.height);
  }
});
複製代碼

ec-canvas.js:

//修改後
    canvasToTempFilePath(opt) {
      console.log(opt,this)
      if (!opt.canvasId) {
        opt.canvasId = this.data.canvasId;
      }
      console.log(55,opt.canvasId)
     
      const system = wx.getSystemInfoSync().system
      if (/ios/i.test(system)) {
        ctx.draw(false, () => {
          wx.canvasToTempFilePath(opt, this);
        });
      } else {//針對安卓機型異步獲取已繪製圖層
        ctx.draw(false, () => {
        
          ctx.draw(false);
          setTimeout(() => {//延遲獲取
            wx.canvasToTempFilePath(opt, this);
          }, 1000);
        })
      }
    },
    
複製代碼

注：當交互少的用這個方法能夠實現，由於我寫的項目中有輪播切換圖表，也就是使用了swiper中有canvas，ios中不能進行滑動切換，安卓上能夠進行正常切換，而且輪播的數量是經過動態渲染的，經過這個方法，即便加了計時器並在ctx.draw的回調中執行wx.canvasToTempFilePath，可是也不能所有返回路徑，以後經過左右按鈕來進行切換了。複製代碼