前言

最近收到一個(gè)需求，要在小程序上去做數(shù)據(jù)看板，能讓公司運(yùn)營和老板看到那些銷售的數(shù)據(jù)情況。

這就導(dǎo)致需要我去重新?lián)炱餎charts了，距離上一次用它還是五年前了吧。

不過好在現(xiàn)在的Echarts已經(jīng)能很好的適配微信小程序了，不需要處理一些額外的bug，只需要看著官方的案例和文檔去做就行。

但是，官方給的Echarts示例都是簡易的、靜態(tài)的，數(shù)據(jù)也都是固定的，還得需要自己去做動(dòng)態(tài)適配，在做的過程中，還發(fā)現(xiàn)了當(dāng)使用Vant組件彈出層置頂?shù)臅r(shí)候，底部的Echarts圖的層級會(huì)蓋住彈出層的層級。

查了Echarts文檔和微信小程序文檔之后，發(fā)現(xiàn)Echarts是用canvas去繪制的，而小程序中原生的canvas組件層級是最高的。

介紹一下Echarts for weixin

• Echarts-for-weixin是一種數(shù)據(jù)可視化庫，可以幫助開發(fā)者為微信小程序創(chuàng)建交互式圖表和圖形。
• 它是Echarts庫的一個(gè)子集，專門為Web應(yīng)用程序設(shè)計(jì)而來。
• Echarts-for-weixin為開發(fā)者提供了一個(gè)簡單易用的界面，以創(chuàng)建可自定義的圖表和圖形，可以嵌入微信小程序中。
• 它支持許多不同類型的圖表，包括折線圖、柱狀圖、餅圖、散點(diǎn)圖等等。

點(diǎn)擊進(jìn)入官方源碼倉庫（github鏡像倉庫）

導(dǎo)入源碼

通過倉庫里面的介紹，我們可以直接下載代碼，并導(dǎo)入到微信開發(fā)者工具中。（以下是導(dǎo)入后并運(yùn)行起來的效果）

可以看到圖表示例中包含了所有常用的Echarts實(shí)例，并且根據(jù)小程序的特性，給出了延遲加載、單頁面多圖表、頁面阻塞、保存文件等實(shí)例。

文件夾

• ec-canvas：我們需要復(fù)制到自己項(xiàng)目中，作為一個(gè)子組件去使用的文件。
• pages：可以根據(jù)當(dāng)前圖表示例查看對應(yīng)的源碼文件

需要注意的是，官方示例中的ec-canvas文件中包含了所有圖表代碼，我們可以根據(jù)自己的需求去自定義構(gòu)建圖表，從而降低代碼的大小。點(diǎn)擊進(jìn)入自定義圖表鏈接

了解源碼

我們可以隨意打開一個(gè)示例圖表，點(diǎn)擊開發(fā)工具下方的頁面路徑，可以進(jìn)入到對應(yīng)圖表的js文件中。

• 我打開了一個(gè)餅狀圖示例

• 根據(jù)官方提供的源碼，我們可以看到定義的內(nèi)容如下：

<view class="container">
  <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
</view>

• 在頁面上使用 ec-canvas 組件，需要定義 canvas 的id 和 ec（會(huì)在js中定義 ec）

import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  var option = {
    backgroundColor: "#ffffff",
    series: [{
      label: {
        normal: {
          fontSize: 14
        }
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['20%', '40%'],
      data: [{
        value: 55,
        name: '北京'
      }, {
        value: 20,
        name: '武漢'
      }, {
        value: 10,
        name: '杭州'
      }, {
        value: 20,
        name: '廣州'
      }, {
        value: 38,
        name: '上海'
      }]
    }]
  };
  chart.setOption(option);
  return chart;
}
Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});

• 首行import表示引入當(dāng)前 ec-canvas 組件
• initChart方法用于定義canvas、echarts中的option的內(nèi)容，并渲染到canvas上
• 在data中定義了一個(gè)ec的對象，里面的 onInit 引入上面的 initChart 方法

動(dòng)態(tài)Echarts for weixin

通過閱讀不同的Echarts示例源碼，我們只是了解了Echarts在小程序中的使用過程，但是我們在實(shí)際運(yùn)用中，是需要和后端進(jìn)行接口對接等動(dòng)態(tài)操作數(shù)據(jù)的。

動(dòng)態(tài)的過程，對于頁面上組件其實(shí)是不需要改動(dòng)的，可以直接按照官方示例去寫。我們只需要修改小程序中 js 的邏輯即可。

• 下面是以折線圖為例去實(shí)現(xiàn)動(dòng)態(tài)效果

<view class="echarts_wrapper">
  <ec-canvas id="data-trend-chart" canvas-id="data-trend-chart" ec="{{ ecTrend }}"></ec-canvas>
</view>

這里需要注意的是，需要在 ec-canvas 外面包一層元素，并指定寬高，否則 canvas 會(huì)無法渲染出來。

data: {
    ecTrend: { // echarts初始化
      lazyLoad: true
    },
}

• 需要在data 中定義一個(gè)值 ecTrend 和頁面中的 ec 對應(yīng)
• 將 lazyLoad 設(shè)為 true 后，需要手動(dòng)初始化圖表（即懶加載）

/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady() {
    // 初始化數(shù)據(jù)趨勢 echarts
    this.ecDataTrendComponent = this.selectComponent('#data-trend-chart');
    this.getTrend()
}

