emmmmm.....標題我就覺得起的很變態。閑話不多說,先說出現的背景吧~~。 因為業務上的需求,跟一個硬體對接,要做大屏展示大廳客流熱力圖分佈(背景圖是客戶那邊給的)。然後這個機子傳過來的數據就可能20來條。如果用最新的echarts4來做,但是數據太小不足以畫出圖來,但是如果數據太大傳輸也是一 ...
emmmmm.....標題我就覺得起的很變態。閑話不多說,先說出現的背景吧~~。
因為業務上的需求,跟一個硬體對接,要做大屏展示大廳客流熱力圖分佈(背景圖是客戶那邊給的)。然後這個機子傳過來的數據就可能20來條。如果用最新的echarts4來做,但是數據太小不足以畫出圖來,但是如果數據太大傳輸也是一個問題。後來看來echarts2的熱力圖,仿佛找到來救星~~(https://echarts.baidu.com/echarts2/doc/example/heatmap.html)裡面還有個valueScale,如果數據不好看還能放大,完美!擼起袖子就是乾,但是我們大屏上已經有echart4.x 的依賴,如果通過 npm i 或者 yarn add 會直接把echarts4.x 覆蓋,所以只能通過手動添加echarts2.2.8 ,
添加好後 再 install 一下就好了。
然後再頁面裡面正常使用可以了!(雖然方法有點粗暴~啊哈哈哈,mark一下)
useEffect(() => { require([ 'echarts2', 'echarts2/chart/heatmap' // 使用柱狀圖就載入bar模塊,按需載入 ], function (e) { e .init(dom) .setOption(option) }) })