电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

VUE 單頁面使用 echart 窗口變化時的用法

瀏覽:97日期:2022-12-22 08:06:32

在 VUE 項目中,為了使 echart 在窗口變化時能夠自適應,要用到 window.resize = function(){ .......};

但是我在項目剛開始的時間就有一個地方的高度變化使用了 window.resize ,在里面再次使用 會覆蓋掉原來的,所以在里面圖表使用時可以用

window.addEventListener(’resize’,this.resizeFu,false);

resixeFu 就是圖表變化時的方法

resizeFu(){ let div = document.getElementById(’changeData’); if(div && this.changeData.DataTime.length>0){ this.chartsDiv.changeData.resize(); }}

但里面有一個問題就是:每次進來當前頁面都會執行 window.addEventListener

解決方法是在路由勾子函數中把它給去掉,方法是

beforeRouteLeave(to, from, next) { //頁面走掉把事件給清除掉 window.removeEventListener('resize', this.resizeFu,false); next()},

補充知識:vue+echart圖表自適應屏幕大小、點擊側邊欄展開收縮圖表自適應大小resize

開發中用到了echart圖表,需要圖表自適應大小resize,一開始使用的方法是:

window.onresize = function () { this.myChart.resize();};

但是又遇到一個問題,點擊側邊欄的展開收起的時候,圖表的大小沒有自適應(因為窗口的大小沒有變化)

這里參考vue+element+admin的框架寫的自適應

VUE 單頁面使用 echart 窗口變化時的用法

一、index.vue的文件

引入chart圖表``

VUE 單頁面使用 echart 窗口變化時的用法

這里是數據

chartData: { title: { text: ’3-1(2)’, textStyle: { color: ’#979797’, fontSize: 14 } }, tooltip: { trigger: ’axis’ }, legend: { icon: ’rect’, itemWidth: 4, // 圖例標記的圖形寬度 itemHeight: 11, textStyle: { lineHeight: 65, fontSize: 14 }, data: [’郵件營銷’, ’聯盟廣告’, ’視頻廣告’, ’直接訪問’, ’搜索引擎’] }, grid: { left: ’3%’, right: ’4%’, bottom: ’3%’, containLabel: true }, xAxis: { type: ’category’, boundaryGap: false, data: [’周一’, ’周二’, ’周三’, ’周四’, ’周五’, ’周六’, ’周日’] }, yAxis: { type: ’value’ }, series: [ { name: ’郵件營銷’, type: ’line’, stack: ’總量’, data: [0, 132, 101, 134, 90, 230, 210] }, { name: ’聯盟廣告’, type: ’line’, stack: ’總量’, data: [220, 12, 191, 234, 20, 330, 10] }, { name: ’視頻廣告’, type: ’line’, stack: ’總量’, data: [15, 232, 201, 154, 190, 330, 110] }, { name: ’直接訪問’, type: ’line’, stack: ’總量’, data: [320, 420, 301, 334, 60, 330, 320] }, { name: ’搜索引擎’, type: ’line’, stack: ’總量’, data: [820, 932, 901, 934, 1290, 1330, 1320] } ] }

二、chart.vue

<template> <div : : /></template><script>import echarts from ’echarts’import resize from ’./mixins/resize’export default { mixins: [resize], props: { className: { type: String, default: ’chart’ }, width: { type: String, default: ’100%’ }, height: { type: String, default: ’300px’ }, autoResize: { type: Boolean, default: true }, chartData: { type: Object, required: true } }, data() { return { chart: null } }, watch: { chartData: { deep: true, handler(val) { this.setOptions(val) } } }, mounted() { this.$nextTick(() => { this.initChart() }) }, beforeDestroy() { if (!this.chart) { return } this.chart.dispose() this.chart = null }, methods: { initChart() { this.chart = echarts.init(this.$el, ’macarons’) this.setOptions(this.chartData) }, setOptions(chartData) { this.chart.setOption(chartData) } }}</script>

三、resize.js

import { debounce } from ’./debounce’export default { data() { return { $_sidebarElm: null } }, mounted() { this.$_initResizeEvent() this.$_initSidebarResizeEvent() }, beforeDestroy() { this.$_destroyResizeEvent() this.$_destroySidebarResizeEvent() }, // to fixed bug when cached by keep-alive // https://github.com/PanJiaChen/vue-element-admin/issues/2116 activated() { this.$_initResizeEvent() this.$_initSidebarResizeEvent() }, deactivated() { this.$_destroyResizeEvent() this.$_destroySidebarResizeEvent() }, methods: { // use $_ for mixins properties // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential $_resizeHandler() { return debounce(() => { if (this.chart) { this.chart.resize() } }, 100)() }, $_initResizeEvent() { window.addEventListener(’resize’, this.$_resizeHandler) }, $_destroyResizeEvent() { window.removeEventListener(’resize’, this.$_resizeHandler) }, $_sidebarResizeHandler(e) { if (e.propertyName === ’width’) { this.$_resizeHandler() } }, $_initSidebarResizeEvent() { this.$_sidebarElm = document.getElementsByClassName(’sidebar-container’)[0] this.$_sidebarElm && this.$_sidebarElm.addEventListener(’transitionend’, this.$_sidebarResizeHandler) }, $_destroySidebarResizeEvent() { this.$_sidebarElm && this.$_sidebarElm.removeEventListener(’transitionend’, this.$_sidebarResizeHandler) } }}

四、debounce.js

/** * @param {Function} func * @param {number} wait * @param {boolean} immediate * @return {*} */export function debounce(func, wait, immediate) { let timeout, args, context, timestamp, result const later = function() { // 據上一次觸發時間間隔 const last = +new Date() - timestamp // 上次被包裝函數被調用時間間隔 last 小于設定時間間隔 wait if (last < wait && last > 0) { timeout = setTimeout(later, wait - last) } else { timeout = null // 如果設定為immediate===true,因為開始邊界已經調用過了此處無需調用 if (!immediate) { result = func.apply(context, args) if (!timeout) context = args = null } } } return function(...args) { context = this timestamp = +new Date() const callNow = immediate && !timeout // 如果延時不存在,重新設定延時 if (!timeout) timeout = setTimeout(later, wait) if (callNow) { result = func.apply(context, args) context = args = null } return result }}

以上這篇VUE 單頁面使用 echart 窗口變化時的用法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 权威废金属|废塑料|废纸|废铜|废钢价格|再生资源回收行情报价中心-中废网 | 电动百叶窗,开窗器,电动遮阳百叶,电动开窗机生产厂家-徐州鑫友工控科技发展有限公司 | 天津拓展_天津团建_天津趣味运动会_天津活动策划公司-天津华天拓展培训中心 | 玉米深加工设备|玉米加工机械|玉米加工设备|玉米深加工机械-河南成立粮油机械有限公司 | 山东氧化铁红,山东铁红-淄博科瑞化工有限公司 | 不锈钢监控杆_监控立杆厂家-廊坊耀星光电科技有限公司 | 铁艺,仿竹,竹节,护栏,围栏,篱笆,栅栏,栏杆,护栏网,网围栏,厂家 - 河北稳重金属丝网制品有限公司 山东太阳能路灯厂家-庭院灯生产厂家-济南晟启灯饰有限公司 | 通辽信息港 - 免费发布房产、招聘、求职、二手、商铺等信息 www.tlxxg.net | 合肥网络推广_合肥SEO网站优化-安徽沃龙First | 东莞市踏板石餐饮管理有限公司_正宗桂林米粉_正宗桂林米粉加盟_桂林米粉加盟费-东莞市棒子桂林米粉 | 常州律师事务所_常州律所_常州律师-江苏乐天律师事务所 | 不锈钢酒柜|恒温酒柜|酒柜定制|酒窖定制-上海啸瑞实业有限公司 | 京马网,京马建站,网站定制,营销型网站建设,东莞建站,东莞网站建设-首页-京马网 | 盛源真空泵|空压机-浙江盛源空压机制造有限公司-【盛源官网】 | 密封无忧网 _ 专业的密封产品行业信息网 | 广州番禺搬家公司_天河黄埔搬家公司_企业工厂搬迁_日式搬家_广州搬家公司_厚道搬迁搬家公司 | 欧景装饰设计工程有限公司-无锡欧景装饰官网 | 济南办公室装修-厂房装修-商铺装修-工装公司-山东鲁工装饰设计 | 消防泵-XBD单级卧式/立式消防泵-上海塑泉泵阀(集团)有限公司 | 扬尘监测_扬尘监测系统_带证扬尘监测设备 - 郑州港迪科技有限公司 | 仿真植物|仿真树|仿真花|假树|植物墙 - 广州天昆仿真植物有限公司 | 电伴热系统施工_仪表电伴热保温箱厂家_沃安电伴热管缆工业技术(济南)有限公司 | 数显恒温油浴-电砂浴-高温油浴振荡器-常州迈科诺仪器有限公司 | 污水/卧式/潜水/钻井/矿用/大型/小型/泥浆泵,价格,参数,型号,厂家 - 安平县鼎千泵业制造厂 | 欧必特空气能-商用空气能热水工程,空气能热水器,超低温空气源热泵生产厂家-湖南欧必特空气能公司 | 超声波焊接机,振动摩擦焊接机,激光塑料焊接机,超声波焊接模具工装-德召尼克(常州)焊接科技有限公司 | 岩棉切条机厂家_玻璃棉裁条机_水泥基保温板设备-廊坊鹏恒机械 | 全自动在线分板机_铣刀式在线分板机_曲线分板机_PCB分板机-东莞市亿协自动化设备有限公司 | 拼装地板,悬浮地板厂家,悬浮式拼装运动地板-石家庄博超地板科技有限公司 | 行星搅拌机,双行星搅拌机,动力混合机,无锡米克斯行星搅拌机生产厂家 | 细砂提取机,隔膜板框泥浆污泥压滤机,螺旋洗砂机设备,轮式洗砂机械,机制砂,圆锥颚式反击式破碎机,振动筛,滚筒筛,喂料机- 上海重睿环保设备有限公司 | 安平县鑫川金属丝网制品有限公司,声屏障,高速声屏障,百叶孔声屏障,大弧形声屏障,凹凸穿孔声屏障,铁路声屏障,顶部弧形声屏障,玻璃钢吸音板 | 首页|成都尚玖保洁_家政保洁_开荒保洁_成都保洁| 电气控制系统集成商-PLC控制柜变频控制柜-非标自动化定制-电气控制柜成套-NIDEC CT变频器-威肯自动化控制 | 陶瓷加热器,履带式加热器-吴江市兴达电热设备厂 | 液晶拼接屏厂家_拼接屏品牌_拼接屏价格_监控大屏—北京维康 | 电伴热系统施工_仪表电伴热保温箱厂家_沃安电伴热管缆工业技术(济南)有限公司 | 防水套管_柔性防水套管_刚性防水套管-巩义市润达管道设备制造有限公司 | 伶俐嫂培训学校_月嫂培训班在哪里报名学费是多少_月嫂免费政府培训中心推荐 | 电缆隧道在线监测-智慧配电站房-升压站在线监测-江苏久创电气科技有限公司 | 电动高尔夫球车|电动观光车|电动巡逻车|电动越野车厂家-绿友机械集团股份有限公司 |