vue draggable resizable gorkys與v-chart使用與總結

來源：懂視網責編：小采時間：2020-11-27 21:51:10

vue draggable resizable gorkys與v-chart使用與總結

vue draggable resizable gorkys與v-chart使用與總結:實現效果: 實現圖表的二次封裝以及表格的自由拖動,縮放功能先貼出兩個組件的地址: vue-draggable-resizable-gorkys v-chart 圖標的二次封裝這里我們先做一個簡單的封裝比如標題+圖表的形式:chart_with_upwards_trend: <

推薦度：

點擊下載本文 文檔為doc格式

導讀vue draggable resizable gorkys與v-chart使用與總結:實現效果: 實現圖表的二次封裝以及表格的自由拖動,縮放功能先貼出兩個組件的地址: vue-draggable-resizable-gorkys v-chart 圖標的二次封裝這里我們先做一個簡單的封裝比如標題+圖表的形式:chart_with_upwards_trend: <

實現效果:

實現圖表的二次封裝以及表格的自由拖動,縮放功能

先貼出兩個組件的地址:

vue-draggable-resizable-gorkys

v-chart

圖標的二次封裝

這里我們先做一個簡單的封裝

比如標題+圖表的形式: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屬性

在父組件中監聽父組件寬度的變化

一旦監聽到寬度發生了變化,就調用子組件的方法

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" //確定組件是否應處于活動狀態。
 :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使用與總結,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

vue draggable resizable gorkys與v-chart使用與總結

推薦度：

點擊下載本文 文檔為doc格式

標簽： VUE go 使用vue

熱門焦點

vue draggable resizable gorkys與v-chart使用與總結

vue draggable resizable gorkys與v-chart使用與總結

vue draggable resizable gorkys與v-chart使用與總結

最新推薦

猜你喜歡

熱門推薦