問題描述

請(qǐng)看上圖，需求背景如下：現(xiàn)在有多(5)個(gè)主題，也就是多個(gè)大豎條，我只畫了2個(gè)。每個(gè)主題中又有維度，每個(gè)維度的數(shù)據(jù)是不同的。圖片中的顏色大小就是模擬數(shù)據(jù)的大小來顯示的。如果某個(gè)維度的數(shù)據(jù)大，那么該格子的高度就高點(diǎn)。也就是說：數(shù)據(jù)abcde顯示的方塊高度是根據(jù)數(shù)據(jù)來的。但是，現(xiàn)在各個(gè)主題之間的數(shù)據(jù)是有流入流出的效果。也就是說可能第一主題的數(shù)據(jù)a指向了第二主題的數(shù)據(jù)c和數(shù)據(jù)d現(xiàn)在的問題的是，頁面上所有塊的展示和箭頭的指向都是由數(shù)據(jù)來決定的。

我的問題如下：

像這種頁面該怎么布局，或者有沒有其他的解決方案？

頁面上怎么畫箭頭，箭頭該怎么動(dòng)態(tài)的指向？

有沒有其他第三方類庫能解決類似的需求？

請(qǐng)知道的朋友能給一些解決方案，謝謝！

問題解答

單純的色塊用 css 布局絕對(duì)沒問題，不管是 5 個(gè)還是 N 個(gè)，高度顏色用 js 動(dòng)態(tài)設(shè)置即可。

畫箭頭？css 也不是畫不出來，不過是需要把時(shí)間耗費(fèi)在線條位置、長(zhǎng)度、角度的計(jì)算上了，結(jié)合 transform。

結(jié)合前兩條，還是尋求圖表庫解決吧。如果沒有箭頭的話，有些漏斗圖應(yīng)該可以改成豎條色塊的形式。加上箭頭就難尋了。。。

我推薦直接 canvas 自己造吧，畫矩形一個(gè)方法就出來了。找到要畫連接線的兩個(gè)色塊的中點(diǎn)，也很容易畫一條斜線。

手動(dòng)繪制應(yīng)該可以實(shí)現(xiàn)，但是如果用在實(shí)際項(xiàng)目中，建議使用JS的繪圖庫中的堆棧圖實(shí)現(xiàn)，例如百度的ECharts或阿里的G2。