vue draggable resizable gorkys与v-chart使用与总结


Posted in Javascript onSeptember 05, 2019

实现效果:

实现图表的二次封装以及表格的自由拖动,缩放功能

vue draggable resizable gorkys与v-chart使用与总结

vue draggable resizable gorkys与v-chart使用与总结

先贴出两个组件的地址:

vue-draggable-resizable-gorkys

v-chart

图标的二次封装

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

比如标题+图表的形式:chart_with_upwards_trend:

<div class="chartcontainer">
 <div>{{diyposition.title}}</div>
 <ve-line :data="chartData[0]" width="100%" height="100%" :judge-width="true" ref="mychart" :colors="colors"></ve-line>
 </div>

尤其说明一下这里的:judge-width="true"属性

如果不设置这个属性值为true的话 表格很有可能没有办法获取到初始宽度

另外,如果要实现表格宽度根据父组件的宽度自适应的话

我们要使用vue的ref属性

在父组件中监听父组件宽度的变化

一旦监听到宽度发生了变化,就调用子组件的方法

this.$refs.mychart.echarts.resize();

这样就能结合我们的vue-draggable-resizable-gorkys组件

实现图表的宽高自适应

关于图表的配色

我们可以自己定义一个颜色组:

colors: [
  "#61a0a8",
  "#d48265",
  "#91c7ae",
  "#749f83",
  "#ca8622",
  "#bda29a",
  "#6e7074",
  "#546570",
  "#c4ccd3"
  ]
:colors="colors"

这样就可以完成图表的配色了

vue-draggable-resizable-gorkys组件的使用
<vdr
  :active="false" //确定组件是否应处于活动状态。
  :w="200px"
  :h="200px"
  :resizable="ifresizable"//定义组件应该可以调整大小。
  :draggable="ifdraggable"//定义组件应该是否可拖动。
  v-on:dragging="onDrag"//每当拖动组件时调用。
  v-on:resizing="onResize"//每当组件调整大小时调用。
  @resizestop="onResizstop(index)"
  @dragstop="onDragstop(index)"//每当组件停止拖动时调用。
  >
   <LineChartBlock
   :chartData="charts.blockdata[index].chartdata"
   :diyposition="item"
   :changesizewidth="width"
   :changesizeheight="height"
   :colors="colors"
   v-if="charts.blockdata[index].type==1"
  ></LineChartBlock>
  </vdr>

总结

以上所述是小编给大家介绍的vue draggable resizable gorkys与v-chart使用与总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
定义select的边框颜色
Apr 28 Javascript
jquery form 加载数据示例
Apr 21 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
JavaScript实现动态生成表格
Aug 02 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
JavaScript获取某一天所在的星期
Sep 05 #Javascript
layui table设置某一行的字体颜色方法
Sep 05 #Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 #Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 #Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 #Javascript
layui动态加载多表头的实例
Sep 05 #Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 #Javascript
You might like
php中用数组的方法设置cookies
2011/04/21 PHP
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
利用php输出不同的心形图案
2016/04/22 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
Python引用模块和查找模块路径
2016/03/17 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
Python实现像awk一样分割字符串
2020/09/15 Python
如何使用python写截屏小工具
2020/09/29 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
python 基于opencv实现图像增强
2020/12/23 Python
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
办公室文秘自我评价
2013/09/21 职场文书
2014年大学生自我评价
2014/01/19 职场文书
安全生产承诺书
2014/03/26 职场文书
一年级学生期末评语
2014/04/21 职场文书
解除财产保全担保书
2014/05/20 职场文书
工厂见习报告范文
2014/10/31 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
广播体操比赛主持词
2015/06/29 职场文书
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android
服务器nginx权限被拒绝解决案例
2022/09/23 Servers