echarts示例中人物關(guān)系圖中節(jié)點是原點或其他形狀，但人物關(guān)系圖中節(jié)點呈現(xiàn)為人物圖像更為合適。
有些情況下，使用symbol: require(‘@/assets…’)可以使用本地資源中的圖片進行展示，但更一般的情況下，我們會從后端進行圖片的請求，通常為圖片二進制流，那么就需要用以下的方式進行節(jié)點的圖片改造，簡單來說就是：

異步請求（ajax/axios）后端圖片數(shù)據(jù)流

將二進制流編碼為base64格式

拼接字符串作為symbol

下面是Vue代碼中的使用，并沒有過多Vue特性，因此泛用性很好

<template><div class="echartLayout"><div id="container" style="width:100%; height:300%; overflow:hidden;"></div><button v-on:click='refresh()'>refresh</button></div> </template><script> export default {name: 'personRelation',data () {return {myChart: null,chartData: [],chartLink: []}},mounted: function () {var this_ = thisvar data = []// 請求需要哪些人物圖片this_.$axios.get('/ls', {params: {dirPath: '***'}}).then(function (response) {var facesArray = response.data.dataconsole.log(facesArray)//根據(jù)結(jié)果，對每個圖片都進行請求for (var i = 0; i < facesArray.length; i++) {var element = facesArray[i]this_.$axios.get('/file', {params: {filePath: '***' + element.name},responseType: 'arraybuffer'}).then(function (response) {// 從response中取得當(dāng)時請求時的圖片名var imageName = response.config.params.filePath.split('/')[response.config.params.filePath.split('/').length - 1]var id = imageName.split('.')[0]//圖片二進制數(shù)據(jù)流轉(zhuǎn)為base64格式var image = 'data:image/jpg;base64,' + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))data.push({symbolSize: 76, symbol: `image://${image}`, id: id})this_.chartData = data}).catch(function (error) {console.log(error)})}}).catch(function (error) {console.log(error)})// 這里link就自己定義吧// this_.chartLink = ...},methods: {refresh: function () {this.initEchart()},initEchart () {let dom = document.getElementById('container')this.myChart = this.$echarts.init(dom)let option = {tooltip: {show: false},series: [{edgeLabel: {normal: {formatter: '{c}',show: true}},edgeSymbol: 'circle',force: {repulsion: 2000},layout: 'force',roam: true,itemStyle: {normal: {color: '#6495ED'},// 鼠標(biāo)放上去有陰影效果emphasis: {shadowColor: '#3721db',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 40}},label: {normal: {show: true}},// 頭像// symbol:symbolSize: 46,type: 'graph',links: this.chartLink,data: this.chartData}]}this.myChart.setOption(option)this.myChart.on('click', function (params) {console.log(params.data) // 獲取點擊的頭像的數(shù)據(jù)信息})} } </script><style scoped></style>

總結(jié)

以上是生活随笔為你收集整理的关于echarts人物关系图，节点展现为图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。