多图表/多Y轴echarts 柱状配置项内容和展示
多图表/多Y轴展示值
配置项如下
var colors = ["#FA607F", "#FF6531", "#2AC290", "#FBB900", "#359EFF", "#7D65FF"];
option = {
backgroundColor: "#ffffff",
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['光照强度', '空气温度', '空气湿度', '土壤温度', '土壤湿度', '土壤EC']
},
dataZoom: {
top: '50%',
height: '30',
type: 'inside',
show: true,
xAxisIndex: [0, 1],
startValue: 20,
endValue: 40
},
animation: false,
grid: [{
left: 50,
right: 50,
height: '40%',
width: '80%'
}, {
left: 50,
right: 50,
top: '55%',
height: '40%',
width: '80%'
}],
xAxis: [{
type: 'category',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50],
axisTick: {
show: false,
},
gridIndex: 0
}, {
gridIndex: 1,
axisLabel: {
show: false
},
type: 'category',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50],
position: 'top'
}],
yAxis: [{
splitLine: {
show: false
},
type: 'value',
name: '空气温度',
min: 0,
max: 65,
axisLabel: {
formatter: '{value} °C'
},
axisTick: {
show: false
},
axisLine: {
show: false
},
gridIndex: 0
},
{
splitLine: {
show: false
},
type: 'value',
name: '土壤温度',
min: 0,
max: 65,
inverse: true,
axisLabel: {
formatter: '{value} °C'
},
axisTick: {
show: false
},
axisLine: {
show: false
},
gridIndex: 1,
},
{
type: 'value',
name: '空气湿度',
position: 'right',
min: 0,
max: 100,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
formatter: '{value} RH'
},
gridIndex: 0
},
{
type: 'value',
name: '土壤水分',
position: 'right',
inverse: true,
min: 0,
max: 60,
axisLabel: {
formatter: '{value} %'
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
gridIndex: 1
},
{
type: 'value',
name: '光照强度',
position: 'right',
offset: 60,
min: 0,
max: 120000,
axisLabel: {
formatter: '{value} Lux'
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
gridIndex: 0
},
{
type: 'value',
name: '土壤EC',
position: 'right',
offset: 60,
inverse: true,
min: 0,
max: 6000,
axisLabel: {
formatter: '{value} μS/cm'
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
gridIndex: 1
},
],
series: [{
name: '空气温度',
type: 'bar',
barWidth: '10px',
data: [-12 + 20, -8 + 20, 0 + 20, 12 + 20, 20 + 20, 25 + 20, 28 + 20, 32 + 20, 28 + 20, 25 + 20, 20 + 20, -1 + 20, -12 + 20, -8 + 20, 0 + 20, 12 + 20, 20 + 20, 25 + 20, 28 + 20, 32 + 20, 28 + 20, 25 + 20, 20 + 20, -1 + 20, -12 + 20, -8 + 20, 0 + 20, 12 + 20, 20 + 20, 25 + 20, 28 + 20, 32 + 20, 28 + 20, 25 + 20, 20 + 20, -1 + 20, -12 + 20, -8 + 20, 0 + 20, 12 + 20, 20 + 20, 25 + 20, 28 + 20, 32 + 20, 28 + 20, 25 + 20, 20 + 20, -1 + 20, -12 + 20, -8 + 20, 0 + 20, 12 + 20, 20 + 20, 25 + 20, 28 + 20, 32 + 20, 28 + 20, 25 + 20, 20 + 20, -1 + 20]
},
{
name: '土壤温度',
type: 'bar',
barWidth: '10px',
xAxisIndex: 1,
yAxisIndex: 1,
data: [-12 + 20, -8 + 20, 0 + 20, 12 + 20, 20 + 20, 25 + 20, 28 + 20, 32 + 20, 28 + 20, 25 + 20, 20 + 20, -1 + 20, -12 + 20, -8 + 20, 0 + 20, 12 + 20, 20 + 20, 25 + 20, 28 + 20, 32 + 20, 28 + 20, 25 + 20, 20 + 20, -1 + 20, -12 + 20, -8 + 20, 0 + 20, 12 + 20, 20 + 20, 25 + 20, 28 + 20, 32 + 20, 28 + 20, 25 + 20, 20 + 20, -1 + 20, -12 + 20, -8 + 20, 0 + 20, 12 + 20, 20 + 20, 25 + 20, 28 + 20, 32 + 20, 28 + 20, 25 + 20, 20 + 20, -1 + 20, -12 + 20, -8 + 20, 0 + 20, 12 + 20, 20 + 20, 25 + 20, 28 + 20, 32 + 20, 28 + 20, 25 + 20, 20 + 20, -1 + 20]
},
{
name: '空气湿度',
type: 'line',
smooth: true,
xAxisIndex: 0,
yAxisIndex: 2,
data: [10, 20, 30, 40, 50, 60, 66, 70, 28, 25, 99, 1, 10, 20, 30, 40, 50, 60, 66, 70, 28, 25, 99, 1, 10, 20, 30, 40, 50, 60, 66, 70, 28, 25, 99, 1, 10, 20, 30, 40, 50, 60, 66, 70, 28, 25, 99, 1, 10, 20, 30, 40, 50, 60, 66, 70, 28, 25, 99, 1]
},
{
name: '土壤水分',
type: 'line',
smooth: true,
xAxisIndex: 1,
yAxisIndex: 3,
data: [50, 8, 20, 12, 20, 25, 28, 32, 28, 25, 20, 40, 50, 8, 20, 12, 20, 25, 28, 32, 28, 25, 20, 40, 50, 8, 20, 12, 20, 25, 28, 32, 28, 25, 20, 40, 50, 8, 20, 12, 20, 25, 28, 32, 28, 25, 20, 40, 50, 8, 20, 12, 20, 25, 28, 32, 28, 25, 20, 40]
},
{
name: '光照强度',
type: 'line',
smooth: true,
xAxisIndex: 0,
yAxisIndex: 4,
data: [5000, 80000, 20000, 12000, 30000, 55000, 80000, 32000, 28000, 25000, 20000, 40000, 5000, 80000, 20000, 12000, 30000, 55000, 80000, 32000, 28000, 25000, 20000, 40000, 5000, 80000, 20000, 12000, 30000, 55000, 80000, 32000, 28000, 25000, 20000, 40000, 5000, 80000, 20000, 12000, 30000, 55000, 80000, 32000, 28000, 25000, 20000, 40000, 5000, 80000, 20000, 12000, 30000, 55000, 80000, 32000, 28000, 25000, 20000, 40000]
},
{
name: '土壤EC',
type: 'line',
smooth: true,
xAxisIndex: 1,
yAxisIndex: 5,
data: [500, 120, 5000, 120, 3000, 5500, 800, 320, 280, 250, 200, 400, 500, 120, 5000, 120, 3000, 5500, 800, 320, 280, 250, 200, 400, 500, 120, 5000, 120, 3000, 5500, 800, 320, 280, 250, 200, 400, 500, 120, 5000, 120, 3000, 5500, 800, 320, 280, 250, 200, 400, 500, 120, 5000, 120, 3000, 5500, 800, 320, 280, 250, 200, 400]
}
]
};
截图如下
