option = {
// backgroundColor: '#0c2d55',
tooltip: {
trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'cross' // 默认为直线，可选为：'line' | 'shadow' | 'cross' , shadow表示阴影，cross为十字准星
},
formatter: function (params) {
//params[0].marker,marker参数为提示语前面的小圆点
return params[0].name +
"<br>" + params[0].marker + "货量" + params[0].value + '吨' +
"<br>" + params[4].marker + "进港装载率" + params[4].value + '%' +
"<br>" + params[5].marker + "出港装载率" + params[5].value + '%'
}
},
grid: {
top: '20%',
left: '2%',
right: '2%',
bottom: '12%', //网格图（柱状图、折线图、气泡图等）离底部的距离，也可以用像素比如10px
containLabel: true //grid 区域是否包含坐标轴的刻度标签。false可能溢出，默认为false
},
legend: {
textStyle: {
color: '#fff',
fontSize: 22,
fontWeight: "bold"
},
// itemWidth: 30, // 图例标记的图形宽度。
// // itemGap: 20, // 图例每项之间的间隔。
// itemHeight: 10, // 图例标记的图形高度。
// // itemGap: 110,
// itemStyle:{
// // color:'red'
// },
// lineStyle:{
// width:30,
// type:'dashed',
// color:'red'
// },
data: ['货量', '进港装载率', '出港装载率'],
right: "center", //组件离容器左侧的距离，可以是left,center,right，也可以是像素px和百分比10%
bottom: "5px"
},
animation: true,
xAxis: {
type: 'category',
data: ['A320', 'A321', 'A322', 'A323', 'B737', 'B738', 'B747', 'B787', 'A380', 'C919'],
axisLine: {
show: true,
onZero: true,
symbol: "none",
lineStyle: {
color: "rgb(21,93,174)"
}
},
axisLabel: {
textStyle: {
color: 'rgba(233, 240, 255, 1)',
fontWeight: 500,
fontSize: '20'
}
},
axisTick: {
show: false
},
},
yAxis: [
{
name: '吨',
nameTextStyle: {
color: 'rgb(233,240,255)',
fontSize: 22,
padding: 10,
},
min: 0,//最小
max: 250,//最大
interval: 50,//相差
type: 'value',
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgb(21,93,174)'
},
},
axisTick: {
show: false,
inside: true,
length: 7
},
axisLine: {
show: true,
lineStyle: {
color: 'rgb(21,93,174)'
}
},
//坐标值标注
axisLabel: {
show: true,
textStyle: {
color: 'rgba(195, 213, 248, 1)',
fontSize: 22
}
},
},
{
name: '装载率',
nameTextStyle: {
color: 'rgb(233,240,255)',
fontSize: 22,
padding: 10,
},
min: 0,//最小
max: 25,//最大
interval: 5,//相差
type: 'value',
splitLine: {
show: false,
// show: true,
// lineStyle: {
// type: 'dashed',
// color: 'rgb(21,93,174)'
// }
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: 'rgb(21,93,174)'
}
},
//坐标值标注
axisLabel: {
show: true,
textStyle: {
color: 'rgba(195, 213, 248, 1)',
fontSize: 22
},
formatter: '{value} %'
},
},
],
series: [
{
data: [180, 160, 155, 158, 130, 151, 150, 170, 150, 162],
type: 'bar',
name: '货量',
yAxisIndex: 0,
backgroundStyle: {
// color: "rgba(111, 111, 22, 1)"
},
//坐标轴显示器的文本标签
label: {
show: false,
},
barWidth: 30,
//柱条颜色
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, color: 'rgb(12,160,254)' // 0% 处的颜色
}, {
offset: 1, color: 'rgb(10,239,255)' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
animationEasing: "linear",
animationEasingUpdate: "quadraticIn", //数据更新时的缓动效果
animationDurationUpdate: 300, //数据更新动画的时长
animation: true, //开启动画
animationDuration: 0,
z: 1,
},
{
// 值分隔
type: "pictorialBar",
itemStyle: {
normal: {
color: "#0F375F",
},
},
yAxisIndex: 0,
symbolRepeat: "fixed",
symbolMargin: 3,
symbol: "rect",
symbolClip: true,
symbolSize: [30, 5],
symbolPosition: "start",
symbolOffset: [0, -1],
// symbolBoundingData: this.total,
data: [180, 160, 155, 158, 130, 151, 150, 170, 150, 162],
width: 25,
z: 0,
zlevel: 3,
},
{
//辅助背景图形
name: "背景条",
type: "bar", //pictorialBar
barWidth: "30",
barGap: "-100%",
itemStyle: {
normal: {
borderWidth: 30,
color: "rgb(15,56,128)",
},
barBorderRadius: 20,
},
yAxisIndex: 0,
data: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
z: 0,
zlevel: 0,
},
{
// 背景分隔
type: "pictorialBar",
itemStyle: {
normal: {
color: "#0F375F",
},
},
symbolRepeat: "fixed",
symbolMargin: 3,
symbol: "rect",
symbolClip: true,
symbolSize: [30, 5],
symbolPosition: "start",
symbolOffset: [0, -1],
// symbolBoundingData: this.total,
yAxisIndex: 0,
data: [250, 250, 250, 250, 250, 250, 250, 250, 250, 250],
width: 25,
z: 0,
zlevel: 1,
},
{
name: "进港装载率",
type: "line",
showAllSymbol: true, //显示所有图形。
yAxisIndex: 1,
symbol: 'circle', //标记的图形为实心圆
symbolSize: 6, //标记的大小
z: 15,
zlevel: 2,
itemStyle: {
color: 'rgba(0, 0, 0, 1)',
borderWidth: '2',
borderColor: 'rgba(142, 76, 184, 1)',
},
lineStyle: {
color: 'rgba(142, 76, 184, 1)',
},
smooth: true,
areaStyle: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
// color: 'rgba(65, 197, 95, 0.4)',
color: 'rgba(142, 76, 184, 0.4)',
},
{
offset: 0.6,
// color: 'rgba(65, 197, 95, 0.4)',
color: 'rgba(142, 76, 184, 0.2)',
},
{
offset: 1,
// color: 'rgba(255,255,255, 0)',
color: 'rgba(142, 76, 184, 0)',
},
],
false
),
},
data: [21, 24, 8, 22, 16, 19, 23, 19, 24, 23]
},
{
name: "出港装载率",
type: "line",
showAllSymbol: true, //显示所有图形。
yAxisIndex: 1,
symbol: 'circle', //标记的图形为实心圆
symbolSize: 6, //标记的大小
z: 15,
zlevel: 2,
itemStyle: {
color: '#333',//拐点颜色
// borderColor: '#fff600',//拐点边框颜色
// color: 'rgba(0, 0, 0, 1)',
borderWidth: 2,
borderColor: 'rgba(27,204,102)',
},
lineStyle: {
color: 'rgba(27,204,102)',
},
smooth: true,
areaStyle: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(27,204,102,0.4)',
// color: 'rgba(137,32,200, 0.4)',
},
{
offset: 0.6,
color: 'rgba(27,204,102,0.2)',
// color: 'rgba(137,32,200, 0.4)',
},
{
offset: 1,
// color: 'rgba(137,32,200, 0)',
color: 'rgba(27,204,102,0)',
},
],
false
),
},
data: [23, 20, 18, 12, 16, 17, 19, 20, 15, 19]
}
],
}