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 Prototype 对象扩展
May 15 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
JavaScript实现滚动加载更多
Dec 27 Javascript
浅谈react路由传参的几种方式
Mar 23 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
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
extjs render 用法介绍
2013/09/11 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
pip命令无法使用的解决方法
2018/06/12 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
小学生红领巾广播稿
2014/01/21 职场文书
护理不良事件检讨书
2014/02/06 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
我的中国梦主题班会
2015/08/14 职场文书
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
Python实现科学占卜 让视频自动打码
2022/04/09 Python