echarts多条X轴 多条Y轴显示配置
const option = {
grid: {
left: '5%',
right: '8%',
bottom: '5%',
containLabel: true
},
legend: {
data: [
{ name: this.fragmentName, icon: 'line' },
{ name: this.lineName }
],
right: 10
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLine: {
show: false,
onZero: false
},
title: false,
axisTick: {
show: false
},
axisLabel: {
show: false
},
data: _this.xData
},
{
type: 'category',
boundaryGap: false,
position: 'bottom',
axisTick: {
show: false
},
axisLine: {
show: false, // 不显示坐标轴线
onZero: false
},
axisLabel: {
showMaxLabel: true,
textStyle: {
color: '#8E8DA7' // 横坐标轴上文字颜色
},
fontSize: 10,
margin: 10
},
data: _this.date
}
],
yAxis: [
{
name: this.fragmentName,
type: 'value',
nameTextStyle: {
color: '#8E8DA7',
fontSize: 10
},
axisLabel: {
// formatter: '{value}',
// 如果是多数据的话自定义Y轴,如果不是就正常显示
formatter: !_this.isMultidata ? '{value}' : function(v, i) {
// console.log('y轴刻度', v, i)
if (i === 0) {
v = -0.10
}
if (i === 1) {
v = -0.05
}
if (i === 2) {
v = 1.00
}
if (i === 3) {
v = 1.05
}
if (i === 4) {
v = 1.10
}
return v
},
textStyle: {
color: '#8E8DA7'
},
fontSize: 10,
margin: 20
},
axisLine: {
show: false
},
axisTick: {
show: false,
alignWithLabel: true // 保证刻度线和标签对齐
},
splitLine: {
show: true, // 显示网格线
lineStyle: {
color: 'rgba(142, 141, 167, 0.1)'
}
}
},
{
name: this.lineName,
alignTicks: true,
type: 'value',
nameTextStyle: {
color: '#8E8DA7',
fontSize: 10,
textStyle: {
color: '#8E8DA7'
}
},
axisLabel: {
// formatter: '{value}',
// 如果是多数据的话自定义Y轴,如果不是就正常显示
formatter: !_this.isMultidata ? '{value}' : function(v, i) {
// console.log('y轴刻度', v, i)
if (i === 0) {
v = -0.10
}
if (i === 1) {
v = -0.05
}
if (i === 2) {
v = 1.00
}
if (i === 3) {
v = 1.05
}
if (i === 4) {
v = 1.10
}
return v
},
textStyle: {
color: '#8E8DA7'
},
fontSize: 10
},
axisLine: {
show: false
},
axisTick: {
show: false,
alignWithLabel: true // 保证刻度线和标签对齐
},
splitLine: {
show: true, // 显示网格线
lineStyle: {
color: 'rgba(142, 141, 167, 0.1)'
}
}
}
],
series: [
{
name: this.fragmentName,
type: 'line',
areaStyle: {},
lineStyle: {
width: 1
},
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: '#E6B37F', // 图例的颜色
lineStyle: {
color: '#E6B37F'// 线的颜色
}
}
},
// prettier-ignore
data: _this.fragmentData
},
{
name: this.lineName,
type: 'line',
yAxisIndex: 1,
symbol: 'emptyCircle',
connectNulls: true,
itemStyle: {
normal: {
color: '#4842F2', // 图例的颜色
lineStyle: {
color: '#4842F2'// 线的颜色
}
}
},
lineStyle: {
width: 1
},
emphasis: {
focus: 'series'
},
// prettier-ignore
data: _this.pointData
}
]
}