vue draggable resizable gorkys與v-chart使用與總結(jié)
實現(xiàn)效果:
實現(xiàn)圖表的二次封裝以及表格的自由拖動,縮放功能
先貼出兩個組件的地址:
vue-draggable-resizable-gorkys
圖標(biāo)的二次封裝
這里我們先做一個簡單的封裝
比如標(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>
尤其說明一下這里的:judge-width="true
"屬性
如果不設(shè)置這個屬性值為true的話 表格很有可能沒有辦法獲取到初始寬度
另外,如果要實現(xiàn)表格寬度根據(jù)父組件的寬度自適應(yīng)的話
我們要使用vue的ref屬性
在父組件中監(jiān)聽父組件寬度的變化
一旦監(jiān)聽到寬度發(fā)生了變化,就調(diào)用子組件的方法
this.$refs.mychart.echarts.resize();
這樣就能結(jié)合我們的vue-draggable-resizable-gorkys
組件
實現(xiàn)圖表的寬高自適應(yīng)
關(guān)于圖表的配色
我們可以自己定義一個顏色組:
colors: [ "#61a0a8", "#d48265", "#91c7ae", "#749f83", "#ca8622", "#bda29a", "#6e7074", "#546570", "#c4ccd3" ] :colors="colors"
這樣就可以完成圖表的配色了
vue-draggable-resizable-gorkys組件的使用 <vdr :active="false" //確定組件是否應(yīng)處于活動狀態(tài)。 :w="200px" :h="200px" :resizable="ifresizable"http://定義組件應(yīng)該可以調(diào)整大小。 :draggable="ifdraggable"http://定義組件應(yīng)該是否可拖動。 v-on:dragging="onDrag"http://每當(dāng)拖動組件時調(diào)用。 v-on:resizing="onResize"http://每當(dāng)組件調(diào)整大小時調(diào)用。 @resizestop="onResizstop(index)" @dragstop="onDragstop(index)"http://每當(dāng)組件停止拖動時調(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é),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
Vue+Element-ui表單resetFields無法重置問題
本文主要介紹了Vue+Element-ui表單resetFields無法重置問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04解決ElementUI組件中el-upload上傳圖片不顯示問題
這篇文章主要介紹了解決ElementUI組件中el-upload上傳圖片不顯示問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10Vue+Element實現(xiàn)動態(tài)生成新表單并添加驗證功能
這篇文章主要介紹了Vue+Element實現(xiàn)動態(tài)生成新表單并添加驗證功能,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05JS 實現(xiàn)獲取對象屬性個數(shù)的方法小結(jié)
這篇文章主要介紹了JS 實現(xiàn)獲取對象屬性個數(shù)的方法,結(jié)合實例形式總結(jié)分析了JS 獲取對象屬性個數(shù)的三種常用方法,需要的朋友可以參考下2023-05-05