精华内容
下载资源
问答
  • echarts图表自适应
    千次阅读
    2022-04-03 09:20:14

    echarts如何自适应屏幕?直接上代码

    // 基于准备好的dom,初始化echarts图表
      var ch_credit_in_major =echarts.init(document.getElementById('myChart'));
     
    	
      // 页面大小发生改变时Echarts也跟着发生改变
          window.addEventListener("resize", function () {
            myChart.resize();
          });

    简写版,整理的echarts图表随着屏幕大小自适应全部内容,希望文章能够帮你解决echarts图表随着屏幕大小自适应遇到的程序开发问题

    更多相关内容
  • 主要介绍了完美解决vue 中多个echarts图表自适应的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 多个图表自适应写法比较麻烦(当一个页面的图表太多时,这样写法不是很灵活); let myChart1 = echarts.init(document.getElementById(dom1)) let myChart2 = echarts.init(document.getElementByI
  • echarts图表自适应

    2020-10-28 16:12:14
    **背景:**vue项目中用到echarts图表,页面上有侧边栏,侧边栏收缩图表不能自适应,想通过监听内容部分的宽度让图表resize,试过window带的resize,只能监听浏览器窗口大小变化,为了监听某元素区域的变化而使...

    背景:
    vue项目中用到echarts图表,页面上有侧边栏,侧边栏收缩图表不能自适应,想通过监听内容部分的宽度让图表resize,试过window带的resize,只能监听浏览器窗口大小变化,为了监听某元素区域的变化而使echarts的尺寸重置

    本次解决采用 element-resize-detector 可以完美的解决

    思路:
    因为收缩侧边栏的时候右侧的区域会自动适应,但是echarts不会随之改变

    element提供的 element-resize-detector 可以轻松解决问题的存在
    转载参考:https://blog.csdn.net/csl125/article/details/89245267
    vue文件

    <template>
    	<div id="chart" style="width: 100%;height: 500px;"></div>
    </template>
    
    <script>
    	import echarts from 'echarts'
    	import resize from './mixins/index.js'
    	import {
    		debounce
    	} from 'utils.js'
    	const elementResizeDetectorMarker = require('element-resize-detector')
    	export default {
    		name: 'HelloWorld',
    		mixins: [resize],
    		data() {
    			return {
    				myChart: null
    			}
    		},
    		mounted() {
    			this.initChart()
    			const erd = elementResizeDetectorMarker()
    			const that = this
    			erd.listenTo(document.getElementById('chart'), function() {
    				return debounce(() => {
    					that.$nextTick(function() {
    						that.myChart.resize()
    					})
    				}, 100)()
    			})
    		},
    		methods: {
    			initChart() {
    				this.myChart = echarts.init(document.getElementById('chart'))
    				this.myChart.setOptions({
    					title: {
    						text: '标题',
    					},
    					legend: {
    						bottom: 'bottom'
    					},
    					dataset: {
    						dimension: ['xxx', '高', '中', '低'],
    						source: [{
    								'xxx': '第一季',
    								'高': 5,
    								'中': 4,
    								'低': 8
    							},
    							{
    								'xxx': '第二季',
    								'高': 1,
    								'中': 5,
    								'低': 9
    							},
    							{
    								'xxx': '第三季',
    								'高': 6,
    								'中': 5,
    								'低': 2
    							},
    							{
    								'xxx': '第四季',
    								'高': 8,
    								'中': 5,
    								'低': 4
    							}
    						]
    					},
    					xAxis: {
    						type: 'categroy'
    					},
    					series: [{
    							type: 'bar'
    						},
    						{
    							type: 'bar'
    						},
    						{
    							type: 'bar'
    						}
    					]
    				})
    			}
    		}
    	}
    </script>
    
    

    mixins文件

    import {debounce} from './utils'
    export default {
    	mounted() {
    		this.initResizeEvent()
    	},
    	beforeDestroy() {
    		this.destroyResizeEvent()
    	},
    	activated() {
    		this.initResizeEvent()
    	},
    	deactivated() {
    		this.destroyResizeEvent()
    	},
    	methods: {
    		resizeHandler() {
    			return debounce(() => {
    				if (this.myChart) {
    					this.myChart.resize()
    				}
    			}, 100)()
    		},
    		initResizeEvent() {
    			window.addEventListener('resize', this.resizeHandler)
    		},
    		destroyResizeEvent() {
    			window.removeEventListener('resize', this.resizeHandler)
    		}
    	}
    }
    

    utils文件

    <!-- 防抖动 -->
    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 echarts图表自适应

    2022-05-19 10:53:40
    第一步封装js自适应文件 var EleResize = { _handleResize: function(e) { var ele = e.target || e.srcElement var trigger = ele.__resizeTrigger__ if (trigger) { var handlers = trigger.__z_...

    第一步封装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 { EleResize }
    

    第二步引入到vue文件
    import { EleResize } from ‘…/utils/esresize.js’

    第三步写公共方法
    drawLine(dom, option) {
    // 基于准备好的dom,初始化echarts实例
    let myChart = echarts.init(document.getElementById(dom))
    let resizeDiv = document.getElementById(dom)
    // 绘制图表
    myChart.setOption(option)
    console.log(EleResize)
    let listener = function () {
    console.log(‘resize’)
    myChart.resize()
    }
    EleResize.on(resizeDiv, listener)
    },

    第四步调用
    在这里插入图片描述
    是不是灰常简单,嘿嘿

    展开全文
  • 在项目中我们会遇到echarts图表随浏览器大小变化不能自适应的问题,那么如何来解决呢? 非常简洁表了的两行代码:` 监听窗口大小变化事件(调用echarts组件时,能解决多个echarts图表自适应问题);基于你配置完的...

    在项目中我们会遇到echarts图表随浏览器大小变化不能自适应的问题,那么如何来解决呢?
    非常简洁表了的两行代码:`

    window.addEventListener("resize", function (event) {
            myChart.resize();
        })
    
    
    
    
    

    监听窗口大小变化事件(调用echarts组件时,能解决多个echarts图表的自适应问题);基于你配置完的图表代码末尾,添加代码即可。
    或者更简洁的一行:

        window.onresize = myChart.resize
    
    展开全文
  • Vue中使echarts图表自适应 1、先在main.js中自定义一个全局指令,如下 // 定义全局指令 Vue.directive('resize', { // 使用局部注册指令的方式 // 指令的名称 bind(el, binding) { // el为绑定的元素,binding为...
  • Echarts图表自适应

    2020-01-18 12:14:45
    1.基础方法(必须) /** * @param {Function} func * @param {... this.$_sidebarResizeHandler) } 如果在Vue.js项目中、图表过多且各图表均为组件,可将伸缩自适应方法集成至mixins方法中,并在各组件中引入mixins。
  • vue使用echarts图表自适应的几种解决方案  1.使用window.onresize let myChart = echarts.init(document.getElementById(dom)) window.onresize = function () { myChat.resize() } 优点:可以根据窗口大小...
  • <template> , width: width }" ref="Echart" id="myChart" /> template> methods: { init() { const self = this;...安装成功后 在main.js中全局配置echarts 就不需要再每个页面都引入echart: 参考链接:echarts自适应
  • echarts 图表自适应

    2021-04-30 16:00:28
    首先需要渲染一个图表,例如折线图图表,点这里手把手教你从0到有 完成了一个图表后 在获取dom节点、初始化图表之前,添加如下代码: const WIDTH = 375; //设计稿的大小 var cWidth = window.innerWidth || ...
  • vue 中 Echarts 图表自适应问题 一、问题来源 在单个的 vue 组件中,插入单个的普通图表(如柱状图、折线图)使用以下方法可以进行自适应 window.resize( function () { myChart.resize(); }); //或者以下方法...
  • Echarts笔记——echarts图表自适应屏幕大小 <div id="main" style="height: 800px"></div> <!-- 只保留盒子的高度 --> window.onresize = function (ec) { // 监听窗口大小变化 // ...
  • 设置echarts图表自适应

    2020-05-31 19:27:02
    但是有时候,除了图表图表中的其他元素也需要根据自动变化,如图例中的字体,图中的字体什么的,这个时候,使用resize图表中的字体并不会相应地进行变化,幸运的是,网上有解决方案,echarts大屏字体自适应的方法...
  • echarts自适应
  • echarts图表自适应屏幕分辨率

    千次阅读 2020-12-18 10:21:47
    首相配置自适应代码 echartsResize (doc) { let sizeFun = () => { this.$echarts.init(doc).resize() } setTimeout(() => { window.addEventListener('resize', sizeFun) }, 100) }, 在渲染图标后...
  • echarts图表自适应设置

    千次阅读 2020-01-07 16:11:50
    项目开发过程中,出现了图表无法自适应的问题,侧边栏的展开与收缩都会引起页面宽度的变化,而echarts图表却没有发生改变,之后发现在页面大小宽度产生变化后,通过重新加载框架,可以让图表符合当前页面宽度,所以需要每当...
  • // echarts的初始化进入页面 渲染图表 this.oderFormChart = this.$echarts.init(this.$refs.main); this.oderFormChart.setOption(this.oderFormOption, true); //自适应页面宽度 window.onresize = () =&g..
  • 图表自动生成技术也日渐成熟EChartsECharts 的功能十分强大,可以生成多种形式的图表,配置项十分灵活,可以根据实际需求自由定制官方文档: https://www.echartsjs.com/examples/但是ECharts绘制图表时无法获取到...
  • window.addEventListener("resize", function () { myChart.resize(); });
  • vue使用echarts图表自适应宽度 代码如下(示例): mounted () { setTimeout(() => { if (this.getchart) { this.getchart.resize() } }, 50) window.addEventListener('resize', this.resize()) }, ...
  • Echarts图表自适应宽高大小

    万次阅读 多人点赞 2018-08-14 11:28:43
    最近项目用到了Echarts,他要求在容器上以行内样式固定宽高。这就无法按照浏览器大小进行自适应调整。经过一番纠结发现了解决方法. 官网描述的截图如下: 这个鬼东西,简直是反人类的设定好吗。这都什么年代了不...
  • 【echarts】echarts图表自适应屏幕

    万次阅读 2018-07-21 14:09:25
    echarts图表自适应屏幕 echarts如何自适应屏幕?只要加上两句话就可以啦! // 基于准备好的dom,初始化echarts图表 var ch_credit_in_major =echarts.init(document.getElementById('ch_lack_cr...
  • vue中ECharts图表自适应

    2021-04-08 16:31:31
    在main.js引入Echarts // 添加Echarts import ECharts from 'vue-echarts'; import 'echarts/lib/chart/pie'; import 'echarts/lib/component/tooltip'; Vue.component('v-chart', ECharts); 折线图代码 <v-...
  • 图表自适应myChart.resize 当浏览器窗口大小改变的时候将会触发onresize事件,监听这个事件进行resize的调用 window.onresize = this.refreshEchart refreshEchart() { /** 图表刷新 */ setTimeout(this....
  • vue 中解决多个echarts图表自适应问题

    万次阅读 2018-07-02 10:34:42
    <div class="echarts">  <IEcharts :option="bar" ref="echarts"></IEcharts> </div> mounted () { this.selfAdaption () }, methods: { //echarts自适应 selfA...
  • vue+Echarts图表大小自适应

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,503
精华内容 1,401
关键字:

echarts图表自适应

友情链接: 100EWBshili.rar