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 图表组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 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="c

  • 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" :

  • 使用vue制作探探滑动堆叠组件的实例代码

    效果图如下所示: 前言 嗨,说起探探想必各位程序汪都不陌生(毕竟妹子很多),能在上面丝滑的翻牌子,探探的的堆叠滑动组件起到了关键的作用,下面就来看看如何用vue写一个探探的堆叠组件 一. 功能分析 简单使用下探探会发现,堆叠滑动的功能很简单,用一张图概括就是: 简单归纳下里面包含的基本功能点: 图片的堆叠 图片第一张的滑动 条件成功后的滑出,条件失败后的回弹 滑出后下一张图片堆叠到顶部 体验优化 根据触摸点的不同,滑动时首图有不同角度偏移 偏移面积判定是否成功滑出 二. 具体实现 有了归纳好的功

  • Vue自定义toast组件的实例代码

    写了两三天,终于把toast组件写出来了.不敢说是最好的设计,希望有更好思路的朋友可以在评论区给我意见!_(:з」∠)_ 第一步:写toast.vue,将样式之类的先定下来 <template> <div v-show="showToast" class="toast" :class="position"> <div class="toast_container" v-if="type=

  • vue.js 实现评价五角星组件的实例代码

    饿了么的五角星有三种形状,分别是实星,半星,空星 并且组件要能实现,这个五角星不同大小,评分也不一样,比如满分五颗星,四颗半星,四颗星等等.... 所以需要像组件传入一个大小:size,一个分数:score 代码如下: <template> <div class="star" :class="starType"> <span class="star-item" :class="itemClass"

  • vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码

    具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></script> <style> </styl

  • vue中倒计时组件的实例代码

    子组件: <template> <span :endTime="endTime" :callback="callback" :endText="endText"> <slot> {{content}} </slot> </span> </template> <script> export default { data(){ return { content: ''

  • vue弹出框组件封装实例代码

    新学vue,参考别人封装弹出层组件.好用! 1.你需要先建一个弹出框的模板: //首先创建一个mack.vue <template> <div class="mack" v-if="isShow"> <div class="mackWeb" :style="text.mackStyle"> <div class="title font_b" v-if="t

  • Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)

    环境搭建 spring boot的简介 以往我们开发时用到spring总是避免不了繁琐的配置,例如我们要配置一个数据库连接,可能需要以下几步: 1.编写jdbc.properties配置文件: 2.创建spring的配置文件,加入spring配置文件前缀.配置数据库连接信息以及sqlsessionFactory等等: 3.还要在web.xml文件中加入spring的监听. springboot的出现大大简化了项目的搭建过程(spring配置以及maven配置),让我们专注于应用功能的开发,而不是

  • vue.js整合mint-ui里的轮播图实例代码

    初始化vue项目 npm install -g vue-cli vue init webpack demo # 中间会让你选npm yarn 等来安装依赖,我选的是yarn,因为它快些 安装mint-ui yarn add mint-ui mint-ui装好了,还要配置一下babel,方法跟着mint-ui的官方文档来配置就可以了 下面是我配置好的 .babelrc 文件,启动的时候会报跟es2015相关的错,装一下 babel-preset-es2015 就好了 { "presets"

  • vue中element-ui表格缩略图悬浮放大功能的实例代码

    element-ui界面非常简洁和美观,提供的组件可以满足绝大多数的应用场景,当表格中显示了图片的缩略图时,想要鼠标浮动在缩略图上时放大图片的效果,该如何实现呢?element-ui虽然没有直接提供图片悬浮放大的组件,但是可以使用Popover弹出框组件,一样实现效果,如下: 具体的代码(此处只是图片单元格的代码,其它代码省略): <el-table-column prop="picture" header-align="center" align="

随机推荐