vue使用v charts樹型結構

樣式設定

vue版本 v-charts官網

官網樹型的配置文件

這個框架裡面的一些簡單的圖表官網寫的很明了，基本上沒有什麼難度。但在我做動態許可權用樹型展現時，感覺現在沒有介紹樹型的，或者是根據官網文件進行改編的。很少用vue進行開發。

這就是樹型的樣式（當然裡面的資料是我自己定義的，在使用的時候是結合axios動態設定的）

如果是在v-charts**裡面弄得**，最主要的問題就是沒有告訴我們如何設定樣式，以及如何設定資料。

下面我就分兩塊（樣式設定，資料設定）進行說明

首先，無論是在echarts官網還是v-charts裡面都沒有明確的指出在vue裡面如何設定樣式。基本上都是在html裡面直接內嵌呼叫的。

在vue裡面設定樣式或者是屬性，v-charts是將其封裝了一下，並不像html裡面還要自己定義。

直接上**，由於沒有寫注釋所以在**下方我會進行解釋

很簡單的一段**，主要的不是在這段**上，最主要的是它的配置

:data 這個意思是指定資料來源（資料）

:extend 由於v-charts是二次封裝echarts，所以可以通過extend復合元件的形式進行屬性配置

這兩個是最主要的兩個屬性（在這個專案現在說的這個話題裡面）至於其他的屬性請大家移步至官網進行了解。

重要宣告一點,在使用屬性的時候可能會出現設定後效果並沒有實現的情況。

這種可能是你的格式不正確的原因。

這個格式正確是屬性名 : 屬性值

比如show : true

this.chartextend= }}
}}

這段**就是說明在vue下，v-charts 樹型圖表的屬性如何進行設定。

在echarts的屬性目錄中指明series 是乙個陣列

tree1 指明要設定的樹，在這個裡面進行設定樹的屬性即可。

orient: 設定樹的縱向還是橫向

label：設定標題的樣式。

資料的形式是總體是乙個集合，然後裡面，name 是標題的意思就是顯示時的字 value 是判斷這個數所在的結點。樹的子樹是用乙個陣列包著的集合。基本上每一層的每乙個結點是乙個結合，而這一層用乙個陣列包裹著。

const data = ]}
chartdata: 
]}

這是資料的形式，當然在一般的操作中，都是將資料進行動態獲取。

this.data.name = '管理員'
this.data.value = 0
// eslint-disable-next-line no-unused-vars
var table = res.data
// eslint-disable-next-line no-unused-vars
var i
for (i in table) )}}
// eslint-disable-next-line no-redeclare
var j
for (j in table) )}}
}}
// eslint-disable-next-line no-unused-vars
this.data.children = this.children
this.chartdata = ]}
})

這是我的**獲取的資料。當然（因為經驗問題，第一次弄這個，所以弄得太爛了）

在這裡面data1是最後的資料形態。

這裡注意一點，有可能在你弄完之後，資料並沒有顯示，可能是因為它先載入了this.chartdata 在呼叫這個獲取資料的時候，data1還沒有處理完資料，所以，沒有資料沒顯示！所以解決方法是將 this.chartdata，在處理完data1完後，再進行裝載一遍，這樣成功了！

如果有什麼疑問的地方，可以聯絡我，咱們一起交流

vue使用v charts樹型結構

vue中v charts的使用

Vue專案中使用v charts

MFC使用TreeCtrl控制項實現樹型列表（二）

vue使用v charts樹型結構

vue中v charts的使用

Vue專案中使用v charts

MFC使用TreeCtrl控制項實現樹型列表（二）

相關推薦