本文介绍了如何使用Echarts实现具有多个y轴的折线图，详细讲解了配置option对象，包括x轴、y轴的设置，以及如何通过offset属性调整y轴位置，实现多个曲线图并列展示。示例代码展示了如何配置不同颜色和样式的y轴，以及曲线数据的设置。
Echarts实现多个x轴或y轴曲线图
Echarts实现多个x轴或y轴曲线图
效果图如下：
1.1 配置option对象
option:{
// 设置 x 轴的样式
xAxis:{},
// 设置 y 轴的样式
yAxis:[],
// 设置每条曲线的数据和样式
series:[],
// 设置鼠标hover时的提示信息
tooltip:{},
// 调整表格两边的空白的区域
grid:{},
// 调整图样的名称
legend:{}
// 定义图样和每条曲线的颜色
color:[]
}
yAixs 用来配置 y 轴的数据，样式和名称，当把 yAxis 设置为一个数组，且给数组添加多个对象时，就可以实现多个 y 轴的效果。
但是这些 y 轴都是重叠的，我们可以通过每个 y 轴的 offset 属性来调整 y 轴使它们到达合适的位置
通过 axisTick 和axisLabel 属性可以分别设置 y 轴上的刻度和刻度值的位置，是在左侧显示还是在右侧
如果表格左右的留白空间不足以放下多个 y 轴，可以通过设置 grid 属性来调整空白和图像的比例
具体实现代码如下：
option = {
yAxis: [
{
name: '指标参数一(单位)',
type: 'value',
// max: 700,
// min: 0,
// 让表格的刻度向靠里侧显示
axisTick: {
inside: true
},
axisLabel: {
inside: true
},
// 设置刻度线的颜色等样式
axisLine: {
lineStyle: {
color: 'red',
width: 3
}
},
splitLine: {
show: true, //想要不显示网格线，改为false
lineStyle: {
// 设置网格为虚线
type: 'dashed'
}
}
},
{
name: '指标参数二(单位)',
// max: 800,
// min: 0,
type: 'value',
axisLine: {
lineStyle: {
color: 'orange',
width: 3
}
},
splitLine: {
show: false //想要不显示网格线，改为false
},
// 设置坐标轴偏移位置
offset: -1060
},
{
name: '指标参数三(单位)',
// max: 900,
// min: 0,
type: 'value',
axisLine: {
lineStyle: {
color: 'green',
width: 3
}
},
offset: -1160,
splitLine: {
show: false //想要不显示网格线，改为false
}
},
{
<
最低0.47元/天 解锁文章
扫一扫
1097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
