在Echarts中,y轴通常只有一个,即左侧的数据。如果您想要在y轴的两边都显示数据,您可能需要创建两个y轴,并分别为它们设置数据。
以下是一个简单的例子:
<template>
<div id="main" style="width: 100%;height:400px;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
mounted() {
const myChart = echarts.init(document.getElementById('main'));
// 生成模拟数据
const data1 = [];
const data2 = [];
for (let i = 0; i < 100; i++) {
data1.push([i, Math.random() * 100]);
data2.push([i, Math.random() * 100]);
}
// 配置选项
const option = {
xAxis: {
type: 'value',
boundaryGap: false,
},
yAxis: [
{
type: 'value',
name: 'Y Axis 1',
min: 0,
max: 100,
splitNumber: 5,
},
{
type: 'value',
name: 'Y Axis 2',
min: 0,
max: 100,
splitNumber: 5,
position: 'right',
axisLine: { onZero: false },
axisLabel: { formatter: '{value} °C' },
},
],
series: [
{
name: 'series1',
type: 'line',
data: data1,
yAxisIndex: 0, //这里是关键与Y轴的那个数据对应
},
{
name: 'series2',
type: 'line',
data: data2,
yAxisIndex: 1,
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
};
</script>
在这个例子中,我们首先创建了一个Echarts实例,并将其挂载到一个id为"main"的div元素上。然后,我们生成了两个模拟数据数组data1和data2,每个数组包含100个随机数。
接着,我们定义了两个y轴,分别命名为Y Axis 1和Y Axis 2,并设置了一些基本的属性,如最小值、最大值和分割数目。注意,我们还为右侧的y轴设置了position: ‘right’,以将其放置在图表的右侧。
最后,我们定义了两个系列,分别使用data1和data2作为数据源。我们还为每个系列设置了yAxisIndex属性,以指定它们对应的y轴。这样,左右两侧的y轴就会分别与不同的数据对应,从而实现双y轴的效果。