著大數據時代的來臨,社會對大數據人才的需求也日益旺盛,自然少不了我們前端工程師,我們前端工程師能做什么呢?這個自然就是做大數據可視化了,數據再多,沒有很直觀的呈現那也是白搭。現在好多政府企事業單位對大屏可視化的項目需求日益旺盛,這無疑給我們前端工程更多的機會,那我們如何入手做一款漂亮絢麗的大數據看板呢。
這個案例是不是直觀呢:
是不是很高科技上檔次呢,在來看一段視頻的動態效果:
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
echarts正如官網所說,一個使用 JavaScript 實現的開源可視化庫,可以流暢的運行在 PC 和移動設備上,兼容當前絕大部分瀏覽器(IE8/9/10/11,Chrome,Firefox,Safari等),底層依賴矢量圖形庫 ZRender,提供直觀,交互豐富,可高度個性化定制的數據可視化圖表。
具有以下特點:
更多介紹請查看官網 https://www.echartsjs.com/zh/index.html
其實用到的技術很簡單,掌握基礎的前端就行
1、引用 echarts.min.js 文件2、準備div容器
<div id="main"></div>
3、初始化 echart 實例
var myChart = echarts.init(document.getElementById('main'));
4、初始化圖表數據,示例代碼如下
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
5、顯示圖表
myChart.setOption(option);
本案例設計稿寬度是1920px,rem 初始基準是24px。
1、如何做適配呢?
保持設備寬度與rem基準值比例為 80 即可
2、這里用JS進行初始化基準,窗口大小改變,就會進行調整,示例代碼如下:
(function () {
// 1、頁面一加載就要知道頁面寬度計算
var setFont = function () {
// 因為要定義變量可能和別的變量相互沖突,污染,所有用自調用函數
var html = document.documentElement;// 獲取html
// 獲取寬度
var width = html.clientWidth;
// 判斷
if (width < 1024) width = 1024
if (width > 1920) width = 1920
// 設置html的基準值
var fontSize = width / 80 + 'px';
// 設置給html
html.style.fontSize = fontSize;
}
setFont();
// 2、頁面改變的時候也需要設置
// 尺寸改變事件
window.onresize = function () {
setFont();
}
})();
注:計算式可能有小數,很多位,保留3為有效小數,不去除0
這個頁面局基于flex彈性盒子布局,其他的內容都是基于原生的JS寫的,動畫效果基于CSS3。
由于代碼比較多,就不在這一一列舉了,由于文章不太方便貼下載鏈接,那怎么獲取本案例的代碼呢?
Echarts 無論是制作省份地圖還是區縣域地圖,他們的步驟都是基本一樣的。
下面本人就 利用 Echarts 簡單繪制省份地圖 的步驟與經驗與各位分享一下。
<script type="text/javascript" src="/static/js/echarts.min.js"></script>
<script type="text/javascript" src="/static/js/jiangsu.js"></script>
<div>
{# 標記 #}
<a class="btn btn-success btn-sm" >江蘇省</a>
{# 地圖代碼開始 #}
<div class="x-body">
<!-- 為ECharts準備一個具備大小(寬高)的Dom -->
<div id="main" style="width: 949.75px;height:450px;"></div>
</div>
<script type="text/javascript">
echarts.registerMap('jiangsu', jiangsuJson);
// 基于準備好的dom,初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption({
series: [{
type: 'map',
map: 'jiangsu'
}]
});
</script>
</div>
其實只要按照本人上面的做法,就可以制作出來,本人繪不是很復雜,如果各位對省圖還需要其他顯示功能,大家不妨訪問 Echarts 的官網。
開源精選》是我們分享Github、Gitee等開源社區中優質項目的欄目,包括技術、學習、實用與各種有趣的內容。本期推薦的是一個基于 JavaScript 的開源可視化圖表庫——Apache ECharts。
ECharts是一個使用 JavaScript 實現的開源可視化庫,可以流暢地運行在 PC 和移動設備上,兼容當前絕大部分瀏覽器(IE9/10/11,Chrome,Firefox,Safari等),底層依賴矢量圖形庫 ZRender,提供直觀,交互豐富,可高度個性化定制的數據可視化圖表。
豐富的圖表類型:提供開箱即用的 20 多種圖表和十幾種組件,并且支持各種圖表以及組件的任意組合。
強勁的渲染引擎:Canvas、SVG 雙引擎一鍵切換,增量渲染、流加載等技術實現千萬級數據的流暢交互。
專業的數據分析:通過數據集管理數據,支持數據過濾、聚類、回歸,幫助實現同一份數據的多維度分析。
優雅的可視化設計:默認設計遵從可視化原則,支持響應式設計,并且提供了靈活的配置項方便開發者定制。
健康的開源社區:活躍的社區用戶保證了項目的健康發展,也貢獻了豐富的第三方插件滿足不同場景的需求。
友好的無障礙訪問:智能生成的圖表描述和貼花圖案,幫助視力障礙人士了解圖表內容,讀懂圖表背后的故事。
移動端優化:ECharts 針對移動端交互做了細致的優化,例如移動端小屏上適于用手指在坐標系中進行縮放、平移。
1 獲取 Apache ECharts
Apache ECharts 支持多種下載方式,你可以根據項目的實際情況選擇以下任意一種方式安裝。
apache/echarts 項目的 release 頁面可以找到各個版本的鏈接。點擊下載頁面下方 Assets 中的 Source code,解壓后 dist 目錄下的 echarts.js 即為包含完整 ECharts 功能的文件。
https://github.com/apache/echarts/releases
npm install echarts --save
在 https://www.jsdelivr.com/package/npm/echarts 選擇 dist/echarts.js,點擊并保存為 echarts.js 文件。
2 引入 Apache ECharts
在剛才保存 echarts.js 的目錄新建一個 index.html 文件,內容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入剛剛下載的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
</html>
打開這個 index.html,你會看到一片空白。但是不要擔心,打開控制臺確認沒有報錯信息,就可以進行下一步。
3 繪制一個簡單的圖表
在繪圖前我們需要為 ECharts 準備一個定義了高寬的 DOM 容器。在剛才的例子 </head> 之后,添加:
<body>
<!-- 為 ECharts 準備一個定義了寬高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通過 echarts.init 方法初始化一個 echarts 實例并通過 setOption 方法生成一個簡單的柱狀圖,下面是完整代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入剛剛下載的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 為 ECharts 準備一個定義了寬高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準備好的dom,初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [
{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
這樣你的第一個圖表就誕生了!
折線圖
折線圖堆疊
堆疊面積圖
漸變堆疊面積圖
北京 AQI 可視化
柱狀圖
堆疊柱狀圖
多 Y 軸
堆疊條形圖
餅圖
南丁格爾玫瑰圖
嵌套環形圖
地理坐標/地圖
地圖柱狀圖變形動畫
關系圖
人物關系圖(環形布局)
NPM 依賴關系圖
矩形樹圖
磁盤占用
旭日圖
Drink Flavors
平行坐標系
AQI 分布(平行坐標)
營養結構(平行坐標)
散點矩陣和平行坐標
—END—
組件預覽地址:https://echarts.apache.org/examples/zh/index.html
開源協議:Apache2.0
開源地址:https://github.com/apache/echarts
*請認真填寫需求信息,我們會在24小時內與您取得聯系。