当前位置： 首页 > news >正文

vue左右div结构手动拉伸并且echarts图表根据拉伸宽高自适应

news 2025/7/5 21:01:00

需求：

  1. 左右结构的div，可以根据数据抬起按下进行拉伸修改容器宽度的操作
  2. 给左右结构某一图表设置拉伸自适应
  3. 左右结构都设置个最小宽度，只能到一定区域内拉伸
  4. 解决echarts的bug（重复加载chart实例）：[ECharts] There is a chart instance already initialized on the dom.
  5. 解决浏览器兼容性报错问题

       5.解决echarts在flex布局下宽高不显示问题

1.效果

 2.左右结构布局

左右布局给定一个基础的宽度，并且给最小宽度，min-width，如果不给最小宽度，那么拉伸的时候会拉到底，到时候其他元素挤压或者是隐藏了就不太好

<template><div class="content-box"><div class="container"><div class="container_box"><div class="left" :style="{ width: leftWidth + 'px' }">左侧内容区</div><div class="center"></div><div class="right" :style="{ width: rightWidth + 'px' }"><div class="right_top">右上内容区</div><!-- echarts图标区 --><div id="echartsWarp"><div id="myChat" :style="{ width: '100%', height: '100%' }"></div></div></div></div></div></div>
</template><script>
export default {data() {return {isResizing: false,containerWidth: 600,leftWidth: 300,rightWidth: 400};},mounted() {},methods: {}
};
</script><style lang="scss" scoped>
.container_box {display: flex;height: 500px;width: 100%;.left {min-width: 300px;background-color: #ddd;}.center {min-width: 10px;height: 100%;background-color: #c7adad;cursor: col-resize;}.right {background-color: #d3e2d1;flex: 1;min-width: 500px;display: flex;flex-direction: column;.right_top {height: 60px;}#echartsWarp {height: calc(100vh - 300px);}}
}
</style>

效果如下：

 3.拉伸效果实现

  1. 首先下载echarts，不用多说，下载最新版就行
npm install echarts -S

     2.局部导入和全局导入，根据自己的需求来

局部导入：在需要用到的页面导入即可，为了各位看的更明白我用的是局部导入的方式

import * as echarts from 'echarts';

全局导入：在main.js文件导入挂载

import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

全局导入后在页面使用：

this.$echarts.方法名

        3.在中间灰色区域添加个鼠标按下事件

<template><div class="content-box"><div class="container"><div class="container_box"><div class="left" :style="{ width: leftWidth + 'px' }">左侧内容区</div><div class="center" @mousedown="onMouseDown"></div><div class="right" :style="{ width: rightWidth + 'px' }"><div class="right_top">右上内容区</div><!-- echarts图标区 --><div id="echartsWarp"><div id="myChat" :style="{ width: '100%', height: '100%' }"></div></div></div></div></div></div>
</template><script>
export default {data() {return {isResizing: false,containerWidth: 600,leftWidth: 200,rightWidth: 400};},mounted() {},methods: {onMouseDown() {// 鼠标按下时开始拖动this.isResizing = true;// 监听鼠标移动事件document.addEventListener('mousemove', this.onMouseMove);// 监听鼠标松开事件document.addEventListener('mouseup', this.onMouseUp);},onMouseMove(event) {if (this.isResizing) {// 计算鼠标在容器中的位置const containerRect = this.$el.getBoundingClientRect();const mouseX = event.clientX - containerRect.left;// 更新左侧和右侧容器的宽度this.leftWidth = mouseX;this.rightWidth = this.containerWidth - mouseX;}},onMouseUp() {// 鼠标松开时停止拖动this.isResizing = false;// 移除监听鼠标移动和松开事件document.removeEventListener('mousemove', this.onMouseMove);document.removeEventListener('mouseup', this.onMouseUp);}}
};
</script><style lang="scss" scoped>
.container_box {display: flex;height: 500px;width: 100%;.left {min-width: 300px;background-color: #ddd;}.center {min-width: 10px;height: 100%;background-color: #c7adad;cursor: col-resize;}.right {background-color: #d3e2d1;flex: 1;min-width: 500px;display: flex;flex-direction: column;.right_top {height: 60px;}#echartsWarp {height: calc(100vh - 300px);}}
}
</style>

效果：

 3.添加echarts图表

如果是按照以前的办法，不能实现自适应的哈，只能说把图标显示出来了，但是在拉伸的时候折线图不能自适应。

解决echarts的bug（重复加载chart实例）关键代码如下：

  if (//判断是否存在echarts实例化对象,如果存在则销毁this.chartsDom != null &&this.chartsDom != '' &&this.chartsDom != undefined) {this.chartsDom.dispose();}
<template><div class="content-box"><div class="container"><div class="container_box"><div class="left" :style="{ width: leftWidth + 'px' }">左侧内容区</div><div class="center" @mousedown="onMouseDown"></div><div class="right" :style="{ width: rightWidth + 'px' }"><div class="right_top">右上内容区</div><!-- echarts图标区 --><div id="echartsWarp"><div id="myChat" :style="{ width: '100%', height: '100%' }"></div></div></div></div></div></div>
</template><script>
import * as echarts from 'echarts';
export default {data() {return {isResizing: false,containerWidth: 600,leftWidth: 200,rightWidth: 400};},mounted() {this.echartsDom();},methods: {echartsDom() {// 基于准备好的dom，初始化echarts实例this.$nextTick(_ => {if (//判断是否存在echarts实例化对象,如果存在则销毁this.chartsDom != null &&this.chartsDom != '' &&this.chartsDom != undefined) {this.chartsDom.dispose();}const dom = document.getElementById('myChat');dom.style.width = dom.parentNode.parentNode.clientWidth + 'px';this.chartsDom = echarts.init(dom); //创建echarts实例化对象this.chartsDom.clear(); //清空画布数据//设置对应的参数,标题,x轴,y轴坐标,以及显示的数据let options = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true}]};this.chartsDom.setOption(options);this.chartsDom.resize();setTimeout(function() {window.addEventListener('resize', () => {this.chartsDom.resize();});}, 200);});},onMouseDown() {// 鼠标按下时开始拖动this.isResizing = true;// 监听鼠标移动事件document.addEventListener('mousemove', this.onMouseMove);// 监听鼠标松开事件document.addEventListener('mouseup', this.onMouseUp);},onMouseMove(event) {if (this.isResizing) {// 计算鼠标在容器中的位置const containerRect = this.$el.getBoundingClientRect();const mouseX = event.clientX - containerRect.left;// 更新左侧和右侧容器的宽度this.leftWidth = mouseX;this.rightWidth = this.containerWidth - mouseX;}},onMouseUp() {// 鼠标松开时停止拖动this.isResizing = false;// 移除监听鼠标移动和松开事件document.removeEventListener('mousemove', this.onMouseMove);document.removeEventListener('mouseup', this.onMouseUp);}}
};
</script><style lang="scss" scoped>
.container_box {display: flex;height: 500px;width: 100%;.left {min-width: 300px;background-color: #ddd;}.center {min-width: 10px;height: 100%;background-color: #c7adad;cursor: col-resize;}.right {background-color: #d3e2d1;flex: 1;min-width: 500px;display: flex;flex-direction: column;.right_top {height: 60px;}#echartsWarp {height: calc(100vh - 300px);}}
}
</style>

效果：

 4.解决echarts图表没有根据拉伸自适应问题（完整代码）

1.下载element-resize-detector

npm install element-resize-detector -S

2.局部导入

var elementResizeDetectorMaker = require('element-resize-detector');

3.完整代码如下：

<template><div class="content-box"><div class="container"><div class="container_box"><div class="left" :style="{ width: leftWidth + 'px' }">左侧内容区</div><div class="center" @mousedown="onMouseDown"></div><div class="right" :style="{ width: rightWidth + 'px' }"><div class="right_top">右上内容区</div><div id="echartsWarp"><div id="myChat" :style="{ width: '100%', height: '100%' }"></div></div></div></div></div></div>
</template>
<script>
//elementResizeDetectorMaker，该全局函数是使元素调整大小检测器实例的maker函数。
var elementResizeDetectorMaker = require('element-resize-detector');
import * as echarts from 'echarts';
export default {name: 'Index',data() {return {isResizing: false,containerWidth: 600,leftWidth: 200,rightWidth: 400,chartsDom: null};},mounted() {this.changeEchartsWidthApi();},methods: {//监听盒子大小,改变echarts宽度,实现echarts自适应changeEchartsWidthApi() {// 创建实例，无参数var erd = elementResizeDetectorMaker(); //使用默认选项（将使用基于对象的方法）// 创建实例带参数// 使用基于超快速滚动的方法。// 这是推荐的策略。var erdUltraFast = elementResizeDetectorMaker({strategy: 'scroll',callOnAdd: true, //callOnAdd选项，用于确定在添加侦听器时是否应调用它们。默认为true。//如果为true，则确保在添加侦听器后将对其进行调用。如果为false，则在添加侦听器时将不保证其//被调用（不会阻止其被调用）debug: true});//监听class为staticNextMain的元素 大小变化var self = this;//侦听元素的调整大小事件，并使用元素作为调整大小事件的参数来调用侦听器函数。传递给函数的选项将//覆盖实例选项erd.listenTo(document.getElementById('echartsWarp'), function(element) {self.ChartsApi();});},ChartsApi() {// 基于准备好的dom，初始化echarts实例this.$nextTick(_ => {if (//判断是否存在echarts实例化对象,如果存在则销毁this.chartsDom != null &&this.chartsDom != '' &&this.chartsDom != undefined) {this.chartsDom.dispose();}const dom = document.getElementById('myChat');dom.style.width = dom.parentNode.parentNode.clientWidth + 'px';this.chartsDom = echarts.init(dom); //创建echarts实例化对象this.chartsDom.clear(); //清空画布数据//设置对应的参数,标题,x轴,y轴坐标,以及显示的数据let options={xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true}]}this.chartsDom.setOption(options);this.chartsDom.resize();setTimeout(function() {window.addEventListener('resize', () => {this.chartsDom.resize();});}, 200);});},onMouseDown() {// 鼠标按下时开始拖动this.isResizing = true;// 监听鼠标移动事件document.addEventListener('mousemove', this.onMouseMove);// 监听鼠标松开事件document.addEventListener('mouseup', this.onMouseUp);},onMouseMove(event) {if (this.isResizing) {// 计算鼠标在容器中的位置const containerRect = this.$el.getBoundingClientRect();const mouseX = event.clientX - containerRect.left;// 更新左侧和右侧容器的宽度this.leftWidth = mouseX;this.rightWidth = this.containerWidth - mouseX;}},onMouseUp() {// 鼠标松开时停止拖动this.isResizing = false;// 移除监听鼠标移动和松开事件document.removeEventListener('mousemove', this.onMouseMove);document.removeEventListener('mouseup', this.onMouseUp);}}
};
</script>
<style lang="scss" scoped>
.container_box {display: flex;height: 500px;width: 100%;.left {min-width: 300px;}.center {min-width: 10px;height: 100%;background-color: #c7adad;cursor: col-resize;}.right {flex: 1;min-width: 500px;display: flex;flex-direction: column;.right_top {height: 60px;}#echartsWarp {height: calc(100vh - 300px);}}
}
</style>

文章到此结束，希望对你有所帮助~

http://www.lryc.cn/news/121983.html

相关文章：

  • 开发工具Eclipse的使用
  • DrawerLayout布局使用教程Android侧边栏导航完全指南：创建简单实用的导航抽屉
  • Dynamics 365 实体快速创建功能启用
  • Mybatis三剑客（一）在springboot中自动生成Mybatis【generator】
  • 【LeetCode 热题 100】图论 专题（bfs，拓扑排序，Trie树 字典树）
  • Jmeter压测实战：Jmeter二次开发之自定义函数
  • 在python中使用nvidia的VPF库对RTSP流进行硬解码并使用opencv进行显示
  • C++中using namespace std的作用记录
  • 【TX 企业微信私有化历史版本 API 信息泄露】
  • 腾讯云轻量应用服务器镜像应用模板清单大全
  • C语言链表操作
  • 详解拦截器和过滤器
  • 关于`IRIS/Caché`进程内存溢出解决方案
  • 构建Docker容器监控系统（cadvisor+influxDB+grafana）
  • 最强自动化测试框架Playwright（17）- 模拟接口
  • Python爬虫——requests_get请求
  • 【EI复现】一种建筑集成光储系统规划运行综合优化方法（Matlab代码实现）
  • C++11 异步与通信之 std::async
  • 影视站用什么cms好？
  • HOT88-乘积最大子数组
  • 工博士与纷享销客达成战略合作，开启人工智能领域合作新篇章
  • 拆解与重构：慕云游首页组件化设计
  • 刷了3个月的华为OD算法题，刷出感觉了，如洁柔般丝滑，文末送《漫画算法2：小灰的算法进阶》
  • ip转换器哪个好用 ip地址切换器有哪些
  • 【python】爬取豆瓣电影Top250（附源码）
  • 35岁职业危机？不存在！体能断崖？不担心
  • C语言——指针进阶
  • heap pwn 入门大全 - 1：glibc heap机制与源码阅读(上)
  • 树莓派RP2040 用Arduino IDE安装和编译
  • 云安全攻防（八）之 Docker Remote API 未授权访问逃逸