两个 yAxis,共享了一个 xAxis。两个 series,也共享了这个 xAxis,但是分别使用不同的 yAxis,使用 yAxisIndex 来指定它自己使用的是哪个 yAxis:
两个y轴坐标,因为数据不同,所以两边各展现一条横线,解决办法
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Echarts 组件</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.js"></script>
<style>
#chart {
height: 400px;
width: 800px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart')
const chart = echarts.init(chartDom)
chart.setOption({
title: {
text: "Echarts 双坐标系", //主标题
subtext: 'Echarts 数据可视化学习' //副标题
},
xAxis: {
type: 'category' //多坐标系需要制定x轴为 category 要不然不会展示数据
},
yAxis: [
{
// min: 0, //设置左侧y轴最小刻度
// max: 100 //设置左侧y轴最大刻度
},
{
// splitLine: {
// show: false //隐藏右边的线条的横线
// }
}
],
dataset: {
source: [
['product', '2012', '2013', '2014', '2015'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
['Milk Tea', 86.5, 92.1, 85.7, 83.1]
]
},
series: [
{
type: 'bar',
seriesLayoutBy: 'row', //按行的方式进行取数据
yAxisIndex: 0
},
{
type: 'line',
seriesLayoutBy: 'row', //按行的方式进行取数据
yAxisIndex: 1
}
]
})
</script>
</body>
</html>
方案1.隐藏右边的线条,折线图部分存在误区
yAxis: [
{
// min: 0, //设置左侧y轴最小刻度
// max: 100 //设置左侧y轴最大刻度
},
{
splitLine: {
show: false //隐藏右边的线条的横线
}
}
],
方案2.设置左侧y轴坐标的最小值和最大值
yAxis: [
{
min: 0, //设置左侧y轴最小刻度
max: 100 //设置左侧y轴最大刻度
},
{
// splitLine: {
// show: false //隐藏右边的线条的横线
// }
}
],