前言:
新公司有一個(gè)數(shù)據(jù)可視化的大屏項(xiàng)目, 需要繪制出各類圖表, 地圖等. 起初以為都是使用的echarts 繪制... 結(jié)果發(fā)現(xiàn) package.json 中 不僅有 echarts 還有 D3 .... 項(xiàng)目中版本如下:
package.json 中版本信息
so, 又開始了學(xué)習(xí)+search之旅... 不過D3的資料都是很久之前的了.. 查找屬實(shí)費(fèi)勁...
而且, 項(xiàng)目中需求圖都需要定制, 所以無法直接使用D3的坐標(biāo)和比例尺..
幾個(gè)注意的點(diǎn):
- D3 版本 v3 和 v4,5,6 的代碼都不相同,大家寫的時(shí)候自己去查看
- 中國(guó)地圖可以直接使用 echarts
- 地區(qū)地圖需要 svg / geojson 文件的去這里下載:http://datav.aliyun.com/tools/atlas
- 詞云圖可以使用echarts , 官網(wǎng)的案例都太low.查看這個(gè)網(wǎng)站:
https://www.makeapie.com/explore.html - 注意大屏的適配問題(之后總結(jié)T..T)
- svg 在線編輯器(與繪畫一樣): https://c.runoob.com/more/svgeditor/
放置幾個(gè)項(xiàng)目中的典型圖表吧
一. echarts 詞云圖
詞云圖
需要安裝 echarts-wordcloud
根據(jù)圖片的輪廓填充詞語 , 參考網(wǎng)址
https://www.makeapie.com/editor.html?c=xBGq7gnHzU
注意版本不對(duì)應(yīng)會(huì)產(chǎn)生bug(maskImage或textColor無效), github上是有一句提示的:
版本對(duì)應(yīng)提示
具體的可以查看 issues62 (github網(wǎng)站圖片失效的話配置一下 hosts 文件)
https://github.com/ecomfe/echarts-wordcloud/issues/62
兼容性測(cè)試圖
二. D3氣泡圖
添加了循環(huán)動(dòng)畫, 具體可查看代碼
氣泡圖
三. 城市地圖
項(xiàng)目中只需要 深圳和杭州的地圖繪制, 找了好久才找到 繪制好的地圖. 需要其他地圖自行下載
深圳
四. 自定義圖例餅狀圖
自定義圖例餅狀圖
五. 頂部半圓柱狀圖
頂部半圓柱狀圖
