zoukankan      html  css  js  c++  java
  • echarts之树形图改变节点之间连线颜色以及结点的颜色

      首先来看一下效果图:

      

       首先需要用到echarts的树形图组件;

      思路:首先分别去改变根节点下第一层子节点的颜色以及它们之间的连线颜色。

      改变一个子节点的颜色之后,再通过遍历去改变这个子节点下的子节点的颜色,以及他们之间的颜色。

      需要用到得起就是两个属性:

        在data中设置lineStyle是边的样式,itemStyle是节点样式

      下面贴出js代码:

      需要注意的是:改变颜色,因为大致过程是一样的,只是第一层子节点的名称,以及要设置的颜色不一样,其他的没有任何改变。所以我们提取出来一个方法:function yanse(obj,color),将两个变量作为参数传递。使用时多次调用函数即可。

      看上图,改变过程是(函数执行一次的效果):先找到股东----->中国林业学院研究院、凌云、王玉昙。

      多次调用函数,传参数即可。

    var dom = document.getElementById("main");
    var myChart = echarts.init(dom);
    
    myChart.showLoading();
    $.get("MessageServlet?method=qiye", function (data) {
        myChart.hideLoading();
    
        data.children.forEach(function (datum, index) {
            index % 2 === 0 && (datum.collapsed = true);
        });    
        var color = "blue";
        yanse(data.children[0],color);
          color = "red";
          yanse(data.children[1],color);
          color = "green";
          yanse(data.children[2],color);
          color = "yellow";
          yanse(data.children[3],color);
          color = "pink";
          yanse(data.children[4],color);
       
       
       
      myChart.setOption(option = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                series: [
                    {
                        type: 'tree',
    
                        data: [data],
    
                        top: '18%',
                        bottom: '14%',
    
                        layout: 'radial',
    
                        symbol: 'emptyCircle',
    
                        symbolSize: 7,
    
                        initialTreeDepth: 3,
    
                        animationDurationUpdate: 750,
    
                        emphasis: {
                            focus: 'descendant'
                        }
                    }
                ]
            });
        });
    function yanse(obj,color) {
         obj.itemStyle = {
                   color : color,
                   borderColor:color
               };
           obj.lineStyle = {
                   color : color,
                   borderColor:color
               };
          //去实现第一层某个子节点下的所有节点
          for (var i = 0; i < obj.children.length; i++) {
               obj.children[i].itemStyle = {
                        color : color,
                        borderColor:color
                    };
                 obj.children[i].lineStyle = {
                        color : color,
                        borderColor:color
                    };
            }
    }
  • 相关阅读:
    JSP第三章
    JSP第二章
    JSP第一章
    异常
    七种设计原则
    非泛型集合
    .NET第一章
    航班预定系统
    JSP数据交互(二)
    JSP数据交互(一)
  • 原文地址:https://www.cnblogs.com/moxihuishou/p/14195001.html
Copyright © 2011-2022 走看看