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