1. 引言

在上篇博客汽車銷量查詢小助手（小程序）開發心路歷程 我分享了整個小程序的開發歷程，感謝有那麽多同學閱讀和關註。

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

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

2. 效果圖及功能點說明

界面是這樣的：

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

當用戶點擊 查看更多行情 按鈕或者 查看更多 時，就會進入下一個界面展示完整的行情圖。

3. 使用工具說明

1. ui 效果使用的是 WeUI基礎控件庫
2. 圖形展示使用的是 echarts for weixin

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 上留言，我將仔細閱讀，認真回復。

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

汽車銷量查詢小助手（小程序）銷量趨勢圖功能及代碼知識分享