echarts折线双Y双X对比图实例要求两个Y轴在图中间
时间: 2024-05-15 07:18:01 浏览: 27
微信小程序使用echarts获取数据并生成折线图
5星 · 资源好评率100%
好的,我明白了。关于您的问题,您可以使用echarts中的grid组件来实现双Y轴在图中间。您可以设置grid组件的属性containLabel为true来让坐标轴标签显示在grid区域内。此外,您还需要在每个y轴上设置position属性来控制它们在grid中的位置。以下是一个实现双Y轴在图中间的例子:
```javascript
option = {
grid: {
containLabel: true,
left: '10%',
right: '10%',
bottom: '10%',
top: '10%',
},
xAxis: [
{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
},
{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
gridIndex: 1,
},
],
yAxis: [
{
type: 'value',
position: 'left',
},
{
type: 'value',
position: 'right',
},
],
series: [
{
name: '蒸发量',
type: 'line',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6],
yAxisIndex: 0,
},
{
name: '降水量',
type: 'line',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6],
yAxisIndex: 1,
},
],
};
```
在这个例子中,我们设置了一个包含标签的grid组件,并且在xAxis和yAxis中分别定义了两个坐标轴。我们在第二个y轴上设置了gridIndex属性,并将其设置为1,这样第二个y轴会出现在grid组件的下面。然后,我们在series中分别对两个系列指定了它们使用的y轴。
阅读全文