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 相关文章推荐
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
vue-property-decorator用法详解
Dec 12 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
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
php下过滤HTML代码的函数
2007/12/10 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
举例讲解Python中装饰器的用法
2015/04/27 Python
在Python下进行UDP网络编程的教程
2015/04/29 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
python的exec、eval使用分析
2017/12/11 Python
python实现感知器
2017/12/19 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
python3爬虫怎样构建请求header
2018/12/23 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
python logging设置level失败的解决方法
2020/02/19 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
高校教师自荐信范文
2014/03/13 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
校长师德表现自我评价
2015/03/05 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书