和弦圖在實(shí)際運(yùn)用中還是不可或缺的，結(jié)合echarts插件進(jìn)行使用，可以提高工作效率，話不多說，上代碼

配置初始化設(shè)置

這里的edgeSymbol屬性是為了配置關(guān)系箭頭的樣式；emphasis設(shè)置了當(dāng)鼠標(biāo)移入到關(guān)系線時，只會凸顯當(dāng)前關(guān)系，隱藏其他關(guān)系線；lineStyle線條的顏色可以設(shè)置成source即跟隨圖形自身的顏色走。很明顯這里只需要傳入數(shù)據(jù)data: [], links: []

echartOption: {tooltip: {},legend: {position: 'bottom',bottom: '0',type: 'scroll',itemStyle: {borderCap: 'round'},icon: 'circle'},series: [{name: '用戶訪問次數(shù)',type: 'graph',layout: 'circular',circular: {rotateLabel: true},symbolSize: 30,roam: true,draggable: false,label: {color: 'soruce',show: true,position: 'right',formatter: ''},edgeSymbol: ['circle', 'arrow'],edgeSymbolSize: [2, 10],edgeLabel: {fontSize: 20},force: {initLayout: 'circular',gravity: 0.05,repulsion: 100,edgeLength: [30, 400]},emphasis: {focus: 'adjacency',lineStyle: {width: 6}},lineStyle: {// color: 'source',color: '#666666',curveness: 0.3},data: [],links: []}]},

字段數(shù)據(jù)結(jié)構(gòu)

links內(nèi)的數(shù)據(jù)結(jié)構(gòu)是一個對象數(shù)組，其中source即代表起點(diǎn)name，target為終點(diǎn)name，value值即是關(guān)系數(shù)值（這里可以根據(jù)業(yè)務(wù)需求來進(jìn)行賦值）

[{source: 'aa',target: 'bb',value: 24,label: "測試aa到bb"}]

data內(nèi)的數(shù)據(jù)結(jié)構(gòu)也是一個對象數(shù)組，它代表了環(huán)上的點(diǎn)，data數(shù)據(jù)存在，則該點(diǎn)存在

[{name: 'aa', value: '22'},{name: 'bb', value: '24'}]

點(diǎn)擊事件

當(dāng)實(shí)例化對象后，可對echarts進(jìn)行點(diǎn)擊事件的獲取與傳參

this.chartInstance = Echarts.init(this.$refs.chart_ref);this.chartInstance.on('click', function (params) {if (self.isTriggerClick) self.$emit('handle-click', params);});

效果圖

最后看一下效果圖，如果覺得有幫助的話點(diǎn)個贊或者關(guān)注吧~

總結(jié)

以上是生活随笔為你收集整理的Echats关系图les-miserables的图表详细解析（和弦图）（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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