#yyds干货盘点#echarts实现3个y轴的图表
Posted 歆冉
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了#yyds干货盘点#echarts实现3个y轴的图表相关的知识,希望对你有一定的参考价值。
在项目中,有时一个图表可能多个y轴,如何实现呢?
效果如下:
1. 核心代码如下
// 三个y轴
yAxis: [
type: value,
name: 蒸发量,
min: 0,
max: 250,
position: right,
axisLine:
lineStyle:
color: colors[0]
,
axisLabel:
formatter: value ml
,
type: value,
name: 降水量,
min: 0,
max: 250,
position: right,
offset: 80, // y轴位置的偏移量
axisLine:
lineStyle:
color: colors[1]
,
axisLabel:
formatter: value ml
,
type: value,
name: 温度,
min: 0,
max: 25,
position: left,
axisLine:
lineStyle:
color: colors[2]
,
axisLabel:
formatter: value °C
],
series: [
name: 蒸发量,
type: bar,
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: bar,
yAxisIndex: 1, // 对应的y轴的索引值(因为有多个y轴)
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: 2, // 对应y轴的索引值(因为有多个y轴)
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]
]
2. 总结
- echarts中yAxis的配置可是是一个数组,同时在series对应的yAxisIndex索引值即可
以上是关于#yyds干货盘点#echarts实现3个y轴的图表的主要内容,如果未能解决你的问题,请参考以下文章