在小程式中如何優雅的實作資料可視化

前言

現在很多企業都開始将産品部分、甚至全部子產品轉移到小程式中。想一想當年的

輕應用

，小程式的發展到今天屬實非常不錯。況且它的身後有微信這麼一個龐大的生态圈。自從去年末開始，我也好久沒有錄制小程式的課程了，那今天就寫一篇關于小程式之echarts資料可視化的踩坑記。

什麼是ECharts？

做前端的朋友一定聽過

Echarts

吧。我們平常在項目中需要使用

折線圖

、

柱狀圖

餅圖

K線圖

等等圖表展示一些資料。簡單來說，它就是我們做資料以圖表展示的開源庫。不過ECharts官網沒有小程式版本的開源庫可以引入~不過呢，已經有人在GitHub上釋出了echarts的小程式版本。

echarts微信小程式版下載下傳位址

安裝ECharts元件

我們将下載下傳好的檔案中的

ec-canvas

目錄放到小程式項目的根目錄中（如下圖所示）。然後在需要引入的Page中的

JSON

js

引入（如下代碼塊所示）。

在index目錄中的index.json引入

ec-canvas

元件。

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

在index目錄中的index.js引入

charts.js

依賴。

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

ec-canvas布局

在index目錄中的

index.wxml

中建立

ec-canvas

，并且設定它的高度。

<view class="echart_panel">
    <ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
 </view>

index.wxss

中定義

echart_panel

的樣式。

.echart_panel {
  width: 750rpx;
  height: 700rpx;
}

異步請求資料并渲染

平常業務中，我們的資料都是實時擷取的。我就不使用模拟資料展示了。

在

邏輯層（js）

——

data

中設定echarts延時加載。

ec: {
      lazyLoad: true,
    }

通過

id

擷取echarts元件

this.ecComponent =this.selectComponent('#mychart');

擷取接口資料,使用

this.setData({})

渲染到視圖層

getPriceByMonth() {
    var that = this;
    wx.request({
      url: app.globalData.appUrl + '/detail/getPriceByMonth',
      data: {
        //設定接口參數
        year: that.data.nowSelectYear.substring(0, 4),
        month: that.data.nowSelectMonth.substring(0, 2),
        openid: wx.getStorageSync('openid'),
        type: that.data.ieSelectStatus
      },
      success(res) {//成功回調
        var data = res.data;
        var countPrice = 0;
        var xData = [];
        var yData = [];
        for (var i in data) {
          xData.push(data[i].category);
          yData.push(data[i].price);
        }
        //去調用初始化設定圖表映射函數
        that.initChart(xData, yData);
        that.setData({
          xData,
          yData
        })
      },
      fail(e) {}
    })
  },

設定圖表映射函數

/**設定圖表映射 */
  initChart: function(xData, yData) {
    var that = this;
    var option = {
      grid: {
        containLabel: true
      },
      tooltip: {//重寫圖表提示内容
        show: true,
        trigger: 'axis',
        position: ['50%', '30%'],
        formatter: function(params) {
          return params[0].axisValue + ': ' + params[0].data + '元'
        }
      },
      xAxis: {
        type: 'category',
        data: xData,//異步請求的資料
        nameTextStyle: {
          fontSize: 20
        },
      },
      yAxis: {
        type: 'value',
        name: '元',
        axisLabel: {
          formatter: function(p) {//重寫y坐标數值機關
            return p;
          }
        },
        nameTextStyle: {
          fontSize: 20
        }
      },
      series: [{
        data: yData,//異步請求的資料
        type: 'line',
        label: {
          show: true
        }
      }]
    };
    //echarts會繼承父元素的寬高,是以我們一定要設定echarts元件父元素的高度。
    var myChart = that.ecComponent.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
      });
      //給echarts 設定資料及配置項（圖表類型、資料量等）
      chart.setOption(option);
      return chart;
    });

  },

最終效果

小提示

ec-canvas 目錄下有一個 echarts.js，它不是最新版本。我建議去官網線上定制。定制版的體積會更小，況且小程式本來就限制代碼體積，然後将自己定制的echarts.js替換就可以了。

坑與小提示

1、echarts不可以配合scroll-view+tabbar使用，在tabbar切換的時候，如果echarts在

scroll-view

中，切換後會消失（俗話：白屏）。

2、自定義的tabbar中，切換tabbar時，對echarts需使用

wx:if

進行顯示隐藏處理，否則切換後也會消失（俗話：白屏）。

3、echarts 的

所有父級元素都不能有定位

，否則在測試時就會出現echarts不随螢幕滾動的bug。overflow：auto 也不行。

4、echarts的層級最高如果自定義的tabar 要使用

cover—view

，不然echarts會顯示在tabar的上面

5、自定義tabbar中，建議設定

延遲1秒左右

再通過id擷取echarts元件，渲染資料。否則會尋找不到echarts，小程式報錯。

結語

因為近期很多同學反映自己通路GitHub總是逾時，是以小睿已經把下載下傳好的echarts小程式版放到公衆号内，有需要的同學，回複

echarts

擷取。

小睿已經把該踩的坑給你踩完了，最後，如果你在開發中遇到的困惑，歡迎進行留言讨論。

覺得不錯，給個呗~