标签：add div temp 一个 打印 -keep setw 修改 搜索
页面代码是这样的
<template> <page-view :title="title"> <div id="myChart" ref="mapBox" style="width: 100%; height: 500px"></div> </page-view> </template> <script> import { PageView } from ‘@/layouts‘ import echarts from ‘echarts‘ // 設置圖表基礎配置項和數據 const myOption = { title: { text: ‘XXX‘, link: ‘http://localhost:8000/‘, subtext: ‘XXXXXXX‘ }, // title: { // text: ‘折线图堆叠‘ // }, tooltip: { trigger: ‘axis‘ }, legend: { data: [‘邮件营销‘, ‘联盟广告‘, ‘视频广告‘, ‘直接访问‘, ‘搜索引擎‘] }, grid: { left: ‘3%‘, right: ‘4%‘, bottom: ‘3%‘, containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: ‘category‘, boundaryGap: false, data: [‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘, ‘周五‘, ‘周六‘, ‘周日‘] }, yAxis: { type: ‘value‘ }, series: [ { name: ‘邮件营销‘, type: ‘line‘, stack: ‘总量‘, data: [120, 132, 101, 134, 90, 230, 210] }, { name: ‘联盟广告‘, type: ‘line‘, stack: ‘总量‘, data: [220, 182, 191, 234, 290, 330, 310] }, { name: ‘视频广告‘, type: ‘line‘, stack: ‘总量‘, data: [150, 232, 201, 154, 190, 330, 410] }, { name: ‘直接访问‘, type: ‘line‘, stack: ‘总量‘, data: [320, 332, 301, 334, 390, 330, 320] }, { name: ‘搜索引擎‘, type: ‘line‘, stack: ‘总量‘, data: [820, 932, 901, 934, 1290, 1330, 1320] } ] } export default { components: { PageView }, data() { return {} }, mounted() { // 初始化echarts實例 this.myChart = echarts.init(this.$refs.mapBox) // 設置圖表的配置項和數據 this.getData() // 設置圖表自定義縮放 window.addEventListener(‘resize‘, this.resizeTheChart) // window.addEventListener(‘resize‘, this.resizeTheChart, false) }, methods: { // 獲取數據，設置圖表配置項和數據1 getData() { // const list = [{},{}] // myOption.series = list this.myChart.setOption(myOption) }, // 獲取數據，設置圖表配置項和數據2 // 設置圖表自定縮放1 resizeTheChart() { console.log(‘縮放執行中~~~‘) if (this.$refs && this.$refs.mapBox) { const myChartNode = document.getElementById(‘myChart‘) if (myChartNode) { myChartNode.style.height = myChartNode.offsetWidth * 0.6 + ‘px‘ } this.myChart.resize() } } // 設置圖表自定縮放2 }, computed: { title() { return this.$route.meta.title } }, beforeDestroy() { window.removeEventListener(‘resize‘, this.resizeTheChart) // window.removeEventListener(‘resize‘, this.resizeTheChart, false) } } </script>
问题来了：
进入组件后，切换其他组件，resize事件一直是存在的，没有被销毁，
我先是怀疑自己应该给添加和移除事件添加第三个属性，
我试了一下，没卵用
然后开始疯狂谷歌搜索
未果~~~~~
别人也是这样写的，人家的都有用，就我的没用
然后我给
beforeDestroy
添加了一个打印，再切换页面，发现打印未执行
我就知道了~~
原来是压根没用执行
beforeDestroy
好了
结局来了
因为使用的是原有的框架
使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
当页面切换的时候
被包含的组件保留状态，没有被重新渲染。
使用缓存后，组件只挂载一次，永远不注销
必须使用激活和冻结，代理挂载和注销~~~
activated(){} // 激活
deactivated(){} // 冻结
然后修改代码如下
<template> <page-view :title="title"> <div id="myChart" ref="mapBox" style="width: 100%; height: 500px"></div> </page-view> </template> <script> import { PageView } from ‘@/layouts‘ import echarts from ‘echarts‘ // 設置圖表基礎配置項和數據 const myOption = { title: { text: ‘xxxx‘, link: ‘http://localhost:8000/‘, subtext: ‘xxxx‘ }, // title: { // text: ‘折线图堆叠‘ // }, tooltip: { trigger: ‘axis‘ }, legend: { data: [‘邮件营销‘, ‘联盟广告‘, ‘视频广告‘, ‘直接访问‘, ‘搜索引擎‘] }, grid: { left: ‘3%‘, right: ‘4%‘, bottom: ‘3%‘, containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: ‘category‘, boundaryGap: false, data: [‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘, ‘周五‘, ‘周六‘, ‘周日‘] }, yAxis: { type: ‘value‘ }, series: [ { name: ‘邮件营销‘, type: ‘line‘, stack: ‘总量‘, data: [120, 132, 101, 134, 90, 230, 210] }, { name: ‘联盟广告‘, type: ‘line‘, stack: ‘总量‘, data: [220, 182, 191, 234, 290, 330, 310] }, { name: ‘视频广告‘, type: ‘line‘, stack: ‘总量‘, data: [150, 232, 201, 154, 190, 330, 410] }, { name: ‘直接访问‘, type: ‘line‘, stack: ‘总量‘, data: [320, 332, 301, 334, 390, 330, 320] }, { name: ‘搜索引擎‘, type: ‘line‘, stack: ‘总量‘, data: [820, 932, 901, 934, 1290, 1330, 1320] } ] } export default { components: { PageView }, data() { return {} }, mounted() { // 初始化echarts實例 this.myChart = echarts.init(this.$refs.mapBox) // 設置圖表的配置項和數據 this.getData() }, methods: { // 獲取數據，設置圖表配置項和數據1 getData() { // const list = [{},{}] // myOption.series = list this.myChart.setOption(myOption) }, // 獲取數據，設置圖表配置項和數據2 // 設置圖表自定縮放1 resizeTheChart() { console.log(‘縮放執行中~~~‘) if (this.$refs && this.$refs.mapBox) { const myChartNode = document.getElementById(‘myChart‘) if (myChartNode) { myChartNode.style.height = myChartNode.offsetWidth * 0.6 + ‘px‘ } this.myChart.resize() } }, // 設置圖表自定縮放2 }, computed: { title() { return this.$route.meta.title } }, activated() { // 設置圖表自定義縮放 window.addEventListener(‘resize‘, this.resizeTheChart) }, deactivated() { window.removeEventListener(‘resize‘, this.resizeTheChart) } } </script>
完成~~~
脱坑记录--- removeEventListener 移除事件监听失败的经历--vue--keep-alive-----完美实现echarts自适应屏幕~~~~
标签：add div temp 一个 打印 -keep setw 修改 搜索
原文地址：https://www.cnblogs.com/sugartang/p/12539587.html
