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

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

先貼出兩個組件的地址:
vue-draggable-resizable-gorkys

v-chart

圖標的二次封裝
這裏咱們先作一個簡單的封裝
好比標題+圖表的形式📈

<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>