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

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

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

瀏覽:100日期: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
相關文章:
主站蜘蛛池模板: PCB厂|线路板厂|深圳线路板厂|软硬结合板厂|电路板生产厂家|线路板|深圳电路板厂家|铝基板厂家|深联电路-专业生产PCB研发制造 | RTO换向阀_VOC高温阀门_加热炉切断阀_双偏心软密封蝶阀_煤气蝶阀_提升阀-湖北霍科德阀门有限公司 | 铝合金风口-玻璃钢轴流风机-玻璃钢屋顶风机-德州东润空调设备有限公司 | 全自动变压器变比组别测试仪-手持式直流电阻测试仪-上海来扬电气 | 飞飞影视_热门电影在线观看_影视大全 | 天津散热器_天津暖气片_天津安尼威尔散热器制造有限公司 | 耐高温风管_耐高温软管_食品级软管_吸尘管_钢丝软管_卫生级软管_塑料波纹管-东莞市鑫翔宇软管有限公司 | PE一体化污水处理设备_地埋式生活污水净化槽定制厂家-岩康塑业 | 专业甜品培训学校_广东糖水培训_奶茶培训_特色小吃培训_广州烘趣甜品培训机构 | 钛合金标准件-钛合金螺丝-钛管件-钛合金棒-钛合金板-钛合金锻件-宝鸡远航钛业有限公司 | 量子管通环-自清洗过滤器-全自动反冲洗过滤器-沼河浸过滤器 | 煤棒机_增碳剂颗粒机_活性炭颗粒机_木炭粉成型机-巩义市老城振华机械厂 | 扬尘在线监测系统_工地噪声扬尘检测仪_扬尘监测系统_贝塔射线扬尘监测设备「风途物联网科技」 | 高尔夫球杆_高尔夫果岭_高尔夫用品-深圳市新高品体育用品有限公司 | 【甲方装饰】合肥工装公司-合肥装修设计公司,专业从事安徽办公室、店面、售楼部、餐饮店、厂房装修设计服务 | 电动葫芦|手拉葫芦|环链电动葫芦|微型电动葫芦-北京市凌鹰起重机械有限公司 | 铝镁锰板厂家_进口钛锌板_铝镁锰波浪板_铝镁锰墙面板_铝镁锰屋面-杭州军晟金属建筑材料 | 振动时效_振动时效仪_超声波冲击设备-济南驰奥机电设备有限公司 北京宣传片拍摄_产品宣传片拍摄_宣传片制作公司-现像传媒 | 背压阀|减压器|不锈钢减压器|减压阀|卫生级背压阀|单向阀|背压阀厂家-上海沃原自控阀门有限公司 本安接线盒-本安电路用接线盒-本安分线盒-矿用电话接线盒-JHH生产厂家-宁波龙亿电子科技有限公司 | 上海办公室装修_上海店铺装修公司_厂房装潢设计_办公室装修 | 进口试验机价格-进口生物材料试验机-西安卡夫曼测控技术有限公司 | 活性炭-果壳木质煤质柱状粉状蜂窝活性炭厂家价格多少钱 | 物流公司电话|附近物流公司电话上门取货 | 圣才学习网-考研考证学习平台,提供万种考研考证电子书、题库、视频课程等考试资料 | 阻垢剂,反渗透阻垢剂,缓蚀阻垢剂-山东普尼奥水处理科技有限公司 真空粉体取样阀,电动楔式闸阀,电动针型阀-耐苛尔(上海)自动化仪表有限公司 | 烽火安全网_加密软件、神盾软件官网 | 烽火安全网_加密软件、神盾软件官网 | 防火门|抗爆门|超大门|医疗门|隔声门-上海加汇门业生产厂家 | 塑钢件_塑钢门窗配件_塑钢配件厂家-文安县启泰金属制品有限公司 深圳南财多媒体有限公司介绍 | 扒渣机厂家_扒渣机价格_矿用扒渣机_铣挖机_撬毛台车_襄阳永力通扒渣机公司 | 宿松新闻网 宿松网|宿松在线|宿松门户|安徽宿松(直管县)|宿松新闻综合网站|宿松官方新闻发布 | 餐饮加盟网_特色餐饮加盟店_餐饮连锁店加盟 | 免费B2B信息推广发布平台 - 推发网 | 反渗透阻垢剂-缓蚀阻垢剂厂家-循环水处理药剂-山东鲁东环保科技有限公司 | 包塑软管|金属软管|包塑金属软管-闵彬管业 | 黑龙江「京科脑康」医院-哈尔滨失眠医院_哈尔滨治疗抑郁症医院_哈尔滨精神心理医院 | 定量包装秤,吨袋包装称,伸缩溜管,全自动包装秤,码垛机器人,无锡市邦尧机械工程有限公司 | 台式核磁共振仪,玻璃软化点测定仪,旋转高温粘度计,测温锥和测温块-上海麟文仪器 | EFM 022静电场测试仪-套帽式风量计-静电平板监测器-上海民仪电子有限公司 | 光栅尺_Magnescale探规_磁栅尺_笔式位移传感器_苏州德美达 | 搜木网 - 木业全产业链交易平台,免费搜货、低价买货! |