linechart: function(num) {
var mySize = document.getElementById('consumer-trend-line');
mySize.style.width = 360 + 'px';
mySize.style.height = 260 + 'px';
var myLineChart = echarts.init(mySize);
var xdata = this.lineDatas.map(v => v.name);
var year = this.dataRangeArr[this.dataRangeIndex].startDate.slice(0, 4);
var month = this.dataRangeArr[this.dataRangeIndex].startDate.slice(5, 7);
var saturdayList = this.getMonthSaturdayDate(year, month);
switch (num) {
case 0:
var seriesData = [];
this.lineDatas.map(v => {
if (v.isException == 1) {
if (v.date == this.formatDateTwo(new Date(year, month, 0)) ||
saturdayList
.includes(v.date)) {
seriesData.push(Object.assign(v, {
itemStyle: {
color: '#0BDB7E',
borderWidth: 1.5
}
}))
} else {
seriesData.push(Object.assign(v, {
itemStyle: {
color: '#0BDB7E',
borderWidth: 1.5
},
symbol: 'none'
}))
}
} else {
if (v.date == this.formatDateTwo(new Date(year, month, 0)) ||
saturdayList
.includes(v.date)) {
seriesData.push(Object.assign(v, {
itemStyle: {
color: '#FF8646',
borderWidth: 1.5
}
}))
} else {
seriesData.push(Object.assign(v, {
itemStyle: {
color: '#FF8646',
borderWidth: 1.5
},
symbol: 'none'
}))
}
}
});
break;
case 1:
var seriesData = [];
this.lineDatas.map(v => {
if (v.isException == 1) {
seriesData.push(Object.assign(v, {
itemStyle: {
color: '#0BDB7E',
borderWidth: 1.5
}
}))
} else {
seriesData.push(Object.assign(v, {
itemStyle: {
color: '#FF8646',
borderWidth: 1.5
}
}))
}
});
break;
}
var option = {
xAxis: {
type: 'category',
data: xdata
},
yAxis: {
type: 'value',
},
series: [{
data: seriesData,
type: 'line',
smooth: true,
areaStyle: {
color: 'linear-gradient(180 deg, #0DDE7E 0%, rgba(4, 205, 124, 0) 100%)',
opacity: 0.2
},
lineStyle: {
color: '#0BDB7E'
}
}],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'transparent'
}
},
extraCssText: `width:109px;height:55px;line-height:33rpx;background: no-repeat center/100% url(./static/images/consumeTrendbgm.png);
font-size:24rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;
color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
confine: true,
position: function(pt) {
return [pt[0] - 27, pt[1] - 73];
},
formatter: function(data) {
let desp = ['', '消费金额偏高', '消费金额偏低'][data[0].data.isException - 1]
return data[0].name + '消费' + data[0].value + '元' + '<br>' + desp;
}
},
};
option && myLineChart.setOption(option);
window.addEventListener('resize', function() {
myLineChart.resize();
})
},
<style>
#consumer-trend-line {
position: absolute;
top: 120rpx;
left: 10rpx;
z-index: 100;
}
</style>