Echarts桑基图sankey点击高亮显示

• 点击某一项将与其有关联的所有父项目和子项目全部高亮显示，并降低其他无关项目透明度，再次点击则恢复原有状态；
• 在线DEMO查看
• 效果图如下：
  

2022-02-21更新：

• www.makeapie.com网站已于2022年2月15日停止运行了，后续什么时候开放或者是否开放暂时未知，下面提供几个类似的替代的网站：
  1、DataInsight
  2、chartsdev
  3、antcode
  4、isqqw
  5、ppchart

2023-03-30更新：

• 处理点击高亮时，部分模块索引改变导致的跳动问题。

var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/data/energy.json', function(data) {
    myChart.hideLoading();

    myChart.setOption(option = {
        title: {
            text: 'Sankey Diagram'
        },
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: [{
            type: 'sankey',
            data: data.nodes,
            links: data.links,
            emphasis: {
                focus: 'adjacency'
            },
            lineStyle: {
                color: 'source',
                curveness: 0.5
            }
        }]
    });


    let isSelected = false,
        cacheName = '';
    myChart.off("click");
    myChart.on('click', (e) => {
        // console.log(e,drawData)
        if (e.data.source) return;
        let {
            name
        } = e;
        let {
            links,
            nodes
        } = _.cloneDeep(data);
        if (!links || !nodes) return;
        let options = myChart.getOption();
        if (cacheName !== name) {
            isSelected = false;
        }
        cacheName = name;
        if (!isSelected) {
            const selectedNodes = [name];
            links.forEach((item) => {
                if (item.source === name || item.target === name) {
                    if (item.value !== 0) {
                        if (!selectedNodes.includes(item.source)) {
                            selectedNodes.push(item.source);
                        }
                        if (!selectedNodes.includes(item.target)) {
                            selectedNodes.push(item.target);
                        }
                    }
                }
            });
            nodes = nodes.map((node) => {
                if (selectedNodes.includes(node.name)) {
                    return {
                        ...node,
                        itemStyle: {
                            opacity: 1,
                        },
                        label: {
                            opacity: 1,
                        },
                        emphasis: {
                            disabled: false,
                        },
                    };
                } else {
                    return {
                        ...node,
                        itemStyle: {
                            opacity: 0,
                        },
                        label: {
                            show: false,
                            opacity: 0,
                            fontSize: 12,
                        },
                        emphasis: {
                            disabled: true,
                            label: {
                                show: true,
                            },
                            itemStyle: {
                                opacity: 1,
                            },
                        },
                    };
                }
            });
            links = links.map((item) => {
                if (
                    (item.source === name || item.target === name) &&
                    item.value !== 0
                ) {
                    return {
                        ...item,
                        lineStyle: {
                            opacity: 1,
                        },
                        emphasis: {
                            disabled: false,
                        },
                        silent: true,
                    };
                } else {
                    return {
                        ...item,
                        lineStyle: {
                            opacity: 0,
                        },
                        emphasis: {
                            disabled: true,
                            label: {
                                show: item.value !== 0,
                            },
                            itemStyle: {
                                opacity: item.value !== 0 ? 1 : 0,
                            },
                        },
                    };
                }
            });

            isSelected = true;
        } else {
            isSelected = false;
        }
        options.series[0].data = nodes;
        options.series[0].links = links;
        myChart.setOption(options);
    })

});