vue-drag-chart拖動(dòng)/縮放圖表組件的用法

這篇文章主要講解了vue-drag-chart拖動(dòng)/縮放圖表組件的用法，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

成都創(chuàng)新互聯(lián)公司2013年至今，先為宜川等服務(wù)建站，宜川等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為宜川企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

vue-drag-chart

一個(gè)可以拖動(dòng) / 縮放的圖表組件

使用

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

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

數(shù)據(jù)源例子

chartlist: [
  {
   width: 0.3,
   height: 0.3,
   x: 200,
   y: 100,
   title: "折線圖",
   type: 1,
   chartData: {
   columns: ["日期", "訪問(wèn)用戶", "下單用戶", "下單率"],
   rows: [
    { 日期: "1/1", 訪問(wèn)用戶: 1393, 下單用戶: 1093, 下單率: 0.32 },
    { 日期: "1/2", 訪問(wèn)用戶: 3530, 下單用戶: 3230, 下單率: 0.26 },
    { 日期: "1/3", 訪問(wèn)用戶: 2923, 下單用戶: 2623, 下單率: 0.76 },
    { 日期: "1/4", 訪問(wèn)用戶: 1723, 下單用戶: 1423, 下單率: 0.49 },
    { 日期: "1/5", 訪問(wèn)用戶: 3792, 下單用戶: 3492, 下單率: 0.323 },
    { 日期: "1/6", 訪問(wèn)用戶: 4593, 下單用戶: 4293, 下單率: 0.78 }
   ]
   }
  },
  {
   width: 0.5,
   height: 0.3,
   x: 400,
   y: 400,
   title: "餅圖",
   type: 3,
   chartData: {
   columns: ["日期", "訪問(wèn)用戶", "下單用戶", "下單率"],
   rows: [
    { 日期: "1/1", 訪問(wèn)用戶: 1393, 下單用戶: 1093, 下單率: 0.32 },
    { 日期: "1/2", 訪問(wèn)用戶: 3530, 下單用戶: 3230, 下單率: 0.26 },
    { 日期: "1/3", 訪問(wèn)用戶: 2923, 下單用戶: 2623, 下單率: 0.76 },
    { 日期: "1/4", 訪問(wèn)用戶: 1723, 下單用戶: 1423, 下單率: 0.49 },
    { 日期: "1/5", 訪問(wèn)用戶: 3792, 下單用戶: 3492, 下單率: 0.323 },
    { 日期: "1/6", 訪問(wèn)用戶: 4593, 下單用戶: 4293, 下單率: 0.78 }
   ]
   }
  }
  ]

可調(diào)用changelist()方法，每當(dāng)圖表組件進(jìn)行位置或大小的改變時(shí)，會(huì)調(diào)用這個(gè)方法，返回新的數(shù)組列表

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

請(qǐng)注意父元素一定要有寬高才會(huì)生效

環(huán)圖和餅圖做了寬高的適配，圖形的半徑和上邊距會(huì)根據(jù)組件寬高進(jìn)行實(shí)時(shí)縮放。

配置項(xiàng)	簡(jiǎn)介	類型	備注
width	圖表組件寬度	Number	占父元素寬的比例
height	圖表組件高度	Number	占父元素高的比例
x	圖表組件距父元素的左距離	Number
y	圖表組件距父元素的上距離	Number
title	組件標(biāo)題	String
type	1:折線圖，2:環(huán)圖，3:餅圖4:柱狀圖，5:條形圖	Number
chartData	圖表數(shù)據(jù) 📈	Object	columns中是維度和指標(biāo)的集合，rows 中是數(shù)據(jù)的集合

此框架基于v-charts和vue-draggable-resizable

v-charts

vue-draggable-resizable

第一次把自己封裝的組件發(fā)布到npm

看完上述內(nèi)容，是不是對(duì)vue-drag-chart拖動(dòng)/縮放圖表組件的用法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享文章：vue-drag-chart拖動(dòng)/縮放圖表組件的用法
網(wǎng)站鏈接：http://aaarwkj.com/article26/phogcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、網(wǎng)站改版、面包屑導(dǎo)航、微信小程序、小程序開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

vue-drag-chart拖動(dòng)/縮放圖表組件的用法