vue中vue-draggable-resizable-gorkys與v-chart怎么用

小編給大家分享一下vue中vue-draggable-resizable-gorkys與v-chart怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

實現效果:

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

先貼出兩個組件的地址:

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"//定義組件應該可以調整大小。
  :draggable="ifdraggable"//定義組件應該是否可拖動。
  v-on:dragging="onDrag"//每當拖動組件時調用。
  v-on:resizing="onResize"//每當組件調整大小時調用。
  @resizestop="onResizstop(index)"
  @dragstop="onDragstop(index)"//每當組件停止拖動時調用。
  >
   <LineChartBlock
   :chartData="charts.blockdata[index].chartdata"
   :diyposition="item"
   :changesizewidth="width"
   :changesizeheight="height"
   :colors="colors"
   v-if="charts.blockdata[index].type==1"
  ></LineChartBlock>
  </vdr>

以上是“vue中vue-draggable-resizable-gorkys與v-chart怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！