Detailed description of nodes and link names highlighted by echarts and echarts highlighted by mouse

Detailed description of nodes and link names highlighted by echarts and echarts highlighted by mouse

In this documentFocusNodeAdjacencyAttribute.

1. Effect

First, the result is displayed. After the mouse is overwritten, only the node name is displayed, but the link name is not displayed.

After modification, you can display both the node name and the (custom) Link name.

2. Code

The html part is like this.

<Div id = "main"> </div>

Js Code. jquery and echarts. js are used in the source code version, because they will be modified in the source code ......

Echarts. js

In fact, the js Code is no different from the demo code on the echart official website ......

To set a normal graph, you only need to add focusNodeAdjacency: true.

$ (Function () {showChart () ;}); var myChart; option = {title: {text: 'example'}, animationDurationUpdate: 1500, animationEasingUpdate: 'quinticinout ', series: [{type: 'graph', layout: 'force', // Add data: [], edges: [], // This label manages the data label: {emphasis: {position: 'right', show: true }}, force: {repulsion: 1000}, roam: true, // highlight the specified node and all its adjacent nodes. FocusNodeAdjacency: true, lineStyle: {normal: {width: 0.5, curveness: 0.3, opacity: 0.7 }}, draggable: true}]}; function showChart () {myChart = echarts. init (document. getElementById ('main'); myChart. showLoading (); $. ajax ({// I used struts2 to make a small background. This url is an action url in it: 'echartsdisplay', type: 'post', data :"{}", dataType: 'json', success: function (data) {myChart. hideLoading (); // data The structure is shown below and can correspond to options one by one. series [0]. data = data. nodes. map (function (node) {return {name: node. name, itemStyle: {normal: {color: node. color }}, symbolSize: node. size, };}); option. series [0]. edges = data. links. map (function (edge) {return {source: edge. source, target: edge.tar get, attribute: edge. value // in addition to the parameters specified in the api, you can also use some custom parameters. The attribute here is custom. This parameter is used when you change the source code. };}); MyChart. setOption (option, true) ;}, error: function (errorMsg) {alert ("failed to request data! ");}});};

The data structure and content returned by the call interface are as follows:

Nodes indicates the node and put it in option. series [0]. data.

Nodes has three parameters: color indicates the color of the node, name indicates the name (Label) of the node, and size indicates the size of the node.

Links indicates the link and put it in option. series [0]. edges.

Links has three parameters: source: link start point (bar), target is the link end point (bar), value is the link name (TAG), and put it in the attribute parameter in edges.

To achieve this effect, you must not set the label parameter for the link in edges.

3. Modify the focusNodeAdjacency method in the source code.

I am ashamed, because I did not find a method in the echart api that can directly achieve that effect. I can only change it in the echarts source code.

Search for focusNodeAdjacency in echarts. js and you will soon be able to find the following content. Then, as long as you add the following three lines of code with comments, you will be able to display the effect of nodes and link names in this article.

FocusNodeAdjacency: function (seriesModel, ecModel, api, payload) {var data = this. _ model. getData (); var dataIndex = payload. dataIndex; var el = data. getItemGraphicEl (dataIndex); if (! El) {return;} var graph = data. graph; var dataType = el. dataType; function fadeOutItem (item, opacityPath) {var opacity = getItemOpacity (item, opacityPath); var el = item. getGraphicEl (); if (opacity = null) {opacity = 1;} el. traverse (function (child) {child. trigger ('normal'); if (child. type! = 'Group') {child. setStyle ('opacity ', opacity * 0.1) ;}} function fadeInItem (item, opacityPath) {var opacity = getItemOpacity (item, opacityPath); var el = item. getGraphicEl (); el. traverse (function (child) {child. trigger ('emphasa');/*** if the current child is a link, the tag is displayed and the TAG content is customized. * Use item. getModel (). get ('xxx') to change xxx to the corresponding parameter name. * all built-in and custom content can be obtained. * Here, the get ('attribute') attribute is a custom parameter of edge. */If (child. type = 'EC-line') {child. setStyle ('text', item. getModel (). get ('attribute');}/*** ends. The above two sentences are added here. */If (child. type! = 'Group') {child. setStyle ('opacity ', opacity) ;}}) ;}if (dataIndex! = Null & dataType! = 'Edge ') {graph. eachNode (function (node) {fadeOutItem (node, nodeOpacityPath) ;}); graph. eachEdge (function (edge) {fadeOutItem (edge, lineOpacityPath) ;}); var node = graph. getNodeByIndex (dataIndex); fadeInItem (node, nodeOpacityPath); zrUtil. each (node. edges, function (edge) {if (edge. dataIndex <0) {return;} fadeInItem (edge, lineOpacityPath); fadeInItem (edge. node1, nodeOpacityPath); fadeInItem (edge. Node2, nodeOpacityPath) ;}}, unfocusNodeAdjacency: function (seriesModel, ecModel, api, payload) {var graph = this. _ model. getData (). graph; graph. eachNode (function (node) {var opacity = getItemOpacity (node, nodeOpacityPath); node. getGraphicEl (). traverse (function (child) {child. trigger ('normal'); if (child. type! = 'Group') {child. setStyle ('opacity ', opacity) ;}}) ;}); graph. eachEdge (function (edge) {var opacity = getItemOpacity (edge, lineOpacityPath); edge. getGraphicEl (). traverse (function (child) {child. trigger ('normal'); if (child. type! = 'Group') {child. setStyle ('opacity ', opacity);/*** Add the following sentence. * This method is called when the mouse is removed from the node to cancel the highlighted and Label display functions. * Link labels are cleared here. * If a label is directly set for the link, the link will be cleared in this step. */Child. setStyle ('text ','');}});});},

The above echarts mouse overwrite the detailed explanation of highlighted nodes and link names, which is all the content shared by Alibaba Cloud. I hope you can give us a reference and support for the customer's house.