1、echarts源码结构
echarts安装
npm install echarts --save
源码目录说明
dist（编译后生成的文件夹）
extension （扩展中使用）
lib （源码中没有，执行webpack编译后才存在）
map （世界地图，中国地图及中国各个省份地图的js和json两种格式的文件）
src （核心源码）
theme （主题）
修改文件位置
node_modules/echarts/lib/chart/GraphView.js
2、修改内容
el.__focusNodeAdjacency
//控制节点放大
el.__unfocusNodeAdjacency
//控制节点定制放大
|
下面注释代码的含义是，在鼠标经过时放大节点，在鼠标离开时，停止放大。
/*
el.off('mouseover', el.__focusNodeAdjacency);
el.off('mouseout', el.__unfocusNodeAdjacency);
if (itemModel.get('focusNodeAdjacency')) {
el.on('mouseover', el.__focusNodeAdjacency = function () {
api.dispatchAction({
type: 'focusNodeAdjacency',
seriesId: seriesModel.id,
dataIndex: el.dataIndex
});
});
el.on('mouseout', el.__unfocusNodeAdjacency = function () {
api.dispatchAction({
type: 'unfocusNodeAdjacency',
seriesId: seriesModel.id
});
});
}
}, this);
data.graph.eachEdge(function (edge) {
var el = edge.getGraphicEl();
el.off('mouseover', el.__focusNodeAdjacency);
el.off('mouseout', el.__unfocusNodeAdjacency);
if (edge.getModel().get('focusNodeAdjacency')) {
el.on('mouseover', el.__focusNodeAdjacency = function () {
api.dispatchAction({
type: 'focusNodeAdjacency',
seriesId: seriesModel.id,
edgeDataIndex: edge.dataIndex
});
});
el.on('mouseout', el.__unfocusNodeAdjacency = function () {
api.dispatchAction({
type: 'unfocusNodeAdjacency',
seriesId: seriesModel.id
});
});
}
}); */
|
若想在单击节点时高亮节点，再次单击节点时停止高亮节点，需要对此文件做如下修改：
步骤1：注释掉原有节点和边线的放大与停止放大
/* el.off('mouseover', el.__focusNodeAdjacency);
el.off('mouseout', el.__unfocusNodeAdjacency);
if (itemModel.get('focusNodeAdjacency')) {
el.on('mouseover', el.__focusNodeAdjacency = function () {
api.dispatchAction({
type: 'focusNodeAdjacency',
seriesId: seriesModel.id,
dataIndex: el.dataIndex
});
});
el.on('mouseout', el.__unfocusNodeAdjacency = function () {
api.dispatchAction({
type: 'unfocusNodeAdjacency',
seriesId: seriesModel.id
});
});
}
}, this);
data.graph.eachEdge(function (edge) {
var el = edge.getGraphicEl();
el.off('mouseover', el.__focusNodeAdjacency);
el.off('mouseout', el.__unfocusNodeAdjacency);
if (edge.getModel().get('focusNodeAdjacency')) {
el.on('mouseover', el.__focusNodeAdjacency = function () {
api.dispatchAction({
type: 'focusNodeAdjacency',
seriesId: seriesModel.id,
edgeDataIndex: edge.dataIndex
});
});
el.on('mouseout', el.__unfocusNodeAdjacency = function () {
api.dispatchAction({
type: 'unfocusNodeAdjacency',
seriesId: seriesModel.id
});
});
}
}); */
|
步骤2：将注释掉的文件用如下文件替换。
var
nodeName=
""
//顶部申明即可
el.off(
'click'
, el.__focusNodeAdjacency);
el.off(
'click'
, el.__unfocusNodeAdjacency);
if
(itemModel.get(
'focusNodeAdjacency'
)) {
el.on(
'click'
,
function
(){
if
(nodeName!= itemModel.option.name) {
//判断是否是连续点击同一个节点
el.__focusNodeAdjacency = api.dispatchAction({
type:
'focusNodeAdjacency'
,
seriesId: seriesModel.id,
dataIndex: el.dataIndex
});
nodeName= itemModel.option.name;
}
else
{
//如果是连续点击同一个节点，则取消高亮效果
el.__unfocusNodeAdjacency = api.dispatchAction({
type:
'unfocusNodeAdjacency'
,
seriesId: seriesModel.id
});
nodeName=
""
;
}
});
}
},
this
);
|
步骤3：在文件中找到focusNodeAdjacency: function (seriesModel, ecModel, api, payload) {}函数，将函数做如下修改，将原有单击节点呈现与节点相关的多层，改为仅高亮呈现其本身，其他节点和边线的透明度改为0.5即可。
focusNodeAdjacency:
function
(seriesModel, ecModel, api, payload) {
var
data =
this
._model.getData();
var
graph = data.graph;
var
dataIndex = payload.dataIndex;
// var edgeDataIndex = payload.edgeDataIndex;
// var node = graph.getNodeByIndex(dataIndex);
// var edge = graph.getEdgeByIndex(edgeDataIndex);
var
el = data.getItemGraphicEl(dataIndex);
var
dataType = el.dataType;
// if (!node && !edge) {
// return;
// }
if
(!el) {
return
;
}
if
(dataIndex !==
null
&& dataType !==
'edge'
) {
graph.eachNode(
function
(node) {
fadeOutItem(node, nodeOpacityPath, 0.5);
});
graph.eachEdge(
function
(edge) {
fadeOutItem(edge, lineOpacityPath, 0.5);
});
var
node = graph.getNodeByIndex(dataIndex);
fadeInItem(node, nodeOpacityPath);
}
},
// if (node) {
// fadeInItem(node, nodeOpacityPath);
// zrUtil.each(node.edges, function (adjacentEdge) {
// if (adjacentEdge.dataIndex < 0) {
// return;
// }
// fadeInItem(adjacentEdge, lineOpacityPath);
// fadeInItem(adjacentEdge.node1, nodeOpacityPath);
// fadeInItem(adjacentEdge.node2, nodeOpacityPath);
// });
// }
// if (edge) {
// fadeInItem(edge, lineOpacityPath);
// fadeInItem(edge.node1, nodeOpacityPath);
// fadeInItem(edge.node2, nodeOpacityPath);
// }
//}
|
3、结束
经过如下修改，此时你的echarts图便可单击高亮呈现，再次单击便可取消高亮呈现。