和弦圖在實際運用中還是不可或缺的，結合echarts插件進行使用，可以提高工作效率，話不多說，上代碼

配置初始化設置

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

echartOption: {tooltip: {},legend: {position: 'bottom',bottom: '0',type: 'scroll',itemStyle: {borderCap: 'round'},icon: 'circle'},series: [{name: '用戶訪問次數',type: 'graph',layout: 'circular',circular: {rotateLabel: true},symbolSize: 30,roam: true,draggable: false,label: {color: 'soruce',show: true,position: 'right',formatter: '{b}'},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: []}]},

字段數據結構

links內的數據結構是一個對象數組，其中source即代表起點name，target為終點name，value值即是關系數值（這里可以根據業務需求來進行賦值）

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

data內的數據結構也是一個對象數組，它代表了環上的點，data數據存在，則該點存在

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

點擊事件

當實例化對象后，可對echarts進行點擊事件的獲取與傳參

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

效果圖

最后看一下效果圖，如果覺得有幫助的話點個贊或者關注吧~

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。