// 初始化近7日泊位使用趋势折线图
initLineChart(lineData) {
if (!this.lineChart) {
this.lineChart = echarts.init(document.getElementById('lineChart'));
}
const option = {
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(0, 255, 233,0)'
},
{
offset: 0.5,
color: 'rgba(255, 255, 255,1)'
},
{
offset: 1,
color: 'rgba(0, 255, 233,0)'
}
],
global: false
}
}
}
},
textStyle: {
fontFamily: 'DINMittelschrift-Alternate'
},
grid: {
top: '60',
left: '14',
right: '20',
bottom: '14',
containLabel: true
},
legend: {
selected:{
'利用率':true,
'周转率':true
},
right: '10',
top: '8',
itemWidth: 13,
itemHeight: 13,
itemGap: 10,
textStyle: {
color: LineColor,
fontSize: 12
},
data: [{ name: '利用率',icon: 'image://'+ baseUrl + 'static/images/analy/analy-yellow.png' },
{ name: '周转率',icon: 'image://'+ baseUrl + 'static/images/analy/analy-lig-green.png'}]
},
xAxis: [
{
type: 'category',
axisLine: { show: false },
splitArea: { show: false },
axisLabel: {
color: LineColor
},
axisLine: {
show: true,
lineStyle: {
color: LineColor, // 坐标轴的颜色
},
},
axisTick: { show: false },
splitLine: { show: false },
boundaryGap: false,
data: lineData.date
}
],
yAxis: [
{
type: 'value',
axisTick: { show: false },
axisLine: {
show: false,
lineStyle: {
color: LineColor, // 坐标轴的颜色
},
},
splitLine: {
// 分割线配置
show: true,
lineStyle: {
color: LineDivisionColor,
},
},
}
],
series: [
{
name: '利用率',
type: 'line',
showSymbol: false,
showAllSymbol: false,
lineStyle: {
normal: {
color: Color[0]
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: AreaColor[0]
},
{
offset: 1,
color: 'rgba(3, 216, 162, 0)'
}
],
false
)
}
},
data: lineData.useRatio
},
{
name: '周转率',
type: 'line',
showSymbol: false,
showAllSymbol: true,
lineStyle: {
normal: {
color: Color[1]
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: AreaColor[1]
},
{
offset: 1,
color: 'RGBA(0, 149, 255, 0)'
}
],
false
)
}
},
data: lineData.velocityRatio
}
],
color: Color
};
this.lineChart.setOption(option);
let that = this;
this.lineChart.on('legendselectchanged',function(params){
debugger
let selected=params.selected;
let setiesName=params.name;
switch(setiesName){
case '利用率' :
if(selected['利用率']){
option.legend.data[0].icon='image://'+ baseUrl + 'static/images/analy/analy-yellow.png';
option.legend.selected['利用率']=true;
}else{
option.legend.data[0].icon='image://'+ baseUrl + 'static/images/analy/analy-no.png';
option.legend.selected['利用率']=false;
}
break;
case '周转率':
if(selected['周转率']){
option.legend.data[1].icon='image://'+ baseUrl + 'static/images/analy/analy-lig-green.png';
option.legend.selected['周转率']=true;
}else{
option.legend.data[1].icon='image://'+ baseUrl + 'static/images/analy/analy-no.png';
option.legend.selected['周转率']=false;
}
break;
}
that.lineChart.setOption(option);
})
},
网友评论