drawLine () {
var that = this
window.addEventListener('resize', this.drawLine)
var xdata = []
this.xdata.forEach((type) => {
xdata.push(moment(type).format('MM-DD HH'))
})
let myChart = this.$echarts.init(this.$refs.echarts)
var option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
top: '15%',
left: '22%',
right: '5%',
bottom: '15%'
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
show: true,
lineStyle: {
color: '#263F74'
},
},
axisLabel: {
show: true,
textStyle: {
color: '#33CCFE',
margin: 0,
fontSize: FontChart(14),
},
formatter: function (value, index) {
let s = value.split(' ')
return s[1]
},
},
axisTick: {
show: false,
},
data: xdata
}],
yAxis: [{
splitNumber: 4,
name: '辆',
nameTextStyle: {
fontSize: FontChart(14),
color: '#33CCFE',
padding: [0, 0, 0, -50]
},
splitLine: {
show: true,
lineStyle: {
color: '#092b5d'
},
},
axisLine: {
show: false,
lineStyle: {
color: '#263F74'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#33CCFE',
fontSize: FontChart(14),
},
},
axisTick: {
show: false,
},
}],
series: [{
name: '24h接入车辆数',
type: 'line',
symbol: 'circle', // 默认是空心圆(中间是白色的),改成实心圆
showAllSymbol: true,
symbolSize: 4,
lineStyle: {
normal: {
color: '#00BFF7', // 线条颜色
},
},
itemStyle: {
color: '#00BFF7',
borderColor: '#00BFF7',
borderWidth: 2
},
label: {
normal: {
show: false,
position: 'top',
rich: {
a: {
color: '#fff',
align: 'center',
},
}
}
},
tooltip: {
show: true
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 156, 255, 0.3)'
},
{
offset: 1,
color: 'rgba(0, 156, 255, 0)'
}
], false),
}
},
data: that.ydata
}]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},