vue中使用echart開發視覺化功能

2021-10-08 23:45:32 字數 2454 閱讀 8943

該模組也是平時工作中所負責的乙個模組，目的是為了能夠快速生成圖表。

原始碼位址

該功能模組技術棧使用了vue,而只要使用到外掛程式則是 echart+vue-drag-resize,echart是一款經典的圖形生成庫,它內建了許許多多的常見圖表，用興趣的朋友也可以上去官網檢視。主要是vue-drag-resize這款外掛程式,專案一開始我是想著自己實現乙個可拖拽可伸縮的元件,但隨著專案越來越多的需求，發現自己編寫的drag-resize越來越多的坑要填，直到我發現這個vue-drag-resize這款外掛程式，這款外掛程式可謂幫了我的大忙,也感謝作者一直在更新和維護。

目前已完成的功能如下

- 圖表資料驅動生成(完成)


- 歷史記錄回撤與前進(完成)


- 圖表公用屬性編輯(完成)


- 右鍵刪除功能(完成)
目前未完成的功能

- 右鍵圖表組合,取消組合,上移,下移等功(未完成)


- 組合圖層設計(未完成)


- 圖表資料聯動(未完成)


- 圖表刻度尺實現(未完成)


- .....
vue實現echart圖表是需要乙個固定dom節點的,所以在則必須在生命週期mounted中實現該功能

需要注意的乙個是每個圖表我都會動態賦值於乙個uid，作為圖表的唯一標識

methods: ,


setoption(optionsdata) ,


init() ,


},	mounted() ,
我在這裡也是對外暴露乙個setoptions方法，為了後期可以動態設定圖表的屬性,另外我們是需要額外引入eachrts的圖表包，具體**存放在echartcomponent/minxins/init.js中

設定圖表的預設的資料，每乙個圖表型別都拆分開成為乙個個單獨的資料夾也是為了方便後期的維護,它們的預設資料的**，我都是從echarts的官網中獲取的。

在編寫**的過程中我一直在思考的如何讓進行最簡單和最為高效的開發方式，如果每乙個每個圖表的引入都要業務元件中引入資料，則會變得非常的麻煩，而這個時候我就想到了webpack中的require.context方法，其中思路與動態生成路由元件是一樣的，參考**在echartcomponent/data/utils/common.js中。

該元件只要是用於實現拖拽圖表,並且把圖表的資料一一暴露出外部元件以供於使用,這裡的拖拽我是使用了html5拖拽的api進行實現，主要參考**在於echarts/components/*******

}


import svgicon from "@/components/svgicon";


import  from "../echartcomponent/data/bar/index";


import  from "../echartcomponent/data/line/index";


import  from "../echartcomponent/data/pie/index";


import  from "../echartcomponent/data/scatter/index";


import  from "../echartcomponent/data/radar/index";


listdata: [,,


,,,],
該元件主要是用來修改當前選中圖表的基本屬性,包括當前的x,y,width,height和基本的echarts圖表屬性，值得注意的一點是，我們是需要對外暴露setdata和getdata這兩種方法的，換句話來說，我們只需要呼叫該元件的setdata方法就可以了去設定側邊欄所有的屬性值。這裡就涉及到了不同元件中的通訊方式,為了後面的維護,我選擇了vuex來作為資料管理。主要**在store/modules/echart.js。另外，由於我是使用到了element中form表單元件，那麼在vuex中使用v-model是需要在計算屬性中，重寫set和get方法的。而且我們也不可能一一去重寫每個屬性，這樣**量就太多了。我在這個地方是通過計算屬性去動態獲取當前currentdata,然後去設定當前的屬性值。主要參考**在echarts/righttool/tabcomponents/echartclass中。

實現歷史記錄的功能無非就是使用乙個棧堆思想，記錄當前你所操作的資料，然後push進這個stack中，然後通過步數來對應stack中的下標元素，但值得注意一點就是,當前操作中斷後，我們需要刪除後續所有的元素。而且在這個過程中我們需要保證資料的不變性,你可以使用json.parse(json.stringfly(data))的方式去實現資料的深拷貝,我在這個地方就是用loadsh庫中clonedeep函式。主要實現的**在src/utils/history.js中

這個模組,只是我工作中所抽取出來的一下部分,但是核心的思路是不會變，只是會給新增到許多奇奇怪怪的需求上去而已。如果我這個模組對你有所幫助也希望你能點個star,稍微的小小支援一下。

- qq 404792402

Vue系列 在vue專案中使用echarts

該示例使用vue cli腳手架搭建 npm install echarts s或者使用國內的 映象 npm install g cnpm registry taobao org cnpm install echarts s 引入echarts import echarts from echarts ...

Vue系列 在vue專案中使用echarts

該示例使用vue cli腳手架搭建 npm install echarts s或者使用國內的 映象 npm install g cnpm registry cnpm install echarts s 引入echarts import echarts from echarts vue.prototy...

在vue專案開發中使用 Mixin

mixin混入。官方解釋 混入 mixin 提供了一種非常靈活的方式，來分發 vue 元件中的可復用功能。乙個混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被 混合 進入該元件本身的選項。官方文件 第一步新建js檔案 新建mixin.js const mymixin met...