vue-drag-chart 拖动/缩放图表组件的实例代码


Posted in Javascript onApril 10, 2020

vue-drag-chart

一个可以拖动 / 缩放的图表组件

vue-drag-chart 拖动/缩放图表组件的实例代码

使用

npm i vue-drag-chart --save
import VueDragChart from "../src/vue-drag-chart/index.vue";

 components: {
 //注册插件
 VueDragChart
 },
 <VueDragChart
  :list="item"
  v-for="(item,index) in chartlist"
  :key="index"
  @changelist="changelist"
 ></VueDragChart>

数据源例子

chartlist: [
  {
   width: 0.3,
   height: 0.3,
   x: 200,
   y: 100,
   title: "折线图",
   type: 1,
   chartData: {
   columns: ["日期", "访问用户", "下单用户", "下单率"],
   rows: [
    { 日期: "1/1", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
    { 日期: "1/2", 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
    { 日期: "1/3", 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
    { 日期: "1/4", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
    { 日期: "1/5", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
    { 日期: "1/6", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
   ]
   }
  },
  {
   width: 0.5,
   height: 0.3,
   x: 400,
   y: 400,
   title: "饼图",
   type: 3,
   chartData: {
   columns: ["日期", "访问用户", "下单用户", "下单率"],
   rows: [
    { 日期: "1/1", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
    { 日期: "1/2", 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
    { 日期: "1/3", 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
    { 日期: "1/4", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
    { 日期: "1/5", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
    { 日期: "1/6", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
   ]
   }
  }
  ]

可调用changelist()方法,每当图表组件进行位置或大小的改变时,会调用这个方法,返回新的数组列表

changelist() {
  console.log(this.chartlist);
 }

请注意父元素一定要有宽高才会生效

环图和饼图做了宽高的适配,图形的半径和上边距会根据组件宽高进行实时缩放。

配置项 简介 类型 备注
width 图表组件宽度 Number 占父元素宽的比例
height 图表组件高度 Number 占父元素高的比例
x 图表组件距父元素的左距离 Number
y 图表组件距父元素的上距离 Number
title 组件标题 String
type 1:折线图,2:环图,3:饼图4:柱状图,5:条形图 Number
chartData 图表数据 ? Object columns中是维度和指标的集合,rows 中是数据的集合

此框架基于v-chartsvue-draggable-resizable

v-charts

vue-draggable-resizable

第一次把自己封装的组件发布到npm

总结

到此这篇关于vue-drag-chart 拖动/缩放的图表组件的实例代码的文章就介绍到这了,更多相关vue-drag-chart 图表组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
为Extjs加加速(javascript加速)
Aug 19 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 #Javascript
JS实现省市县三级下拉联动
Apr 10 #Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 #Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 #Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 #Javascript
javascript实现贪吃蛇经典游戏
Apr 10 #Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 #Javascript
You might like
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
python去除所有html标签的方法
2015/05/05 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
什么是数据抽象
2016/11/26 面试题
办公室文秘自我鉴定
2013/09/21 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
商务助理求职信范文
2014/04/20 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
财务年终工作总结大全
2019/06/20 职场文书