右侧不显示数据的原因是没有设置最大值和最小值
// 获取最大值方法
function calMax(arr) {
var max = Math.max.apply(null, arr); // 获取最大值方法
var maxint = Math.ceil(max / 5); // 向上以5的倍数取整
var maxval = maxint * 5 + 5; // 最终设置的最大值
return maxval; // 输出最大值
}
// 获取最小值方法
function calMin(arr) {
var min = Math.min.apply(null, arr); // 获取最小值方法
var minint = Math.floor(min / 1); // 向下以1的倍数取整
var minval = minint * 1 - 5; // 最终设置的最小值
return minval; // 输出最小值
}
// 调用方法获取数据最大值&最小值
......
echarts双Y轴 源码
<template>
<div class="home">
<div id="wire"></div>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
data1: [820, 932, 901, 934, 1290, 1330, 1320, 1330, 1340],
data2: [134, 133, 132, 133, 129, 93, 90, 93, 82]
};
},
mounted() {
this.myChart = this.$echarts.init(document.getElementById("wire"));
this.initData();
},
methods: {
initData() {
// 获取最大值方法
function calMax(arr) {
var max = Math.max.apply(null, arr); // 获取最大值方法
var maxint = Math.ceil(max / 5); // 向上以5的倍数取整
var maxval = maxint * 5 + 5; // 最终设置的最大值
return maxval; // 输出最大值
}
// 获取最小值方法
function calMin(arr) {
var min = Math.min.apply(null, arr); // 获取最小值方法
var minint = Math.floor(min / 1); // 向下以1的倍数取整
var minval = minint * 1 - 5; // 最终设置的最小值
return minval; // 输出最小值
}
// 调用方法,获取数据的最大值&最小值
var maxData1 = calMax(this.data1);
var maxData2 = calMax(this.data2);
var minData1 = calMin(this.data1);
var minData2 = calMin(this.data2);
const option = {
// 图例组件
legend: [
{
top: "30%",
right: "0%",
textStyle: {
fontSize: 12, //字体大小
color: "#" //字体颜色(图例与图例文字配色保持一致)
},
data: [
{
name: "数据1"
}
]
},
{
bottom: "20%",
left: "0%",
textStyle: {
fontSize: 12, //字体大小
color: "#" //字体颜色
},
data: [
{
name: "数据2"
}
]
}
],
// 直角坐标系内绘图网格
grid: {
show: true,
x: 120,
y: 50,
x2: 120,
y2: 50
},
xAxis: {
name: "X轴数据",
type: "category",
data: ["10", "20", "30", "40", "50", "60", "70", "80", "90"],
nameTextStyle: {
padding: [0, 0, 50, 50]
}
},
yAxis: [
{
type: "value",
name: "左侧",
nameTextStyle: {
padding: [0, 0, -55, -150]
},
min: minData1,
max: maxData1,
splitNumber: 6, //设置坐标轴的分割段数
interval: (maxData1 - minData1) / 6, // 标轴分割间隔
axisLabel: {
formatter: function(v) {
return v.toFixed(1); //0表示小数为0位,1表示1位小数,2表示2位小数
},
color: function(value, index) {
return value >= 1000 ? "red" : "green";
}
}
},
{
type: "value",
name: "右侧",
nameTextStyle: {
padding: [0, 50, -50, 200]
},
min: minData2,
max: maxData2,
splitNumber: 6,
interval: (maxData2 - minData2) / 6,
axisLabel: {
formatter: function(v) {
return v.toFixed(2); //0表示小数为0位,1表示1位小数,2表示2位小数
}
}
}
],
series: [
{
name: "数据1",
type: "line",
color: ["#eb9f0d"],
symbol: "none",
smooth: true,
data: this.data1
},
{
name: "数据2",
type: "line",
color: ["#969ac7"],
symbol: "none",
smooth: true,
yAxisIndex: 1, //在单个图表实例中存在多个y轴的时候有用
data: this.data2
}
]
};
this.myChart.setOption(option);
// 自适应布局
let _this = this;
window.addEventListener("resize", function(event) {
_this.myChart.resize();
});
}
}
};
</script>
<style lang="scss" scoped>
.home {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
#wire {
width: 800px;
height: 500px;
border: 1px solid;
}
}
</style>