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 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
利用JQuery为搜索栏增加tag提示
Jun 22 Javascript
javascript hashtable 修正版 下载
Dec 30 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
在Windows上安装Node.js模块的方法
Sep 25 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
微信小程序仿通讯录功能
Apr 09 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 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
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
PHP7 其他修改
2021/03/09 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
prototype 学习笔记整理
2009/07/17 Javascript
小议javascript 设计模式 推荐
2009/10/28 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
python常见排序算法基础教程
2017/04/13 Python
Python之py2exe打包工具详解
2017/06/14 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
爱国演讲稿500字
2014/05/04 职场文书
工作岗位说明书模板
2014/05/09 职场文书
单位工作证明
2014/10/07 职场文书
PHP遍历数组的6种方式总结
2021/11/17 PHP