最近因爲公司圖表展示需求較多,因此學習整理下相關資料。javascript
前端圖表框架也比較多,這裏介紹兩款。html
Apache Echarts 涵蓋各行業圖表,知足各類需求,功能至關豐富。然後起之秀chartjs以其簡單靈活特性,也深得開發設計人員喜好。前端
https://echarts.apache.org (Echarts)https://www.chartjs.org (Charts)java
二者都是開源項目,託管在Githubgit
https://github.com/apache/inc...
二者社區活躍簡單對比web
看上去Chartjs彷佛更活躍。apache
使用echarts map 來實現。npm
npm install echarts --save
導入地圖數據後端
ECharts 中提供了Javascript和Json兩種格式的地圖數據
從Github項目文件下載 https://github.com/apache/inc...從阿里提供地址下載 http://datav.aliyun.com/tools...
百度網盤 連接: https://pan.baidu.com/s/1fHfW... 提取碼: 6fu5
項目代碼片斷
echarts.registerMap("china", chinaMap); series: [ { name: '確診數', type: 'map', mapType: 'china', roam: false, label: { show: true, color: 'rgb(63, 63, 63)' }, data: actualData } ]
配置 visualMap
對照配置文檔調整相應的參數便可,也很簡單。
https://echarts.apache.org/zh...
疫情數據來源 《騰訊新聞》
仿照今日頭條簡版粉絲畫像圖。
該篇主要是對Echarts map 整理。歡迎分享和學習交流。
項目地址
https://github.com/cuteJ/shop... (後端)
項目演示地址
http://shop-web-mgt.onlythink...