echarts的基础用法就不讲了,官网上有很多demo,复制粘贴就能跑。这里主要整理一下笔者在公司中的常用配置。
1.双Y轴
当你的数据出现多条折线,而有的线条的数据很大,有的线条的数据很小,如果都统一放在一条Y轴上显示数据,则数据量小的会非常贴近X轴,这样就看不出数据的变化趋势,此时可以将数据分别展示,数据量大的在一边展示,数据量小的在另一边展示。
![](https://i-blog.csdnimg.cn/blog_migrate/b9d43a23f646831ef3a4094fca341a5b.png)
只需要配置好options.yAxis
,然后在options.series
中,给每个数据配置yAxisIndex
即可,0是左边,1是右边。
options = {series: [{data: [...],type: "line",yAxisIndex: 0,},{data: [...],type: "line",yAxisIndex: 1,},...],yAxis: [{type: 'value',name: '',axisLabel: {formatter: '{value}',},alignTicks: true,axisLine: {show: true,},},{type: 'value',name: '',axisLabel: {formatter: '{value}',},alignTicks: true,axisLine: {show: true,},},],
}
2.loading效果
echa