vue draggable resizable gorkys與v-chart使用與總結
更新時間：2019年09月05日 13:21:56 作者：無錫肖奈
這篇文章主要介紹了vue draggable resizable gorkys與v-chart使用與總結,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
實現效果:
實現圖表的二次封裝以及表格的自由拖動,縮放功能
先貼出兩個組件的地址:
vue-draggable-resizable-gorkys
圖標的二次封裝
這里我們先做一個簡單的封裝
比如標題+圖表的形式:chart_with_upwards_trend:
<div class="chartcontainer">
<div>{{diyposition.title}}</div>
<ve-line :data="chartData[0]" width="100%" height="100%" :judge-width="true" ref="mychart" :colors="colors"></ve-line>
</div>
尤其說明一下這里的:judge-width="true"屬性
如果不設置這個屬性值為true的話 表格很有可能沒有辦法獲取到初始寬度
另外,如果要實現表格寬度根據父組件的寬度自適應的話
我們要使用vue的ref屬性
在父組件中監(jiān)聽父組件寬度的變化
一旦監(jiān)聽到寬度發(fā)生了變化,就調用子組件的方法
this.$refs.mychart.echarts.resize();
這樣就能結合我們的vue-draggable-resizable-gorkys組件
實現圖表的寬高自適應
關于圖表的配色
我們可以自己定義一個顏色組:
colors: [ "#61a0a8", "#d48265", "#91c7ae", "#749f83", "#ca8622", "#bda29a", "#6e7074", "#546570", "#c4ccd3" ] :colors="colors"
這樣就可以完成圖表的配色了
vue-draggable-resizable-gorkys組件的使用 <vdr :active="false" //確定組件是否應處于活動狀態(tài)。 :w="200px" :h="200px" :resizable="ifresizable"http://定義組件應該可以調整大小。 :draggable="ifdraggable"http://定義組件應該是否可拖動。 v-on:dragging="onDrag"http://每當拖動組件時調用。 v-on:resizing="onResize"http://每當組件調整大小時調用。 @resizestop="onResizstop(index)" @dragstop="onDragstop(index)"http://每當組件停止拖動時調用。 > <LineChartBlock :chartData="charts.blockdata[index].chartdata" :diyposition="item" :changesizewidth="width" :changesizeheight="height" :colors="colors" v-if="charts.blockdata[index].type==1" ></LineChartBlock> </vdr>
總結
以上所述是小編給大家介紹的vue draggable resizable gorkys與v-chart使用與總結,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
本篇文章主要介紹了如何理解Vue的render函數的具體用法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
一文詳解Vue.js生產環(huán)境文件及優(yōu)化策略
隨著 Vue.js 在前端開發(fā)中的普及,如何高效地將 Vue 項目部署到生產環(huán)境成為了開發(fā)者關注的重點,本文將詳細解析 Vue.js 生產環(huán)境文件的使用方法、優(yōu)缺點以及優(yōu)化策略,需要的朋友可以參考下2024-12-12
這篇文章主要為大家詳細介紹了vue實現購物車小案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了vue項目中訪問本地json數據方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
resetFields方法是Element Plus中el-form組件提供的一個非常有用的功能,它允許開發(fā)者輕松重置表單并移除校驗結果,本文給大家介紹element-plus中的resetFields()方法,感興趣的朋友跟隨小編一起看看吧2024-12-12
本文主要介紹了基于Vue3的全屏拖拽上傳組件，其實思路上與其他拖拽上傳組件基本一樣,都是指定一個區(qū)域可拖拽,然后讀取文件在上傳，需要的朋友們下面隨著小編來一起學習學習吧2021-09-09
這篇文章主要介紹了uni-app 的生命周期，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
為什么vue等的這些mvvm框架比傳統(tǒng)的操作dom渲染頁面要快,下面這篇文章主要給大家介紹了關于虛擬DOM與diff算法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
這篇文章主要給大家介紹了關于Vue3?Transition組件給頁面切換并加上動畫效果的相關資料,vue的過渡動畫主要是transition標簽的使用,配合css動畫實現的,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue使用keep-alive保持滾動條位置的實現方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04