介紹：
ECharts，一個使用 JavaScript 實現的開源視覺化庫，可以流暢的執行在 PC 和移動裝置上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的向量圖形庫 ZRender，提供直觀，互動豐富，可高度個性化定製的資料視覺化圖表。
ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖，用於地理資料視覺化的地圖、熱力圖、線圖，用於關係資料視覺化的關係圖、旭日圖，多維資料視覺化的平行座標，還有用於 BI 的漏斗圖，儀表盤，並且支援圖與圖之間的混搭。
官網地址：http://echarts.baidu.com/
Echarts使用操作步驟：
1.首先在官網 選擇合適的下載版本
http://echarts.baidu.com/download.html
2.引入Echarts
<script src="js/echarts.js"></script>
3.繪製一個簡單的圖表
準備一個DOM容器
<div style="border:2px solid #666;width:49%;height:450px;float:left" id="chartmain"></div>
4.建立一個簡單的圖表
這樣一個簡單的雷達圖就引入進來了，下面看下效果圖
Echarts實現地圖資料視覺化
- 專案背景
應對現在資料視覺化的趨勢，越來越多企業需要在很多場景(營銷資料，生產資料，使用者資料)下使用，視覺化圖表來展示體現資料，讓資料更加直觀，資料特點更加突出。
- 使用技術
div + css 佈局
flex 佈局
原生js + jquery 使用
rem適配
echarts基礎
- 核心圖表程式碼
（1） 引入到html頁面中
// 柱狀圖1模組
(function() {
// 例項化物件
let myChart = echarts.init(document.querySelector(".bar .chart"));
// 指定配置和資料
let option = {
color: ["#3398DB"],
tooltip: {
trigger: "axis",
axisPointer: {
// 座標軸指示器，座標軸觸發有效
type: "shadow" // 預設為直線，可選為：'line' | 'shadow'
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: [
{
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "直接訪問",
type: "bar",
barWidth: "60%",
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
// 把配置給例項物件
myChart.setOption(option);
})();
（2） 根據需求定製
需求一：修改圖表大小top為10px bottom為 4% grid決定我們的柱狀圖的大小，修改圖表柱形顏色 #2f89cf
color: ["#2f89cf"],
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true
}
需求二：x，y軸相關設定
X軸：
// 設定x軸標籤文字樣式
// x軸的文字顏色和大小
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
// x軸樣式不顯示
axisLine: {
show: false
// 如果想要設定單獨的線條樣式
// lineStyle: {
// color: "rgba(255,255,255,.1)",
// width: 1,
// type: "solid"
}
}
Y軸：
// y 軸文字標籤樣式
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
// y軸線條樣式
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
// width: 1,
// type: "solid"
}
5232},
// y 軸分隔線樣式
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
需求三：修改柱形為圓角以及柱子寬度 series 裡面設定
series: [
{
name: "直接訪問",
type: "bar",
// 修改柱子寬度
barWidth: "35%",
data: [10, 52, 200, 334, 390, 330, 220],
itemStyle: {
// 修改柱子圓角
barBorderRadius: 5
}
}
]
};
需求四：更換對應資料，讓圖表跟隨螢幕自適應
// x軸中更換data資料
data: [ "旅遊行業","教育培訓", "遊戲行業", "醫療行業", "電商行業", "社交行業", "金融行業" ],
// series 更換資料
data: [200, 300, 300, 900, 1500, 1200, 600]
//螢幕自適應
window.addEventListener("resize", function() {
myChart.resize();
});
- 專案實現效果：
反思與總結
經過這次echart專案實驗，我們組成員大概瞭解並掌握了echarts例項化的引用的全部流程，我們現在正處於大資料的時代，有資料的地方，就會少不了資料的視覺化。資料視覺化可以讓資料呈現的更加直觀、及時，而又簡單。資料視覺化的應用貫穿於多個行業，如商業智慧、金融、新聞媒體、銷售、財務、運營、公共服務等。在學習並嘗試使用echarts的過程中，我們也逐漸接觸到視覺化，接觸到大資料的門檻，這是一次對我們來說很好的體驗，以後也希望可以獲得更多全新的前端開發的知識和體驗。
小組成員：安朝陽 雷振 秦昆德 童翔 黃菁