vue-drag-chart

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

使用

npm i vue-drag-chart --saveimport 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()方法，每當(dāng)圖表組件進(jìn)行位置或大小的改變時(shí)，會調(diào)用這個(gè)方法，返回新的數(shù)組列表

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

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

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

配置項(xiàng) 簡介 類型 備注 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

總結(jié)

到此這篇關(guān)于vue-drag-chart 拖動/縮放的圖表組件的實(shí)例代碼的文章就介紹到這了,更多相關(guān)vue-drag-chart 圖表組件內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！