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

本文轉載自查看原文 2020-05-24 18:35 1601

Echarts Chartjs

最近由於公司圖表展現需求較多，所以學習整理下相關資料。

前端圖表框架也比較多，這里介紹兩款。

Apache Echarts
Chartjs

Apache Echarts 涵蓋各行業圖表，滿足各種需求，功能相當豐富。而后起之秀chartjs以其簡單靈活特性，也深得開發設計人員喜愛。

https://echarts.apache.org （Echarts）

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

兩者都是開源項目，托管在Github

https://github.com/apache/incubator-echarts

https://github.com/chartjs/Chart.js

兩者社區活躍簡單對比

Apache Echarts

Chartjs

看上去Chartjs似乎更活躍。

疫情地圖

使用echarts map 來實現。

npm install echarts --save

導入地圖數據

ECharts 中提供了Javascript和Json兩種格式的地圖數據

從Github項目文件下載 https://github.com/apache/incubator-echarts/tree/master/map

從阿里提供地址下載 http://datav.aliyun.com/tools/atlas/#

百度網盤鏈接: https://pan.baidu.com/s/1fHfW-qft_M58o2eQglwelw 提取碼: 6fu5

項目代碼片段

echarts.registerMap("china", chinaMap);

series: [
            {
              name: '確診數',
              type: 'map',
              mapType: 'china',
              roam: false,
              label: {
                show: true,
                color: 'rgb(63, 63, 63)'
              },
              data: actualData
            }
          ]

配置 visualMap

對照配置文檔調整相應的參數即可，也很簡單。