vue使用echarts,图表自适应
2020-06-05 06:37
225 查看
1. 使用window.onresize
var myChart = echarts.init(document.getElementById('myChart')); window.onresize = () => { myChart.resize() }
优点:
- 可以根据窗口大小实现自适应
缺点:
- window.onresize是绑定到window上的,切换vue页面时监听依然存在
- 其他页面有window.onresize事件时,会互相覆盖
2.给div绑定onresize事件
忘了是给谁的博客上看到的,还挺好用的
- 引入esresize.js
import EleResize from '@/assets/js/esresize';
- 给div绑定事件
var myChart = echarts.init(document.getElementById('myChart')); var resizeDiv = document.getElementById('myChart') EleResize.on(resizeDiv, ()=> { myChart.resize() })
优点:
- 可以根据窗口大小实现自适应
- 切换vue页面时,事件不会继续触发
- 事件不会相互覆盖
缺点:
- 未知
3. esresize.js代码
var EleResize = { _handleResize: function (e) { var ele = e.target || e.srcElement var trigger = ele.__resizeTrigger__ if (trigger) { var handlers = trigger.__z_resizeListeners if (handlers) { var size = handlers.length for (var i = 0; i < size; i++) { var h = handlers[i] var handler = h.handler var context = h.context handler.apply(context, [e]) } } } }, _removeHandler: function (ele, handler, context) { var handlers = ele.__z_resizeListeners if (handlers) { var size = handlers.length for (var i = 0; i < size; i++) { var h = handlers[i] if (h.handler === handler && h.context === context) { handlers.splice(i, 1) return } } } }, _createResizeTrigger: function (ele) { var obj = document.createElement('object') obj.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;') obj.onload = EleResize._handleObjectLoad obj.type = 'text/html' ele.appendChild(obj) obj.data = 'about:blank' return obj }, _handleObjectLoad: function (evt) { this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__ this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize) } } if (document.attachEvent) { // ie9-10 EleResize.on = function (ele, handler, context) { var handlers = ele.__z_resizeListeners if (!handlers) { handlers = [] ele.__z_resizeListeners = handlers ele.__resizeTrigger__ = ele ele.attachEvent('onresize', EleResize._handleResize) } handlers.push({ handler: handler, context: context }) } EleResize.off = function (ele, handler, context) { var handlers = ele.__z_resizeListeners if (handlers) { EleResize._removeHandler(ele, handler, context) if (handlers.length === 0) { ele.detachEvent('onresize', EleResize._handleResize) delete ele.__z_resizeListeners } } } } else { EleResize.on = function (ele, handler, context) { var handlers = ele.__z_resizeListeners if (!handlers) { handlers = [] ele.__z_resizeListeners = handlers if (getComputedStyle(ele, null).position === 'static') { ele.style.position = 'relative' } var obj = EleResize._createResizeTrigger(ele) ele.__resizeTrigger__ = obj obj.__resizeElement__ = ele } handlers.push({ handler: handler, context: context }) } EleResize.off = function (ele, handler, context) { var handlers = ele.__z_resizeListeners if (handlers) { EleResize._removeHandler(ele, handler, context) if (handlers.length === 0) { var trigger = ele.__resizeTrigger__ if (trigger) { trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize) ele.removeChild(trigger) delete ele.__resizeTrigger__ } delete ele.__z_resizeListeners } } } } export default EleResize
相关文章推荐
- 关于Echarts使用问题之图表自适应浏览器窗口缩放图形
- 在vue中使用echarts图表
- Vue中使用Echarts建立图表
- echarts使用技巧(1)echarts的图表自适应resize问题、单选、缩放等
- 在vue中使用echarts图表实例代码详解
- vue中使用echarts图表自适应的几种基本解决方案
- vue项目中使用Echarts 动态更改图表数据 , Vue 折线图、柱状图等图表动态刷新 ,
- vue图表组件使用,组件文档echarts
- Vue 爬坑之路(八)—— 使用 Echarts 创建图表
- vue中动态加入ECharts图表时,ECharts宽度自适应/不能100%撑开
- 在vue模板中使用echarts实现一个图表
- vue项目在同一页面中引入多个echarts图表 ,并实现封装,自适应和动态数据改变
- 在vue中添加Echarts图表的基本使用教程
- 记录下遇到到前端VUE 使用ui时间选择器获取后台数据,更新echarts图表的输出显示到html
- echarts使用技巧(一)echarts的图表自适应resize问题、单选、缩放等
- vue-echarts图表使用方法及连接后端idea
- Vue怎么使用Echarts创建图表
- 记录一次在Vue项目中使用Echarts图表遇见的问题