图表设置拉伸自适应左右结构都设置个最小宽度只能到一定区域内拉伸解决echarts的bug重复加载chart实例[ECharts]

There

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

templatediv

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

import

监听鼠标移动事件document.addEventListener(mousemove,

this.onMouseMove);//

监听鼠标松开事件document.addEventListener(mouseup,

this.onMouseUp);},onMouseMove(event)

{if

this.$el.getBoundingClientRect();const

mouseX

移除监听鼠标移动和松开事件document.removeEventListener(mousemove,

this.onMouseMove);document.removeEventListener(mouseup,

this.onMouseUp);}}

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

(//判断是否存在echarts实例化对象,如果存在则销毁this.chartsDom

null

基于准备好的dom初始化echarts实例this.$nextTick(_

{if

(//判断是否存在echarts实例化对象,如果存在则销毁this.chartsDom

null

{this.chartsDom.dispose();}const

dom

document.getElementById(myChat);dom.style.width

dom.parentNode.parentNode.clientWidth

px;this.chartsDom

//创建echarts实例化对象this.chartsDom.clear();

//清空画布数据//设置对应的参数,标题,x轴,y轴坐标,以及显示的数据let

options

true}]};this.chartsDom.setOption(options);this.chartsDom.resize();setTimeout(function()

{window.addEventListener(resize,

{//

监听鼠标移动事件document.addEventListener(mousemove,

this.onMouseMove);//

监听鼠标松开事件document.addEventListener(mouseup,

this.onMouseUp);},onMouseMove(event)

{if

this.$el.getBoundingClientRect();const

mouseX

移除监听鼠标移动和松开事件document.removeEventListener(mousemove,

this.onMouseMove);document.removeEventListener(mouseup,

this.onMouseUp);}}

require(element-resize-detector);

3.完整代码如下

//elementResizeDetectorMaker该全局函数是使元素调整大小检测器实例的maker函数。

var

require(element-resize-detector);

import

{this.changeEchartsWidthApi();},methods:

{//监听盒子大小,改变echarts宽度,实现echarts自适应changeEchartsWidthApi()

{//

elementResizeDetectorMaker({strategy:

scroll,callOnAdd:

//callOnAdd选项用于确定在添加侦听器时是否应调用它们。

默认为true。

//如果为true则确保在添加侦听器后将对其进行调用。

如果为false则在添加侦听器时将不保证其//被调用不会阻止其被调用debug:

true});//监听class为staticNextMain的元素

大小变化var

this;//侦听元素的调整大小事件并使用元素作为调整大小事件的参数来调用侦听器函数。

传递给函数的选项将//覆盖实例选项erd.listenTo(document.getElementById(echartsWarp),

function(element)

{self.ChartsApi();});},ChartsApi()

{//

基于准备好的dom初始化echarts实例this.$nextTick(_

{if

(//判断是否存在echarts实例化对象,如果存在则销毁this.chartsDom

null

{this.chartsDom.dispose();}const

dom

document.getElementById(myChat);dom.style.width

dom.parentNode.parentNode.clientWidth

px;this.chartsDom

//创建echarts实例化对象this.chartsDom.clear();

//清空画布数据//设置对应的参数,标题,x轴,y轴坐标,以及显示的数据let

options{xAxis:

true}]}this.chartsDom.setOption(options);this.chartsDom.resize();setTimeout(function()

{window.addEventListener(resize,

{//

监听鼠标移动事件document.addEventListener(mousemove,

this.onMouseMove);//

监听鼠标松开事件document.addEventListener(mouseup,

this.onMouseUp);},onMouseMove(event)

{if

this.$el.getBoundingClientRect();const

mouseX

移除监听鼠标移动和松开事件document.removeEventListener(mousemove,

this.onMouseMove);document.removeEventListener(mouseup,

this.onMouseUp);}}