echarts图表自适应

最新推荐文章于 2024-08-01 10:00:37 发布

hyfadd

最新推荐文章于 2024-08-01 10:00:37 发布

阅读量659

点赞数 1

分类专栏： vue+elementui 文章标签： vue window echarts

本文链接：https://blog.csdn.net/zhengyun1568/article/details/109335052

版权

在Vue项目中，当侧边栏收缩导致内容区域自适应变化时，echarts图表无法自动调整大小。通过引入element-resize-detector库，可以监听并响应内容区域的尺寸变化，从而实现echarts图表的自适应。具体解决方案是在vue文件、mixins文件和utils文件中进行相应配置。

摘要由CSDN通过智能技术生成

背景：
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