這段時(shí)間以來，每天早上起床的第一件事就是打開手機(jī)看看當(dāng)前疫情的狀況。

作為一名程序員，看這個(gè)圖的時(shí)候，我猜測(cè)這個(gè)圖應(yīng)該是用百度的echarts畫的，然后腦子里過了一下echarts的使用。不過試試證明，我還是太年輕，沒有產(chǎn)品意識(shí)。

百度的echarts團(tuán)隊(duì)其實(shí)早就將echarts的能力包裝成一個(gè)完整易用的工具開放出來。不需要懂一行代碼，誰(shuí)都可以快速開發(fā)出來一個(gè)像疫情圖這樣高級(jí)的圖標(biāo)。

話不多說，這個(gè)工具就是百度圖說，網(wǎng)址是https://tushuo.baidu.com/

看右下角，果然沒錯(cuò)，echarts出品。

下面開始我的表演：

1，數(shù)據(jù)準(zhǔn)備

隨便找個(gè)網(wǎng)站，拔下來一份最新的疫情數(shù)據(jù)

2，開始制作圖表

點(diǎn)擊開始制作圖表---> 創(chuàng)建圖表 ---> 選擇地圖--->標(biāo)準(zhǔn)中國(guó)地圖

3，導(dǎo)入數(shù)據(jù)

數(shù)據(jù)編輯---> 導(dǎo)入excel。即可將我們準(zhǔn)備的疫情數(shù)據(jù)導(dǎo)入

4，調(diào)整顏色

通過參數(shù)調(diào)整。在值域中通過修改值域范圍和控制器顏色。可以簡(jiǎn)單的做出一個(gè)還不錯(cuò)的圖表。

另外，圖說里面還有其他很多常用的圖例。都是我們用echarts經(jīng)常來做的。

這個(gè)工具挺好，雖說我們程序員都可以用代碼寫出來，這樣也可以省不少事。并且這個(gè)工具可以查看源代碼，又沒實(shí)現(xiàn)的功能，咱們也可以拿來改改。

對(duì)于不懂代碼的人來說，直接拿來用就行，一行代碼你也不需要懂。

另外其他的一些開源圖表推薦

D3.js - 數(shù)據(jù)驅(qū)動(dòng)的文檔

D3.js是一個(gè)開源的JavaScript庫(kù)，用于根據(jù)用戶數(shù)據(jù)處理文檔。這是一個(gè)強(qiáng)大的工具，通過HTML，SVG和CSS的幫助，賦予數(shù)據(jù)生命。 D3允許開發(fā)人員將任意數(shù)據(jù)綁定到DOM，然后將數(shù)據(jù)驅(qū)動(dòng)的轉(zhuǎn)換應(yīng)用到DOM。例如：考慮一個(gè)數(shù)組數(shù)組，您可以使用它來生成一個(gè)HTML表，或者您可以使用相同的數(shù)據(jù)生成交互式條形圖或餅圖。

官方網(wǎng)站：https：//d3js.org/

Chart.js

Chart.js是一個(gè)由社區(qū)維護(hù)圖表庫(kù)，通過使用它，我們可以為您的網(wǎng)站創(chuàng)建響應(yīng)式圖表。通過使用它，我們可以生成混合圖表，并且在現(xiàn)代瀏覽器中具有很好的渲染能力。Angular Chart建立在Chart.js庫(kù)之上，對(duì)于Angular項(xiàng)目來說，實(shí)現(xiàn)Angular圖表將非常容易。

官方網(wǎng)站：http：//www.chartjs.org/

n3-charts

n3-charts也是一個(gè)開源的JavaScript圖表庫(kù)，它使得Angular開發(fā)者的生活變得簡(jiǎn)單。 n3-chart是建立在D3.js和AngularJS之上的，因此它具有更強(qiáng)大的圖表，并且易于實(shí)現(xiàn)。

官方網(wǎng)站：http：//n3-charts.github.io/line-chart/#/home