1. 引言

在上篇部落格汽車銷量查詢小助手（小程式）開發心路歷程 我分享了整個小程式的開發歷程，感謝有那麼多同學閱讀和關注。

後面就會將小程式中的各個功能塊以程式碼片段的方式給大家分享出來，所有的程式碼都在我的 （https://github.com/ReyCG/carsales-snippets）專案下，

直接使用 微信開發工具的程式碼片段匯入，即可看到效果。首先來看第一個功能：銷量趨勢圖 。該功能的程式碼地址在 https://github.com/ReyCG/carsales-snippets/tree/master/cn-sales-chart .

2.  效果圖及功能點說明

 介面是這樣的：

當用戶點選不同的時間週期按鈕，如點選 3 個月，就會以動畫的形式展現出來 3 個月的銷量趨勢。

當用戶點選 檢視更多行情 按鈕或者 檢視更多 時，就會進入下一個介面展示完整的行情圖。

3. 使用工具說明

4.整體實現分析說明

1. 使用 echarts 非同步載入

  data: {
    ...
    ecLine: {
      lazyLoad: true
    }　　...
  },

2. 使用 陣列 periodClass 和繫結事件cnSalePeriodChange來控制時間週期按鈕的點選 和 對應趨勢 的展示

      <view class='xltab'>
        <text class='{{ periodClass[0] }}'
 
 data-index='1' catchtap='cnSalePeriodChange'>3個月</text>
        <text class='{{ periodClass[1] }}' data-index='2' catchtap='cnSalePeriodChange'>6個月</text>
        <text class='{{ periodClass[2] }}' data-index='3' catchtap='cnSalePeriodChange'>1年</text>
        <text 
 
class='{{ periodClass[3] }}' data-index='4' catchtap='cnSalePeriodChange'>全部</text>
      </view>

3. 對 echarts 的 option 填充進行封裝，根據不同的時間週期得到不同的 option

  showCnSalesChart: function () {
    const cnSalesOption = cnSaleUtils.fillUpCnSalesOption(this.data.periodIndex)
    this.setData({
      loading: false
    })

    chartUtils.initChart(cnSalesOption, this, '#cnsales-line-chart')
  },

4. 對 echarts 圖形的展示進行封裝,只需傳入 option, page 上下文和 ec-canvas id 即可展示圖形

chartUtils.initChart(cnSalesOption, this, '#cnsales-line-chart')

5. 注意點

不要試圖通過控制 css 使時間週期按鈕放置在 echarts 圖形區域內，這樣會導致按鈕點選無效。無論設定多少 z-index 都是無效的。

這是因為

　echarts 圖形是使用的 canvas 原生元件， 原生元件的層級是最高的，所以頁面中的其他元件無論設定 z-index 為多少，都無法蓋在原生元件上。

6. 附註

該功能可以我開發的小程式 汽車銷量查詢小助手 檢視完整的效果，可以在微信中搜索 汽車銷量查詢小助手 或者掃描下方二維碼檢視。

如果您對我的文章或程式程式碼有意見和建議或者問題，歡迎各位在評論區或者 github 上留言，我將仔細閱讀，認真回覆。

如果我的文件或程式程式碼對您有所幫助，請幫忙推薦或轉發，非常感謝~