折线图距离两侧会有空白,想要将空白去除
通过boundaryGap控制
类目轴中boundaryGap可以配置为true和false。默认为true
将boundaryGap:设为 false就可以实现两侧空白去除
drawLine () {
window.addEventListener('resize', this.drawLine)
let myChart = this.$echarts.init(this.$refs.echarts)
var data = {
city: ['2021.08.10',
'2021.08.11',
'2021.08.12',
'2021.08.13',
'2021.08.14',
'2021.08.15',
'2021.08.16',
'2021.08.17',
'2021.08.18',
'2021.08.19',
'2021.08.20',
'2021.08.21',
'2021.08.22',
],
num: [40, 50, 60, 40, 50, 40, 50, 60, 45, 45, 50, 55, 55]
}
var option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
top: '5%',
left: '5%',
right: '5%',
bottom: '28%'
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
show: true,
lineStyle: {
color: '#263F74'
},
},
axisLabel: {
textStyle: {
color: '#5F7FA0',
margin: 0,
},
interval: 0,
rotate: 40,
},
axisTick: {
show: false,
},
data: data.city
}],
yAxis: [{
splitLine: {
show: true,
lineStyle: {
color: '#092b5d'
},
},
axisLine: {
show: true,
lineStyle: {
color: '#263F74'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#5F7FA0'
},
},
axisTick: {
show: false,
},
}],
series: [{
name: '30日内接入车辆数',
type: 'line',
symbol: 'circle', // 默认是空心圆(中间是白色的),改成实心圆
showAllSymbol: true,
symbolSize: 8,
lineStyle: {
normal: {
color: 'rgba(245, 180, 9, 1)', // 线条颜色
},
},
itemStyle: {
color: 'rgba(245, 180, 9, 1)',
borderColor: 'rgba(245, 180, 9, 1)',
borderWidth: 3
},
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(245, 180, 9, 0.3)'
},
{
offset: 1,
color: 'rgba(0, 156, 255, 0)'
}
], false),
}
},
data: data.num
}]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},