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 相关文章推荐
JavaScript 序列化对象实现代码
Dec 18 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
js有关元素内容操作小结
Dec 20 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 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
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
jQuery实现简单的点赞效果
2020/05/29 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
python的dataframe和matrix的互换方法
2018/04/11 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
Python实现播放和录制声音的功能
2020/08/12 Python
python从PDF中提取数据的示例
2020/10/30 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
在校生自我鉴定
2014/01/23 职场文书
小学三年级学生评语
2014/04/22 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
法人代表任命书范本
2014/06/05 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
规范化管理年活动总结
2014/08/29 职场文书
运动员加油词
2015/07/18 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android