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
}
},
{
name: '指标参数四(单位)',
// max: 1000,
// min: 0,
type: