商城系统网站模板,淄博做网站建设,上海金山网站设计公司,免费游戏不用登录大全需求#xff1a;
左右结构的div#xff0c;可以根据数据抬起按下进行拉伸修改容器宽度的操作给左右结构某一图表设置拉伸自适应左右结构都设置个最小宽度#xff0c;只能到一定区域内拉伸解决echarts的bug#xff08;重复加载chart实例#xff09;#xff1a;[ECharts] …需求
左右结构的div可以根据数据抬起按下进行拉伸修改容器宽度的操作给左右结构某一图表设置拉伸自适应左右结构都设置个最小宽度只能到一定区域内拉伸解决echarts的bug重复加载chart实例[ECharts] There is a chart instance already initialized on the dom.解决浏览器兼容性报错问题 5.解决echarts在flex布局下宽高不显示问题
1.效果 2.左右结构布局
左右布局给定一个基础的宽度并且给最小宽度min-width如果不给最小宽度那么拉伸的时候会拉到底到时候其他元素挤压或者是隐藏了就不太好
templatediv classcontent-boxdiv classcontainerdiv classcontainer_boxdiv classleft :style{ width: leftWidth px }左侧内容区/divdiv classcenter/divdiv classright :style{ width: rightWidth px }div classright_top右上内容区/div!-- echarts图标区 --div idechartsWarpdiv idmyChat :style{ width: 100%, height: 100% }/div/div/div/div/div/div
/templatescript
export default {data() {return {isResizing: false,containerWidth: 600,leftWidth: 300,rightWidth: 400};},mounted() {},methods: {}
};
/scriptstyle langscss 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不用多说下载最新版就行
npm install echarts -S 2.局部导入和全局导入根据自己的需求来
局部导入在需要用到的页面导入即可为了各位看的更明白我用的是局部导入的方式
import * as echarts from echarts;
全局导入在main.js文件导入挂载
import echarts from echarts;
Vue.prototype.$echarts echarts;
全局导入后在页面使用
this.$echarts.方法名 3.在中间灰色区域添加个鼠标按下事件
templatediv classcontent-boxdiv classcontainerdiv classcontainer_boxdiv classleft :style{ width: leftWidth px }左侧内容区/divdiv classcenter mousedownonMouseDown/divdiv classright :style{ width: rightWidth px }div classright_top右上内容区/div!-- echarts图标区 --div idechartsWarpdiv idmyChat :style{ width: 100%, height: 100% }/div/div/div/div/div/div
/templatescript
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);}}
};
/scriptstyle langscss 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();}
templatediv classcontent-boxdiv classcontainerdiv classcontainer_boxdiv classleft :style{ width: leftWidth px }左侧内容区/divdiv classcenter mousedownonMouseDown/divdiv classright :style{ width: rightWidth px }div classright_top右上内容区/div!-- echarts图标区 --div idechartsWarpdiv idmyChat :style{ width: 100%, height: 100% }/div/div/div/div/div/div
/templatescript
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);}}
};
/scriptstyle langscss 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 -S2.局部导入
var elementResizeDetectorMaker require(element-resize-detector);
3.完整代码如下
templatediv classcontent-boxdiv classcontainerdiv classcontainer_boxdiv classleft :style{ width: leftWidth px }左侧内容区/divdiv classcenter mousedownonMouseDown/divdiv classright :style{ width: rightWidth px }div classright_top右上内容区/divdiv idechartsWarpdiv idmyChat :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 langscss 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文章到此结束希望对你有所帮助~
