亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue draggable resizable gorkys與v-chart使用與總結(jié)

 更新時(shí)間：2019年09月05日 13:21:56   作者：無(wú)錫肖奈  
這篇文章主要介紹了vue draggable resizable gorkys與v-chart使用與總結(jié),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

實(shí)現(xiàn)效果:

實(shí)現(xiàn)圖表的二次封裝以及表格的自由拖動(dòng),縮放功能

先貼出兩個(gè)組件的地址:

vue-draggable-resizable-gorkys

v-chart

圖標(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的話(huà) 表格很有可能沒(méi)有辦法獲取到初始寬度

另外,如果要實(shí)現(xiàn)表格寬度根據(jù)父組件的寬度自適應(yīng)的話(huà)

我們要使用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)文章

最新評(píng)論