Echarts實現今日頭條疫情地圖和用戶畫像

Echarts Chartjs

最近因爲公司圖表展示需求較多,因此學習整理下相關資料。javascript

前端圖表框架也比較多,這裏介紹兩款。html

  • Apache Echarts
  • Chartjs

Apache Echarts 涵蓋各行業圖表,知足各類需求,功能至關豐富。然後起之秀chartjs以其簡單靈活特性,也深得開發設計人員喜好。前端

https://echarts.apache.org (Echarts)

https://www.chartjs.org (Charts)java

二者都是開源項目,託管在Githubgit

https://github.com/apache/inc...

https://github.com/chartjs/Ch...github

二者社區活躍簡單對比web

Apache Echarts

Chartjs

看上去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...

疫情數據來源 《騰訊新聞》

全國疫情

用戶畫像

仿照今日頭條簡版粉絲畫像圖。

粉絲畫像

IP來源查詢

IP分佈

小結

該篇主要是對Echarts map 整理。歡迎分享和學習交流。

項目地址

https://github.com/cuteJ/shop... (後端)

https://github.com/cuteJ/shop... (前端)

項目演示地址

http://shop-web-mgt.onlythink...
相關文章
相關標籤/搜索