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,x: 400,y: 400,title: "餅圖",type: 3,下單率: 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-charts和vue-draggable-resizable

v-charts

vue-draggable-resizable

第一次把自己封裝的元件釋出到npm

總結

到此這篇關於vue-drag-chart 拖動/縮放的圖表元件的例項程式碼的文章就介紹到這了,更多相關vue-drag-chart 圖表元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！