echarts关系图 点击图例隐藏 修改

最近由于公司业务需要，要在Vue项目中修改echarts图表，把点击图例影藏对应的线换乘点击圆点隐藏

废话不多说，直接上干货：

  // var myChart = this.$echarts.init(document.getElementById('matrix'));    
  var matrix = this.$refs.matrix;	  
  if(matrix){   	
    var myChart = this.$echarts.init(matrix);  	     				      				  
  // 指定图表的配置项和数据
    myChart.setOption({  }）,
    myChart.on('click', function (params) {
        var pos_x = params.event.offsetX;
        var pos_y = params.event.offsetY;
        
        var a1 = document.createElement('a');
        a1.style.color = '#000';
        a1.style.fontSize = '12px';
        a1.style.cursor = 'pointer';
        a1.innerText='显示当前节点';
        
        var a2 = document.createElement('a');
        a2.style.color = '#000';
        a2.style.fontSize = '12px';
        a2.style.cursor = 'pointer';
        a2.innerText='隐藏当前节点';
        
        var a3 = document.createElement('a');
        a3.style.color = '#000';
        a3.style.fontSize = '12px';
        a3.style.cursor = 'pointer';
        a3.innerText='显示所有节点';

        var d1 = document.createElement('div');
        d1.style.margin = '5px';
        d1.appendChild(a1);
        
        var d2 = document.createElement('div');
        d2.style.margin = '5px';
        d2.appendChild(a2);
        
        var d2 = document.createElement('div');
        d2.style.margin = '5px';
        d2.appendChild(a2);

        var d3 = document.createElement('div');
        d3.style.margin = '5px';
        d3.appendChild(a3);

        var div = document.getElementById('tipDialog');
        div.style.textAlign = 'center';
        div.style.position = 'absolute';
        div.style.width = '130px';
        div.style.height = '90px';
        div.style.background = '#fff';
        div.style.border = '1px solid #eeeeee';
        div.style.borderRadius = '5px';
        div.style.top = pos_y + 'px';
        div.style.left = pos_x + 'px';
        div.style.display = 'block';
        // document.onclick = function(){
        //   div.style.display = 'none';
        // }
        var childs = div.childNodes;
        for(var i=childs.length-1;i>=0;i--) {
              var x = div.removeChild(childs[i]);
              if ( x.nodeType == 1 ) {
                x = null;
              }
        }
        
        div.appendChild(d1);
        div.appendChild(d2);
        div.appendChild(d3);
        
        //显示当前节点及其子节点，隐藏其他节点
        a1.onclick = function() {
          
          var childs = div.childNodes;
          console.log(childs);
          for(var i=childs.length-1;i>=0;i--) {
                var x = div.removeChild(childs[i]);
                if ( x.nodeType == 1 ) {
                  x = null;
                }
          }
          
          div.style.display = 'none';
          
          //获取被点击节点的name属性值
          var paramsName = params.name;
          //获取所有的节点的连接信息
          var option = myChart.getOption();
          var series = option.series;
          var links = series[0].links;
          var sourceData = series[0].data;
          //获取被点击节点及与其相关联的所有其他节点
          var tArr = new Array();
          var temp = [paramsName];
          for (var i=0; i<links.length; i++) {
            var s = links[i].source;
            var t = links[i].target;
            if(paramsName == s && temp.indexOf(t)<0){
              temp.push(t);
            }
            if(paramsName == t && temp.indexOf(s)<0){
              temp.push(s);
            }
          
          }
          for (var j = 0; j < sourceData.length; j++) {
              if (temp.indexOf(sourceData[j].name)>=0) {
                tArr.push(sourceData[j]);
              }
            }
        
          option.series[0].data = tArr;
          myChart.setOption(option);
        }
        
        //隐藏当前节点及其子节点，显示其他节点
        a2.onclick = function() {
          
          var childs = div.childNodes;
          for(var i=childs.length-1;i>=0;i--) {
                var x = div.removeChild(childs[i]);
                if ( x.nodeType == 1 ) {
                  x = null;
                }
          }
          
          div.style.display = 'none';
          
          //获取被点击节点的name属性值
          var paramsName = params.name;
          //获取所有的节点的连接信息
          var option = myChart.getOption();
          var series = option.series;
          var sourceData = series[0].data;
          
          //获取被点击节点及与其相关联的所有其他节点
          var tArr = new Array();
          for(var i=0;i<sourceData.length;i++){
            if(sourceData[i].name!=paramsName){
              tArr.push(sourceData[i]);
            }
          }
        
          option.series[0].data = tArr;
          myChart.setOption(option);
        
        }
        //显示其他节点
        a3.onclick = function() {
          
          var childs = div.childNodes;
          for(var i=childs.length-1;i>=0;i--) {
                var x = div.removeChild(childs[i]);
                if ( x.nodeType == 1 ) {
                  x = null;
                }
          }
          
          div.style.display = 'none';
          
          //获取所有的节点的连接信息
          var option = myChart.getOption();
          option.series[0].data = datas;
          myChart.setOption(option);
        }
    });
  }