• 既然需要手動(dòng)初始化，那么我們就需要在進(jìn)入頁面時(shí)的生命周期中進(jìn)行初始化
• selectComponent 中對應(yīng)頁面中的canvas id（id是頁面中唯一值，如果有多個(gè)圖表時(shí)，不可重復(fù)）
• getTrend 是用來讀取接口數(shù)據(jù)的方法（下面會(huì)使用 setTimeout 去代替接口請求）

getTrend() {
    setTimeout(() => {
        // 初始化完成之后，直接獲取后臺數(shù)據(jù)進(jìn)行繪制canvas
        this.ecDataTrendComponent.init((canvas, width, height, dpr) => {
            // 獲取組件的 canvas、width、height 后的回調(diào)函數(shù)
            // 在這里初始化圖表
            const chart = echarts.init(canvas, null, {
              width: width,
              height: height,
              devicePixelRatio: dpr // new
            });
            let xAxis = ["3.1","3.2","3.3","3.4","3.5","3.6","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","3.16","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.28","3.29","3.30","3.31"]
            let series = [{"data":[0,0,0,0,0,0,0,0,1,0,0,0,0,17],"name":"單量","type":"line"}]
            // 將后臺的值傳遞給 setTrendOption 方法
            setTrendOption(chart, xAxis, series);
            // 將圖表實(shí)例綁定到 this 上，可以在其他成員函數(shù)（如 dispose）中訪問
            this.ecDataTrendChart = chart;
            // 注意這里一定要返回 chart 實(shí)例，否則會(huì)影響事件處理等
            return chart;
        });
    }, 0)
},

• init方法和官方源碼中的示例差不多，就是用來定義canvas中的值，并將接口中獲取到的數(shù)據(jù)傳遞給外部定義的方法中。
• setTrendOption 中傳入了當(dāng)前實(shí)例，和兩個(gè)參數(shù)（參數(shù)均由后端接口返回，此處定義成靜態(tài)數(shù)據(jù)）
• 最后將初始化圖表的實(shí)例綁定并返回。

這里需要注意一下，必須要返回實(shí)例，否則頁面上無法渲染出圖表數(shù)據(jù)

function setTrendOption(chart, xAxis, series) {
  const option = {
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    grid: {
      top: '10',
      left: '5',
      right: '5',
      bottom: '10',
      containLabel: true
    },
    toolbox: {
      show: false
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxis
    },
    yAxis: {
      type: 'value'
    },
    series: series
  };
  chart.setOption(option);
}

• setTrendOption 方法需要定義在 Page 方法外部
• xAxis 接收到的參數(shù)用于定義 X 坐標(biāo)軸的 data
• series 接收到的參數(shù)直接用于它本身即可

后端接口返回的數(shù)據(jù)可能有差異，可以根據(jù)不同的參數(shù)進(jìn)行適配（具體參數(shù)可參見Echarts官方文檔說明）

數(shù)據(jù)展示

根據(jù)上方代碼，我們可以生成對應(yīng)的數(shù)據(jù)圖表

踩坑系列（持續(xù)更新）

圖表層級

當(dāng)我們點(diǎn)擊日期彈出層時(shí)，會(huì)發(fā)現(xiàn)數(shù)據(jù)趨勢的圖表層級置于最頂端了，那么我們就需要對圖表的層級進(jìn)行修改。

由于小程序的限制，原生組件的層級是頂級的且無法修改的，那么我們就只能對圖表進(jìn)行顯示和隱藏操作。

wx:if vs hidden (此部分是在微信官方文檔中摘錄)

• 因?yàn)?nbsp;wx:if 之中的模板也可能包含數(shù)據(jù)綁定，所以當(dāng) wx:if 的條件值切換時(shí)，框架有一個(gè)局部渲染的過程，因?yàn)樗鼤?huì)確保條件塊在切換時(shí)銷毀或重新渲染。

• 同時(shí) wx:if 也是惰性的，如果在初始渲染條件為 false，框架什么也不做，在條件第一次變成真的時(shí)候才開始局部渲染。

• 相比之下，hidden 就簡單的多，組件始終會(huì)被渲染，只是簡單的控制顯示與隱藏。

• 一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運(yùn)行時(shí)條件不大可能改變則 wx:if 較好。

根據(jù)微信文檔中的說明，我們不需要使用 wx:if，可以使用 hidden 來代替。

<view class="echarts_wrapper" hidden="{{calendarShow}}">
  <ec-canvas id="data-trend-chart" canvas-id="data-trend-chart" ec="{{ ecTrend }}"></ec-canvas>
</view>

• 我們可以在 ec-canvas 外部包裹的層級元素中使用 hidden來定義canvas顯示和隱藏
• 當(dāng) calendarShow 為 true 時(shí)，則是日歷彈出層顯示的時(shí)候，此時(shí)就需要隱藏 canvas 元素

總結(jié)

此文主要是記錄 Echarts-for-weixin 的使用過程，通過官方的靜態(tài)源碼衍生出動(dòng)態(tài)使用方式。

在開發(fā)過程中有很多避免不了的坑需要去踩，仔細(xì)研究一下官方文檔，可以解決大部分的坑。

以上就是微信小程序Echarts動(dòng)態(tài)使用及圖表層級踩坑解決方案的詳細(xì)內(nèi)容，更多關(guān)于微信小程序Echarts動(dòng)態(tài)圖表層級的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論