mounted() {
this.draw();
window.addEventListener('resize', this.draw)
},
beforeRouteLeave(to, from, next) {
// 离开页面时取消监听
window.removeEventListener('resize', this.draw)
next()
},
methods: {
draw() {
// 基于准备好的dom，初始化echarts实例
this.chart = this.$echarts.init(document.getElementById("centreLeft2Chart"));
// ----------------------------------------------------------------
let option = {
tooltip: {
trigger: 'axis',
show: true,
},
legend: {
show: true,
icon: 'circle',
top: 0,
textStyle: {
fontSize: 12,
color: '#9bc7c7'
},
},
grid: {
left: '5%',
right: '5%',
top: '15%',
bottom: '6%',
containLabel: true
},
xAxis: {
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#2b5050',
width: 1,//这里是为了突出显示加上的
},
},
axisLabel: {
textStyle: {
color: '#b6e5e5', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
data: ['11-26', '11-26', '11-26', '11-26', '11-26', '11-26', '11-26']
},
yAxis: {
axisLine: {
lineStyle: {
color: '#2b5050',
width: 1,//这里是为了突出显示加上的
},
},
axisLabel: {
textStyle: {
color: '#b6e5e5', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
series: [{
name: '外来人员滞留人次',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 10,
itemStyle: {
color: '#77f0ff',
},
data: [5, 10, 41, 35, 51, 49, 62]
},
{
name: '本单位外出未归人次',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 10,
itemStyle: {
color: '#00c75f',
},
data: [50, 20, 35, 20, 75, 30, 60]
},
{
name: '黑名单人员入侵人次',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 10,
itemStyle: {
color: '#f5d500',
},
data: [15, 30, 15, 40, 55, 20, 40]
},
]
};
this.chart.clear();
this.chart.resize();
this.chart.setOption(option);
}
},
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
