Echarts在线免费图表

 
            let data = {
    "nodes": [
        { id: 'end', level: 3 },

        { id: 'one0', level: 0 },
        { id: 'one1', level: 0 },
        { id: 'one2', level: 0 },
        { id: 'one3', level: 0 },
        { id: 'one4', level: 0 },

        { id: 'two0', level: 1 },
        { id: 'two1', level: 1 },
        { id: 'two2', level: 1 },
        { id: 'two3', level: 1 },
        { id: 'two4', level: 1 },

        { id: 'three0', level: 3 },
        { id: 'three1', level: 3 },
        { id: 'three2', level: 3 },
        { id: 'three3', level: 3 },
        { id: 'three4', level: 1 },
        { id: 'three5', level: 1 },
        { id: 'three6', level: 1 },
        { id: 'three7', level: 1 },


        { id: 'four1' },
        { id: 'four2' },
    ],
    "links": [
        { source: 'one0', target: 'two0', value: 1 },
        { source: 'one1', target: 'two1', value: 1 },
        { source: 'one2', target: 'two2', value: 1 },
        { source: 'one3', target: 'two3', value: 1 },
        { source: 'one4', target: 'two4', value: 1 },

        { source: 'two0', target: 'three0', value: 1 },
        { source: 'two0', target: 'three1', value: 1 },
        { source: 'two0', target: 'three2', value: 1 },
        { source: 'two0', target: 'three3', value: 1 },
        { source: 'two0', target: 'three4', value: 1 },
        { source: 'two0', target: 'right0', value: 1 },
        { source: 'two0', target: 'right1', value: 1 },
        { source: 'two0', target: 'right2', value: 1 },
        { source: 'two0', target: 'right3', value: 1 },
        { source: 'two0', target: 'right4', value: 1 },

        { source: 'two1', target: 'three5', value: 1 },
        { source: 'two1', target: 'three4', value: 1 },
        { source: 'two2', target: 'three6', value: 1 },
        { source: 'two3', target: 'three7', value: 1 },
        { source: 'two4', target: 'three7', value: 1 },
        { source: 'three0', target: 'four1', value: 1 },
        { source: 'three1', target: 'four2', value: 1 },
        { source: 'three1', target: 'four1', value: 1 },
        { source: 'three2', target: 'four1', value: 1 },
        { source: 'three3', target: 'four1', value: 1 },
        { source: 'three4', target: 'four1', value: 1 },
        { source: 'three5', target: 'four2', value: 1 },
        { source: 'three6', target: 'four2', value: 1 },
        { source: 'three7', target: 'four2', value: 1 },
        { source: 'four1', target: 'end', value: 1 },
        { source: 'four2', target: 'end', value: 1 },
    ]
}

const dg = (name) => {
    data.links.map((v) => {
        if (v.source == name) {
            v['gx'] = 1;
            dg(v.target)
        }
    })
}

const dg2 = (name1, name2) => {
    data.links.map((v) => {
        if (v.target == name1) {
            v['gx'] = 1;
            dg2(v.source, v.target);
        }
    })
}

const dg3 = (name1) => {
    data.links.map((v) => {
        if (v.target == name1) {
            v['gx'] = 1;
            dg3(v.source);
        }
    })
}

option = {
   title: {
      text: 'Sankey Diagram'
   },
   tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove'
   },
   series: [
      {
         type: 'sankey',
         data: data.nodes,
         links: data.links,
         draggable: false,
         // emphasis: {
         //     focus: 'adjacency'
         //     // blurScope: 'global'
         // },
         levels: [
            {
               depth: 0,
               itemStyle: {
                  color: '#fbb4ae'
               },
               lineStyle: {
                  color: 'source',
                  opacity: 0.6
               }
            },
            {
               depth: 1,
               itemStyle: {
                  color: '#b3cde3'
               },
               lineStyle: {
                  color: 'source',
                  opacity: 0.6
               }
            },
            {
               depth: 2,
               itemStyle: {
                  color: '#ccebc5'
               },
               lineStyle: {
                  color: 'source',
                  opacity: 0.6
               }
            },
            {
               depth: 3,
               itemStyle: {
                  color: '#decbe4'
               },
               lineStyle: {
                  color: 'source',
                  opacity: 0.6
               }
            },

            {
               depth: 4,
               itemStyle: {
                  color: 'gold'
               },
               lineStyle: {
                  color: 'source',
                  opacity: 0.6
               }
            }
         ],
         lineStyle: {
            curveness: 0.5
         }
      }
   ]
}

myChart.setOption(option);

    myChart.off("mouseover");
    myChart.on('mouseover', (eventParam) => {
        data.links.forEach((link) => {
            link.gx = 0;
            link['lineStyle'] = {};
        })
        if (eventParam.dataType == "node") {
            let name1 = eventParam.data.id;  //这里可能会变化
            let items = data.links.filter((v) => v.target == name1);
            if (items.length <= 0) {
                items = data.links.filter((v) => v.source == name1)
            }
            items.map((item) => {
                item['gx'] = 1;
                dg(item.target);
                dg3(item.source);
            })
            data.links.map((link) => {
                if (link.gx) {
                    link['lineStyle'] = {
                        color: 'red'
                    }
                }
            })
            myChart.setOption(option);
            return;
        }

        dg(eventParam.data.target);
        dg2(eventParam.data.source, eventParam.data.target);
        data.links.map((link) => {
            if (link.gx) {
                link['lineStyle'] = {
                    color: 'red'
                }
            }
            if (link.source == eventParam.data.source && link.target == eventParam.data.target) {
                link['lineStyle'] = {
                    color: 'red'
                }
            }
        })
        myChart.setOption(option);
    })
    myChart.on('mouseout',(eventParam)=>{
        data.links.forEach((link)=>{
            link.gx = 0;
            link.lineStyle = {};
        })
        myChart.setOption(option);
    })