實(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的話 表格很有可能沒有辦法獲取到初始寬度
另外,如果要實(shí)現(xiàn)表格寬度根據(jù)父組件的寬度自適應(yīng)的話
我們要使用vue的ref屬性
在父組件中監(jiān)聽父組件寬度的變化
一旦監(jiān)聽到寬度發(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)網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
