最近產品新增需求，又要加圖表了，一聽到圖表眾程序員心一提。這次新增的圖表是類似KEEP軟件的滑動柱狀圖，不僅展示還要動態的展示數據，不瞭解KEEP可以看看下面的截圖。
主要就是通過拖動圖表來定位展示數據。拿到了原型圖就開始來嘗試實現了。
第一次嘗試，利用echarts實現
首先利用echarts來實現滑動圖表組件，官方配置項提供了dataZoom配置項可以設置x軸滑動展示。實現起來非常方便，官方也給出了例子來進行展示，但是，但是，不知道echarts官網怎麼設計的這個座標軸滾動的交互，這效果有點一言難盡（見下圖）。不僅座標軸會隨著可是區域數軸的值變化，而且這過渡效果太bug了，完全不是產品get的效果呀。同時在小程序中還需要獲取到當前可視區域中心的座標值，這些也是非常難拿到的，echarts也沒有對外開發類似的接口（可實現的方案是通過formatter遍歷獲取），所以，這個方案淘汰。
第二次嘗試，原生view標籤實現
既然echarts不行，那咱們試試原生view標籤自己造吧，構建好結構，結合data也能正常顯示圖表。萬事俱備，只欠滑動。這裡需要涉及到三個事件監聽 touchstart、touchmove、touchend。在touchstart時記錄手指觸碰的x座標記作startX，在touchmove時期記錄當前手指觸碰的x座標，和startX作差得出移動舉例moveX，這是給圖表區設置transform的translateX為moveX的單位，使得圖表可以跟隨手指實時滑動。當touchend時，清除startX等數據，滑動結束，再記錄當前中心點的索引，進行對應請求顯示。
在開發者工具中功能基本實現，且沒有明顯bug，開始上機測試。這一調試就出大問題了，由於move時不斷進行修改css的操作，小程序變得非常卡，非常影響用戶體驗，雖然加了節流函數還是不流暢，所以，第二種方案做廢。
第三次嘗試，小程序組件 scroll-view
瞭解小程序的開發人員肯定用到過小程序組件 scroll-view。翻看文檔scroll-view有一個 scroll-left 屬性，設置橫向滾動條的位置。這樣通過滾動條的位置豈不是很方便的就能捕獲到當前中心位置的索引值了？
如下代碼片段：
123 |
|
bindscroll事件在組件滑動過程中執行，scroll-left設置/監聽滑動軸記錄左端的距離，scroll-with-animation 設置滑動過程展示動畫，bindtouchstart綁定滑動初始狀態。
第一步，在onLoad生命週期，對圖表視圖進行渲染，獲取實際渲染尺寸，對圖表區添加適合的左右padding值，使得第一個和最後一個柱都能恰好卡在正中間。
第二步，滑動開始時，執行事件，設置isTouch為true，這裡是防止偽觸摸：
123456 | // 滑動開始clickStart(e) { this.setData({ isTouch: true })}, |
第三步，滑動監聽，涉及到節流函數的運用，當滑動停止的100ms以後執行結束事件：
123456789101112131415161718192021222324252627 | chartScroll(e) { // console.log("滑動" + e.detail.scrollLeft) let that = this clearTimeout(this.data.scrollTimeout) if (this.data.isTouch) { this.setData({ scrollX: e.detail.scrollLeft }) // 節流函數，當滑動停止的100毫秒後執行結束事件 // 因為ios下有慣性滑動，這裡不能直接touchend事件 this.setData({ scrollTimeout: setTimeout(() => { that.clickEnd() }, 100) }) } },// 滑動結束，判斷當前的索引值，再修正滑動軸的位移距離 clickEnd() { console.log('滑動結束') let nowIndex = Math.round(this.data.scrollX / this.data.barWidth + 1) this.setData({ nowIndex: nowIndex, moveScroll: this.data.barWidth * (nowIndex - 1), isTouch: false }) } |
至此，大致的過程完畢，效果圖如下：
總結：小程序的圖表機制到目前為止仍然很不理想，所。這幾種裡面沒有涉及canvas的辦法實現，最後使用的大量view標籤實現在性能上肯定是不及canvas的方法，在ip5等性能差的手機上仍然存在卡頓的問題。所以對於小程序圖表的實現，仍然需要大量的調研和方法實現。
代碼地址：https://github.com/252860883/wechat-slideBarChart
閱讀更多 前端圈 的文章
