學習目錄
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的學習和了解有所幫助，麻煩大家路過點個贊點個關注唄!
可加QQ群：186841119