let showData = [
{ planIn: 10, planOut: 10, realIn: 18, realOut: 18, cancelIn: 12, cancelOut: 12, planArr: 0, time: 4 },
{ planIn: 20, planOut: 19, realIn: 10, realOut: 9, cancelIn: 2, cancelOut: 2, planArr: 0, time: 5 },
{ planIn: 10, planOut: 10, realIn: 10, realOut: 10, cancelIn: 12, cancelOut: 22, planArr: 0, time: 6 },
{ planIn: 10, planOut: 10, realIn: 7, realOut: 8, cancelIn: 2, cancelOut: 2, planArr: 0, time: 7 },
{ planIn: 10, planOut: 10, realIn: 9, realOut: 9, cancelIn: 22, cancelOut: 22, planArr: 0, time: 8 },
{ planIn: 10, planOut: 10, realIn: 10, realOut: 10, cancelIn: 2, cancelOut: 22, planArr: 0, time: 9 },
{ planIn: 10, planOut: 10, realIn: 9, realOut: 8, cancelIn: 12, cancelOut: 22, planArr: 0, time: 10 },
{ planIn: 10, planOut: 10, realIn: 0, realOut: 0, cancelIn: 2, cancelOut: 22, planArr: 14, time: 11 },
{ planIn: 10, planOut: 10, realIn: 0, realOut: 0, cancelIn: 22, cancelOut: 2, planArr: 4, time: 12 },
{ planIn: 10, planOut: 10, realIn: 0, realOut: 0, cancelIn: 12, cancelOut: 22, planArr: 8, time: 13 },
{ planIn: 10, planOut: 10, realIn: 0, realOut: 0, cancelIn: 2, cancelOut: 2, planArr: 14, time: 14 },
{ planIn: 10, planOut: 10, realIn: 0, realOut: 0, cancelIn: 2, cancelOut: 22, planArr: 4, time: 15 },
{ planIn: 10, planOut: 10, realIn: 0, realOut: 0, cancelIn: 2, cancelOut: 2, planArr: 14, time: 16 },
{ planIn: 10, planOut: 10, realIn: 0, realOut: 0, cancelIn: 2, cancelOut: 2, planArr: 7, time: 17 },
{ planIn: 10, planOut: 10, realIn: 0, realOut: 0, cancelIn: 2, cancelOut: 2, planArr: 8, time: 18 },
{ planIn: 10, planOut: 10, realIn: 0, realOut: 0, cancelIn: 2, cancelOut: 22, planArr: 14, time: 19 },
{ planIn: 10, planOut: 10, realIn: 0, realOut: 0, cancelIn: 22, cancelOut: 2, planArr: 4, time: 20 },
{ planIn: 10, planOut: 10, realIn: 0, realOut: 0, cancelIn: 2, cancelOut: 2, planArr: 14, time: 21 },
{ planIn: 10, planOut: 10, realIn: 0, realOut: 0, cancelIn: 22, cancelOut: 2, planArr: 4, time: 22 },
{ planIn: 10, planOut: 10, realIn: 0, realOut: 0, cancelIn: 2, cancelOut: 2, planArr: 9, time: 23 },
{ planIn: 10, planOut: 10, realIn: 0, realOut: 0, cancelIn: 2, cancelOut: 12, planArr: 14, time: 0 },
{ planIn: 10, planOut: 10, realIn: 0, realOut: 0, cancelIn: 12, cancelOut: 2, planArr: 4, time: 1 },
{ planIn: 10, planOut: 10, realIn: 0, realOut: 0, cancelIn: 2, cancelOut: 2, planArr: 14, time: 2 },
{ planIn: 10, planOut: 10, realIn: 0, realOut: 0, cancelIn: 2, cancelOut: 2, planArr: 7, time: 3 },
{ planIn: 10, planOut: 10, realIn: 0, realOut: 0, cancelIn: 2, cancelOut: 2, planArr: 4, time: 4 }
];
let planIn = showData.map(item => item.planIn);
let timeRange = showData.map(item => item.time);
let planOut = showData.map(item => item.planOut);
let realIn = showData.map(item => item.realIn);
let realOut = showData.map(item => item.realOut);
let cancelIn = showData.map(item => item.cancelIn);
let cancelOut = showData.map(item => item.cancelOut);
let planArr = showData.map(item => item.planArr);
let option = {};
option = {
backgroundColor: 'block',
legend: {
itemWidth: 4,
textStyle: { color: '#fff' },
right: 100,
data: ['计划出港', '实际出港', '预测出港', '计划进港', '实际进港', '预计到达', '预测进港']
},
tooltip: {
show: false,
trigger: 'axis'
},
color: ['#3398DB'],
grid: [
//用于调整X轴以及Y轴的位置
{
show: false,
bottom: '10%',
left: 30,
right: 30,
height: '40%'
},
{
show: false,
top: '50%',
left: 30,
right: 30,
height: '-0%',
zlevel: 100
},
{
show: false,
top: '10%',
left: 30,
right: 30,
height: '40%'
}
],
xAxis: [
{
type: 'category',
position: 'bottom',
axisLine: {
show: false
},
axisTick: {
show: false
},
zlevel: 200,
splitLine: {
show: false
},
axisLabel: {
show: true,
align: 'center',
textStyle: {
color: '#A1B6D3',
fontSize: 12
}
},
data: timeRange
},
{
gridIndex: 1,
type: 'category',
position: 'center',
zlevel: 200,
axisLine: {
show: true,
lineStyle: {
color: '#0194DD',
width: 1
//type: 'dashed'
}
},
axisTick: {
show: true
},
axisLabel: {
show: false
},
data: []
},
{
gridIndex: 2,
type: 'category',
position: 'top',
zlevel: 200,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
data: timeRange
}
],
yAxis: [
{
name: '进港',
nameTextStyle: {
color: '#ccc',
fontSize: 14
},
minInterval: 5,
maxInterval: 5,
nameGap: 20,
type: 'value',
inverse: true, //echarts Y轴翻转属性,
position: 'left', //位置属性
axisLabel: {
show: true,
textStyle: {
color: '#A1B6D3',
fontSize: 12
}
},
max: function(value) {
if (value.max % 5 === 0) {
return value.max + 5;
} else {
return value.max + (10 - (value.max % 5));
}
},
axisLine: {
show: false
},
axisTick: { show: false },
splitLine: {
show: false
}
},
{
gridIndex: 1, //对应的是grid 通过grid设置X Y相对位置
show: false
},
{
gridIndex: 2,
name: '出港',
nameGap: 20,
nameTextStyle: {
color: '#ccc',
fontSize: 14
},
minInterval: 5,
maxInterval: 5,
type: 'value',
position: 'left', //双Y轴一个翻转一个不翻转
max: function(value) {
if (value.max % 5 === 0) {
return value.max + 5;
} else {
return value.max + (10 - (value.max % 5));
}
},
axisLabel: {
show: true,
textStyle: {
color: '#A1B6D3',
fontSize: 12
}
},
axisLine: {
show: false
},
axisTick: { show: false },
splitLine: {
show: false
}
}
],
series: [
{
//选取调整好的轴,调整图形是向上还是向下
name: '计划出港',
type: 'bar',
xAxisIndex: 2,
yAxisIndex: 2,
barWidth: 40,
label: {
show: false,
position: 'top',
color: '#fff',
fontSize: 14
},
itemStyle: {
color: '#0D3640',
borderWidth: 1
},
zlevel: 4,
data: planOut
},
{
data: planOut,
type: 'line',
legendHoverLink: false,
smooth: true,
xAxisIndex: 2,
yAxisIndex: 2,
name: '计划出港',
zlevel: 10,
z: 3,
symbolSize: 0.0001, // 控制线条上 点 的大小
lineStyle: {
color: 'transparent'
},
label: {
normal: {
show: true,
position: 'top',
color: '#fff',
fontSize: 14
}
}
},
{
//选取调整好的轴,调整图形是向上还是向下
name: '实际出港',
type: 'bar',
//stack: '出港',
barGap: '-100%',
xAxisIndex: 2,
yAxisIndex: 2,
barWidth: 40,
label: {
show: false
},
itemStyle: {
color: '#4285F4',
borderWidth: 1
},
zlevel: 5,
data: realOut
},
{
data: cancelOut,
type: 'line',
smooth: true,
xAxisIndex: 2,
yAxisIndex: 2,
name: '预测出港',
zlevel: 7,
symbolSize: 0.0001, // 控制线条上 点 的大小
lineStyle: {
color: '#37FBC9'
},
label: {
normal: {
show: true,
position: 'top',
color: '#37FBC9',
fontSize: 14
}
}
},
{
//选取调整好的轴,调整图形是向上还是向下
name: '计划进港',
type: 'bar',
//stack: '出港',
xAxisIndex: 0,
yAxisIndex: 0,
barWidth: 40,
label: {
show: false
},
itemStyle: {
color: '#0D3640',
borderWidth: 1
},
zlevel: 4,
data: planIn
},
{
data: planIn,
type: 'line',
smooth: true,
legendHoverLink: false,
xAxisIndex: 0,
yAxisIndex: 0,
name: '计划进港',
zlevel: 10,
z: 3,
markLine: {
symbol: 'none',
label: { show: false },
lineStyle: {
normal: {
type: 'dashed',
color: '#448BFF',
width: 3
}
},
data: [[{ coord: ['11', 0] }, { coord: ['11', 30] }]]
},
symbolSize: 0.0001, // 控制线条上 点 的大小
lineStyle: {
color: 'transparent'
},
label: {
normal: {
show: true,
position: 'inside',
color: '#fff',
fontSize: 14
}
}
},
{
//选取调整好的轴,调整图形是向上还是向下
name: '实际进港',
type: 'bar',
barGap: '-100%',
//stack: '出港',
xAxisIndex: 0,
yAxisIndex: 0,
barWidth: 40,
label: {
show: false
},
itemStyle: {
color: '#4285F4',
borderWidth: 1
},
zlevel: 5,
data: realIn
},
{
//选取调整好的轴,调整图形是向上还是向下
name: '预计到达',
type: 'bar',
barGap: '-100%',
stack: '出港',
xAxisIndex: 0,
yAxisIndex: 0,
barWidth: 40,
label: {
show: false
},
itemStyle: {
color: '#784DFF',
borderWidth: 1
},
zlevel: 5,
data: planArr
},
{
data: cancelIn,
type: 'line',
smooth: true,
xAxisIndex: 0,
yAxisIndex: 0,
name: '预测进港',
zlevel: 7,
symbolSize: 0.0001, // 控制线条上 点 的大小
lineStyle: {
color: '#37FBC9'
},
label: {
normal: {
show: true,
position: 'bottom',
color: '#37FBC9',
fontSize: 14
}
}
}
]
};