<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '多 Y 軸示例';
let colors, LengData, SelectedData, YaData, SeriesData, DataInfo;
colors = ['#5793f3', '#d14a61', '#675bba', '#66bbee'];
SelectedData = {
降水量: true, 蒸發量: true, 溫度: true, 溫差: true,
}
LengData = ['降水量', '蒸發量', '溫度', '溫差'];
DataInfo = [
{
name: '降水量',
type: 'bar',
yAxisIndex: 0,
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: '蒸發量',
type: 'bar',
yAxisIndex: 1,
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '溫度',
type: 'line',
yAxisIndex: 2,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
},
{
name: '溫差',
type: 'line',
yAxisIndex: 3,
data: [21.0, 32.2, 23.3, 4.5, 7.3, 14.2, 20.3, 55.4, 23.0, 43.5, 13.4, 16.2]
}
];
function Init(sel, dataInfo) {
SelectedData = sel || {};
YaData = [], SeriesData = [];
let Datas = JSON.parse(JSON.stringify(dataInfo));
for (let n = 0, l = LengData.length; n < l; n++) {
// 如果該圖例狀態爲false時，則跳過 不push
if (sel[LengData[n]]) {
YaData.push({
type: 'value',
name: LengData[n],
min: 0,
max: function (val) {
return parseInt(val.max * 1.1).toFixed(2);
},
position: YaData.length % 2 == 0 ? 'left' : "right",
offset: (YaData.length + 1) <= 2 ? 0 : (Math.ceil((YaData.length + 1) / 2) - 1) * 80,
axisLine: {
lineStyle: {
color: colors[n]
}
},
axisLabel: {
formatter: function (value) {
if (n < 2) {
return value + 'ml'
} else {
return value + '°C'
}
}
}
})
Datas[n].yAxisIndex = YaData.length - 1 < 0 ? 0 : YaData.length - 1;
SeriesData.push(Datas[n]);
} else {
Datas[n].data = [];
Datas[n].yAxisIndex = YaData.length - 1 < 0 ? 0 : YaData.length - 1;
SeriesData.push(Datas[n]);
}
}
if (YaData.length == 0) {
YaData = { type: 'value' }
}
option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: (YaData.length / 2) * 10 + '%',
left: (YaData.length / 2) * 10 + '%'
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: LengData,
selected: SelectedData,
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: YaData,
series: SeriesData
};
}
Init(SelectedData, DataInfo);
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
/* 選中圖例 */
myChart.on("legendselectchanged", function (params) {
// 得到當前的圖例顯示隱藏狀態分別有哪些
SelectedData = params.selected;
Init(SelectedData, DataInfo);
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
})
/* 取消選中圖例 */
myChart.on("legendunselected", function (params) {
// 得到當前的圖例顯示隱藏狀態分別有哪些
let selectObj = params.name;
})
</script>
</body>
</html>
說說業務需求，因爲業務上根據分子元素可能會需要展示許多Y軸，而我們展示的時候可能空間往往不夠，所以這個時候我們需要預先展示哪幾種，並且後續可以讓用戶根據圖例來手動觀察需要展示哪些y軸數據
這裏我說一下幾個關鍵點在哪裏，首先需要了解Echarts的圖例API事件legendselectchanged，另外這裏需要注意計算的就是每次Y軸的偏移量計算，其餘的都比較簡單
