echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
option1: {
color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF'],
tooltip: {
trigger: 'axis'
},
legend: {
data: ['雨量', '水位', '保证水位', '警戒水位', '累计雨量'],
selected: {
累计雨量: false // 图例为‘累计雨量’的一项默认置灰
},
textStyle: {
fontSize: 16,
color: '#0b4ea5'
},
x: 'center'
},
axisPointer: {
link: { xAxisIndex: 'all' }
},
grid: [
{
left: 50,
right: 50,
height: '22%'
},
{
left: 50,
right: 50,
top: '54%',
height: '40%'
}
],
xAxis: [
{
type: 'category',
boundaryGap: true,
axisLabel: {
show: false
},
position: 'top',
data: [],
axisLine: {
onZero: true,
lineStyle: {
type: 'solid',
color: '#8298AF', // 左边线的颜色
width: '1' // 坐标线的宽度
}
},
axisTick: {
show: false // 去除轴下面的刻度
}
},
{
gridIndex: 1,
type: 'category',
boundaryGap: true,
data: [],
axisLabel: {
textStyle: {
fontSize: 12,
color: '#0b4ea5' // 坐标值得具体的颜色
}
},
axisLine: {
onZero: true,
lineStyle: {
type: 'solid',
color: '#8298AF', // 左边线的颜色
width: '1' // 坐标线的宽度
}
},
axisTick: {
show: false // 去除轴下面的刻度
}
}
],
yAxis: [
{
name: '雨量:mm',
nameLocation: 'start',
nameTextStyle: {
padding: [0, 0, 0, -10], // 四个数字分别为上右下左与原位置距离
color: '#0b4ea5',
fontSize: 16 // 字体大小
},
type: 'value',
// max: 500,
scale: true,
minInterval: 1.5,
axisLabel: {
textStyle: {
fontSize: 16,
color: '#0b4ea5' // 坐标值得具体的颜色
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
},
inverse: true // 反转坐标轴
},
{
gridIndex: 1,
name: '水位:m',
type: 'value',
// inverse: true,
nameTextStyle: {
// 字体样式
color: '#0b4ea5',
fontSize: 16 // 字体大小
},
// scale: true, 接近值
minInterval: 1.5,
axisLabel: {
textStyle: {
fontSize: 16,
color: '#0b4ea5' // 坐标值得具体的颜色
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#0b4ea5'
}
}
}
],
series: [
{
name: '雨量',
type: 'bar',
symbolSize: 8,
hoverAnimation: false,
data: [],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(0, 109, 217, 1)'
},
{
offset: 1,
color: 'rgba(82, 187, 255, 1)'
}
]),
// 柱形图圆角,初始化效果
barBorderRadius: [0, 0, 15, 15]
}
},
barMaxWidth: 20
},
{
name: '水位',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 8,
hoverAnimation: false,
data: [],
connectNulls: true
},
{
name: '保证水位',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 8,
hoverAnimation: false,
data: []
},
{
name: '警戒水位',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 8,
hoverAnimation: false,
data: []
},
{
name: '累计雨量',
type: 'line',
symbolSize: 8,
hoverAnimation: false,
data: []
}
]
},