【高階課程筆記】—— Echarts高階應用（一）
阿新 • • 發佈：2021-10-20
一、多座標軸
多座標軸的常見應用就是一個座標系有兩個y 軸
多座標軸的設定方法：
- 在yAxis 中寫入兩組資料，讓兩組資料的行數保持一致
- 在series 中設定資料時，使用 yAxisIndex 屬性設定系列與哪個y 軸相關聯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多座標軸</title>
<style>
#main{
margin: 20px;
width: 700px;
height: 500px;
}
</style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="../js/echarts.min.js"></script>
<script>
/*基於準備好的dom，初始化echarts例項*/
const myChart = echarts.init(document.getElementById('main'));
/*指定圖表的配置項和資料*/
const option = {
/*圖例*/
legend:{data:['學習人數','就業人數']},
/*提示*/
tooltip:{},
/*x 軸*/
xAxis:{
data:['html','css','js']
},
/*y 軸
* name 座標軸名稱
* min 刻度最小值
* max 刻度最大值
* interval 強制設定座標軸分割間隔
* */
yAxis:[
{name:'學習人數',min:0,max:50,interval:50/5},
{name:'就業人數',min:0,max:900,interval:900/5}
],
/*系列列表 series
* yAxisIndex 當前系列對應的y 軸的索引位置
* */
//行數：5
//學習人數：min:0,max:50,interval:50/5
//就業人數：min:0,max:900,interval:900/5
series:[
{
name:'學習人數',
yAxisIndex:0,
type:'bar',
data:[30,20,40],
},
{
name:'就業人數',
yAxisIndex:1,
type:'bar',
data:[330,450,850],
}
]
};
// 基於配置項顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>二、非同步資料（資料更新）
對於請求資料的方式，ajax、fetch 都可以，這是js 基礎，就不再多說
資料的更新有兩種思路：
- 請求到資料後，setOption()
- 先setOption()，有什麼配置什麼。請求到資料後，再追加配置
注：在資料載入的過程中，還可以使用loading
- 顯示 loading：showLoading()
-
隱藏 loading：hideLoading()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非同步資料</title>
<style>
#main{
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="./js/echarts.min.js"></script>
<script>
const myChart = echarts.init(document.getElementById('main'));
fetch('./js/China.json')
.then((res) => res.json())
.then(data => {
/*註冊地圖*/
echarts.registerMap('china', data);
/*配置項*/
const option = {
title: {
text: '中國地圖',
left:'center'
},
series: {
type: 'map',
map: 'china'
}
};
/*基於配置項顯示圖表*/
myChart.setOption(option);
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非同步資料</title>
<style>
#main{
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="./js/echarts.min.js"></script>
<script>
const myChart = echarts.init(document.getElementById('main'));
//有什麼畫什麼
myChart.setOption({
title: {
text: '中國地圖',
left:'center'
},
series: {
type: 'map',
}
});
fetch('./js/China.json')
.then((res) => res.json())
.then(data => {
/*註冊地圖*/
echarts.registerMap('china', data);
/*配置項*/
const option = {
series: {
map: 'china'
}
};
/*基於配置項顯示圖表*/
myChart.setOption(option);
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非同步資料</title>
<style>
#main{
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="./js/echarts.min.js"></script>
<script>
const myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: '中國地圖',
left:'center'
}
});
/*顯示loading - showLoading()*/
myChart.showLoading();
/*非同步請求資料*/
fetch('./js/China.json')
.then((res) => res.json())
.then(data => {
echarts.registerMap('china', data);
myChart.setOption({
series: {
type: 'map',
map: 'china'
}
});
/*隱藏loading - hideLoading()*/
/*setTimeout(function(){
myChart.hideLoading();
},1000)*/
})
</script>
</body>
</html>
有一個報錯：
跨域資源共享問題，資源存放在本地也就是file://這樣的系統下，而不是網路資源比如http://。
所以造成了這些框架可能找不到對應的資源，需要把其部署成網站（web服務）即可
三、資料集 dataset
dataset 資料集元件是從ECharts 4 開始有的，用於資料管理。
- 將資料寫在每個series 系列中的方法，有以下缺陷：
- 不適合資料處理
- 不利於多個系列共享一份資料
- 不利於基於原始資料進行圖表型別、系列的對映安排
- dataset 的優點：
- 基於原始資料，設定對映關係，形成圖表。
- 資料和配置分離，便於單獨管理。
- 資料可以被多個系列或者元件複用。
- 支援更多的資料的常用格式，例如二維陣列、物件陣列等。
資料集的理解方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>資料集</title>
<style>
#main{
margin: 20px;
width: 700px;
height: 500px;
}
</style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="./js/echarts.min.js"></script>
<script>
//基於準備好的dom，初始化echarts例項
const myChart = echarts.init(document.getElementById('main'));
//資料來源
const source=[
['大前端','學習人數','就業人數'],
['html', 30, 45],
['css', 20, 35],
['js', 40, 75],
];
// 指定圖表的配置項和資料
const option = {
tooltip:{},
/*
* dataset資料集
* source 資料來源 []
* */
dataset:{source},
/*x軸
* type 軸的型別
* category 類目軸，離散型資料
* value 數值軸，連續性資料
* */
xAxis:{type:'category'},
yAxis:{type:'value'},
/*系列列表*/
series:[
{type:'bar'},
{type:'bar'},
]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
資料來源的資料型別可以是 陣列 或 物件陣列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>資料集</title>
<style>
#main{
margin: 20px;
width: 700px;
height: 500px;
}
</style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="./js/echarts.min.js"></script>
<script>
// 基於準備好的dom，初始化echarts例項
const myChart = echarts.init(document.getElementById('main'));
//資料來源
/*const source=[
['大前端','學習人數','就業人數'],
['html', 30, 50],
['css', 20, 60],
['js', 40, 70],
];*/
const source=[
{'大前端':'html','學習人數':30,'就業人數':50},
{'大前端':'css','學習人數':20,'就業人數':60},
{'大前端':'js','學習人數':40,'就業人數':70},
];
// 指定圖表的配置項和資料
const option = {
tooltip:{},
/*
* dataset資料集
* source 資料來源 []
* */
dataset:{source },
/*軸*/
xAxis:{
type:'category'
},
yAxis:{
type:'value'
},
/*系列列表*/
series:[
{type:'bar'},
{type:'bar'}
]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
資料集的行列對映：
- seriesLayoutBy：行列對映方式，會影響系列的劃分方式
- column：基於列對映，預設
- row：基於行對映
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>資料集</title>
<style>
#main{
margin: 20px;
width: 700px;
height: 800px;
}
</style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="./js/echarts.min.js"></script>
<script>
// 基於準備好的dom，初始化echarts例項
const myChart = echarts.init(document.getElementById('main'));
//資料來源
const source=[
['大前端','學習人數', '就業人數'],
['html', 20, 25],
['css', 10, 15],
['js', 30, 40]
];
// 指定圖表的配置項和資料
const option = {
legend: {},
tooltip: {},
//資料集
dataset: {source},
/*grid [{},{}] 在一個echarts 例項中建立多個grid，並設定其位置
* bottom 下邊距，如'55%'
* top 上邊距，如'55%'
* */
grid:[
{bottom:'55%'},
{top:'55%'},
],
/*建立兩個x 軸，分屬兩個網格
* type 軸型別，如category
* gridIndex 繪圖區索引位置
* */
xAxis: [
{type: 'category',gridIndex:0},
{type: 'category',gridIndex:1},
],
/*建立兩個y 軸，分屬兩個網格*/
yAxis:[
{type:'value',gridIndex:0},
{type:'value',gridIndex:1},
],
/*
* series系列
* type 圖表型別
* seriesLayoutBy 行列對映
* column 列對映，預設
* row 行對映
* xAxisIndex x軸索引
* yAxisIndex y軸索引
* */
series: [
{type: 'bar',xAxisIndex:0,yAxisIndex:0},
{type: 'bar',xAxisIndex:0,yAxisIndex:0},
{type: 'bar',xAxisIndex:1,yAxisIndex:1,seriesLayoutBy:'row'},
{type: 'bar',xAxisIndex:1,yAxisIndex:1,seriesLayoutBy:'row'},
{type: 'bar',xAxisIndex:1,yAxisIndex:1,seriesLayoutBy:'row'},
]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
資料集的維度對映：
作用：定義資料的維度資訊。
ECharts 預設會從 dataset.source 的第一行/列中獲取維度資訊。
但是，如果在dataset.source 裡指定了 dimensions，那麼 ECharts 不再會自動從 dataset.source 中獲取維度資訊。
- 全域性維度：dimensions寫在dataset 中，作用於所有系列
- 區域性維度：dimensions寫在series 系列中，作用於其所在的系列
dimensions 中元素的書寫方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>資料集</title>
<style>
#main{
margin: 20px;
width: 700px;
height: 500px;
}
</style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="./js/echarts.min.js"></script>
<script>
// 基於準備好的dom，初始化echarts例項
const myChart = echarts.init(document.getElementById('main'));
//資料來源
const source=[
// ['大前端','學習人數', '就業人數'],
['html', 20, 25],
['css', 10, 15],
['js', 30, 40]
];
//全域性維度
const dimensions=['大前端','學習人數', '就業人數'];
// 指定圖表的配置項和資料
const option = {
legend: {
data:['學習人數','就業人數']
},
tooltip: {},
dataset: {source,dimensions},
xAxis: {type: 'category'},
yAxis: {},
series: [
{
name:'學習人數',
type: 'bar',
//區域性維度
dimensions:[null,{name:'學習人數'}]
},
{
type: 'bar',
},
]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
資料集的encode 編碼對映：
encode 可以定義資料的哪個維度被編碼成什麼。
預設series 裡第一個系列對應的就是資料來源裡的第二列資料。後面的以此類推。
- encode 常見屬性：
- tooltip：['product', 'score‘]，提示資訊
- seriesName：[1, 3]，系列名
- x：x 軸的資料對映
- y：y 軸的資料對映
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>編碼對映</title>
<style>
#main{
margin: 20px;
width: 700px;
height: 500px;
}
</style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="./js/echarts.min.js"></script>
<script>
// 基於準備好的dom，初始化echarts例項
const myChart = echarts.init(document.getElementById('main'));
//維度對映
const dimensions=['大前端','學習人數', '就業人數'];
//資料來源
const source =[
['html', 20, 25],
['css', 10, 15],
['js', 30, 40],
];
// 指定圖表的配置項和資料
const option = {
tooltip:{},
dataset: {dimensions,source},
/*設定類目軸和數值軸*/
xAxis:{type:'category'},
yAxis:{type:'value'},
/*encode 編碼對映
* x x軸維度
* y y軸維度
* seriesName 系列名，n|[n]|[n,m,...]
* tooltip 提示資訊，n|[n]|[n,m,...]
* */
series:{
type:'bar',
encode:{
x:0,
y:2,
// seriesName:2,
tooltip:[1,2]
}
}
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
四、區域縮放dataZoom
作用：概覽整體，觀察細節
dataZoom 元件的型別：
- 內建型資料區域縮放元件（dataZoomInside）：內置於座標系中，使使用者可以在座標系上通過滑鼠拖拽、滑鼠滾輪、手指滑動（觸屏上）來縮放或漫遊座標系。
- 滑動條型資料區域縮放元件（dataZoomSlider）：有單獨的滑動條，使用者在滑動條上進行縮放或漫遊。
- 框選型資料區域縮放元件（dataZoomSelect）：提供一個選框進行資料區域縮放。即 toolbox.feature.dataZoom，配置項在 toolbox 中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dataZoom</title>
<style>
#main{
margin: 20px;
width: 700px;
height: 500px;
}
</style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="./js/echarts.min.js"></script>
<script>
// 基於準備好的dom，初始化echarts例項
const myChart = echarts.init(document.getElementById('main'));
//資料來源
const source = [
//x y z
[2, 1, 10],
[4, 2, 20],
[6, 3, 30],
[8, 4, 50],
[10, 5, 50],
[12, 6, 60],
[14, 7, 70],
[16, 8, 80],
[18, 9, 90],
];
// 指定圖表的配置項和資料
const option = {
tooltip: {},
/*工具欄 toolbox
* feature{} 工具配置項
* dataZoom{} 框選型縮放
* */
toolbox:{
feature:{
dataZoom:{}
}
},
/*
* x 軸
* min 最小值
* dataMin 取所有資料中的最小值
* max 最大值
* dataMax 取所有資料中的最大值
* */
xAxis: {
type: 'value',
min: 'dataMin',
max: 'dataMax',
},
yAxis: {
type: 'value',
min: 'dataMin',
max: 'dataMax',
},
/*
* dataZoom 區域縮放 [{},{}]
* type 縮放方式
* inside 內建縮放，通過滑鼠的平移縮放實現
* slider 滑動條縮放
* xAxisIndex 設定 dataZoom-inside 元件控制的 x軸
* [n] 控制xAxis 中的索引位置為n 的軸
* start 起始位，百分百 [0,100]
* end 結束位，百分百 [0,100]
* */
dataZoom:[
{
type:'inside',
// xAxisIndex:[0],
start:0,
end:100
},
/*{
type:'slider',
start:0,
end:100
},*/
],
/*資料集*/
dataset:{source},
/*系列列表*/
series: [
{
name: '系列 1',
type: 'scatter',
itemStyle: {
opacity: 0.7
},
symbolSize: function (val) {
return val[2]/2;
},
},
]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
注：課程來自開課吧
人與人的差距是：每天24小時除了工作和睡覺的8小時，剩下的8小時，你以為別人都和你一樣發呆或者刷視訊