學習目錄
1.視覺化皮膚介紹
1.1技術要點
1.2案例適配方案
1.3頁面主體佈局
2.Echarts（重點）
2.1echarts介紹
2.2echarts體驗
2.3echarts基礎配置
3.Echarts快速使用
3.1官網例項
3.2.社群Gallery
廢話少說先上效果圖
看完效果圖，我在給大家詳細的解釋一下我們完成這個圖所需要的具體的操作與技術吧！
1.視覺化皮膚介紹
應對現在資料視覺化的趨勢，越來越多企業需要在很多場景(營銷資料，生產資料，使用者資料)下使用，視覺化圖表來展示體現資料，讓資料更加直觀，資料特點更加突出。
01-技術要點
- div + css 佈局
- flex 佈局
- Less
- 原生js + jquery 使用
- rem適配
- echarts基礎
02-案例適配方案
- 設計稿是1920px
- flexible.js 把螢幕分為 24 等份
- cssrem 外掛的基準值是 80px
外掛-配置按鈕—配置擴充套件設定–Root Font Size 裡面 設定。
但是別忘記重啟vscode軟體保證生效
03-頁面主體佈局
- header佈局
- mainbox佈局
- 公共皮膚模組 panel
- 柱形圖 bar
因為我們今天的主題是echarts部分所以前面的這些，我就為大家寫好框架，裡面的佈局相信以大家的能力都是分分鐘解決的事情。
2.Echarts（重點）
echarts介紹
常見的資料視覺化庫：
- D3.js 目前 Web 端評價最高的 Javascript 視覺化工具庫(入手難)
- ECharts.js 百度出品的一個開源 Javascript 資料視覺化庫
- Highcharts.js 國外的前端資料視覺化庫，非商用免費，被許多國外大公司所使用
- AntV 螞蟻金服全新一代資料視覺化解決方案 等等
- Highcharts 和 Echarts 就像是 Office 和 WPS 的關係
ECharts，一個使用 JavaScript 實現的開源視覺化庫，可以流暢的執行在 PC 和移動裝置上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴向量圖形庫 ZRender，提供直觀，互動豐富，可高度個性化定製的資料視覺化圖表。
官網地址：https://www.echartsjs.com/zh/index.html
echarts體驗
下載echarts https://github.com/apache/incubator-echarts/tree/4.5.0
使用步驟（5大步驟）：
1.引入echarts 外掛檔案到html頁面中
2.準備一個具備大小的DOM容器
<div id="main" style="width: 600px;height:400px;"></div>
3.初始化echarts例項物件
var myChart = echarts.init(document.getElementById('main'));
4.指定配置項和資料(option)
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.將配置項設定給echarts例項物件
myChart.setOption(option);
echarts基礎配置
這是要求同學們知道以下配置每個模組的主要作用幹什麼的就可以了
需要了解的主要配置：series xAxis yAxis grid tooltip title legend color
- series
- 系列列表。每個系列通過 type 決定自己的圖表型別
- 大白話：圖示資料，指定什麼型別的圖示，可以多個圖表重疊。
- xAxis：直角座標系 grid 中的 x 軸yAxis：直角座標系 grid 中的 y 軸
- boundaryGap: 座標軸兩邊留白策略 true，這時候刻度只是作為分隔線，標籤和資料點都會在兩個刻度之間的帶(band)中間。
- grid：直角座標系內繪圖網格。
- title：標題元件
- tooltip：提示框元件
- legend：圖例元件
- color：調色盤顏色列表
資料堆疊，同個類目軸上系列配置相同的stack值後 後一個系列的值會在前一個系列的值上相加。
option = {
// color設定我們線條的顏色 注意後面是個陣列
color: ['pink', 'red', 'green', 'skyblue'],
// 設定圖表的標題
title: {
text: '折線圖堆疊123'
},
// 圖表的提示框元件
tooltip: {
// 觸發方式
trigger: 'axis'
},
// 圖例元件
legend: {
// series裡面有了 name值則 legend裡面的data可以刪掉
},
// 網格配置 grid可以控制線形圖 柱狀圖 圖表大小
grid: {
left: '3%',
right: '4%',
bottom: '3%',
// 是否顯示刻度標籤 如果是true 就顯示 否則反之
containLabel: true
},
// 工具箱元件 可以另存為圖片等功能
toolbox: {
feature: {
saveAsImage: {}
}
},
// 設定x軸的相關配置
xAxis: {
type: 'category',
// 是否讓我們的線條和座標軸有縫隙
boundaryGap: false,
data: ['星期一', '週二', '週三', '週四', '週五', '週六', '週日']
},
// 設定y軸的相關配置
yAxis: {
type: 'value'
},
// 系列圖表配置 它決定著顯示那種型別的圖表
series: [
{
name: '郵件營銷',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '聯盟廣告',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '視訊廣告',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接訪問',
type: 'line',
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
3.Echarts快速使用
1.官網例項
官網預設為我們提供了大量的案例，我們需要使用那一種只需要直接點選開啟後複製他們的相關配置，然後按照我上面說的5大步驟進行使用即可。
2.社群Gallery
官方自帶的圖例，可能在很多時候並不能滿足我們的需要，在社群這裡可以找到一些基於echart的高度定製好的圖表，相當於基於jquery開發的外掛，這裡是基於echarts開發的第三方的圖表。
本案例中使用了地圖模擬飛行的案例就是從社群中進行引用的，
參考社群的例子：https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (模擬飛機航線)
實現步驟：
- 第一需要下載china.js提供中國地圖的js檔案
- 第二個因為裡面程式碼比較多，我們新建一個新的js檔案 myMap.js 引入
- 使用社群提供的配置即可。
程式碼已經上傳，如有需要的小夥伴可自行下載：
https://files.cnblogs.com/files/luoyuhao/echarts-master.zip
往上翻，本人也寫了幾篇關於echarts的文章，分別是大資料和年報相關的，又興趣的可以往上翻。
ps:最後呢，如果大家看完樓主的文章覺得對echarts的學習和了解有所幫助，麻煩大家路過點個贊點個關注唄!