快捷導(dǎo)航

vue-drag-chart 拖動/縮放圖表組件的實例代碼

更新時間：2020年04月10日 15:28:27 作者：無錫肖奈

這篇文章主要介紹了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>

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

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 }
   ]
   }
  }
  ]

可調(diào)用changelist()方法，每當圖表組件進行位置或大小的改變時，會調(diào)用這個方法，返回新的數(shù)組列表

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

請注意父元素一定要有寬高才會生效

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

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