达到效果：

实现图表的二次封装和表格的自由拖拽和缩放

首先发布两个组件的地址：

vue-draggable-resized-gorkys

v形图

图标的二次封装

这里我们先做一个简单的包装

例如，标题图表是： chart _ with _ updates _ trend :

div class=' chart container ' div { { DIY position . title } }/div ve-line : data=' chart data[0]Width=' 100% ' height=' 100% ' :judge-width='true ' ref=' my chart ' : colors=' colors '/ve-line/div，这里特别说明一下： judge-Width=' true '属性

如果不将该属性值设置为true，很可能表无法获得初始宽度

此外，如果表格的宽度根据父组件的宽度自适应，

我们想使用vue的ref属性

倾听父组件中父组件宽度的变化

一旦听说宽度发生了变化，就调用子组件的方法

这个。$ refs . my chart . echart . resize()；

这样，我们就可以组合我们的vue-draggable-resizable-gorkys组件

实现图表的宽度和高度自适应

关于图形的配色

我们可以自己定义颜色组：

color :[' # 61 A0 A8 '，' # d48265 '，' # 91c7ae '，' # 749f83 '，' # ca8622 '，' # bda29a '，' # 6e7074 '，' # 546570 '，'

使用vue-draggable-可重用-gorkys组件vdr :active='false' //确定该组件是否应处于活动状态。 w=' 200px ' :h=' 200px ' : resizable=' if resized '/定义组件应该是可调整大小的。draggable='ifdraggable'//定义组件是否应该是可拖动的。每当拖动组件时，都会调用v-: dragging=' onDrag '//方法。每当组件调整大小时，都会调用v-: resizing=' OnResize '//方法。@ resize stop=' onresizstop(index)' @ drag stop=' onddrag stop(index)'//每当组件停止拖动时调用。line chart block : chart data=' charts . block data[index]。chartdata' : DIY位置=' item' :变更尺寸宽度=' width' :变更尺寸高度=' height ' : colors=' colors ' v-if=' charts . block data[index]。type==1 '/折线图块/VDR摘要

以上是边肖介绍的vue可拖动大小的gorkys和v形图的使用和总结，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！