整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
著大數據時代的來臨，社會對大數據人才的需求也日益旺盛，自然少不了我們前端工程師，我們前端工程師能做什么呢？這個自然就是做大數據可視化了，數據再多，沒有很直觀的呈現那也是白搭。現在好多政府企事業單位對大屏可視化的項目需求日益旺盛，這無疑給我們前端工程更多的機會，那我們如何入手做一款漂亮絢麗的大數據看板呢。
這個案例是不是直觀呢：
是不是很高科技上檔次呢，在來看一段視頻的動態效果：
<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/releasesnpm 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小時內與您取得聯系。
