使用百度Echarts制作力导向图

最近项目需求制作一个力导向图来展示企业的画像等关系信息，故想到了百度Echarts的关系图，在这使用Echarts3.0版本来实现。先上效果图，再看代吗

哎，本来想整个工程扔出来，发现好像没地方上传附件，所以就先附上部分重要代码，节点的参数大部分封装在后台代码中，前端js只负责配置参数以及调用后台获取对应的节点以及关系线。你也可以所有节点和线的数据都在js中构造也是可以的。

//C#代码

using System;
using System.Collections.Generic;
using System.Web.Mvc;
using System.Text;
using System.Threading;

namespace 企业画像关系图.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        #region 获取所有的类目
        /// 

        /// 获取所有的类目
        /// 
        /// 
        public ActionResult GetCategory(string type)
        {
            List list = new List();
            Graph_Category category1 = new Graph_Category();
            if (type == "Product")
            {
                category1.name = "Product";
                list.Add(category1);
            }           
            Graph_Category category2 = new Graph_Category();
            category2.name = "Enterprise";
            list.Add(category2);
            Graph_Category category3 = new Graph_Category();
            category3.name = "Enterprise Dimension";
            list.Add(category3);
            Graph_Category category4 = new Graph_Category();
            category4.name = "Company Portrait";
            list.Add(category4);
            Graph_Category category5 = new Graph_Category();
            category5.name = "Company Matching";
            list.Add(category5);
            return Json(new { status = true, categorys = list,messgage="成功" },JsonRequestBehavior.AllowGet);
        }
        #endregion

        #region 通过产品名称获取节点以及其关系
        /// 

        /// 通过产品名称获取节点以及其关系
        /// 
        /// 
        /// 
        public ActionResult GetNodesByProduct(string name)
        {
            List nodeList = new List();
            List linkList = new List();
            int productIndex = 0;
            int enterpriceIndex = 1;

            #region 插入产品节点            
            string id1 = Guid.NewGuid().ToString();
            Graph_Node node1 = GetNode(id1,"","钛白粉", productIndex, "Product", "circle",30,true,
                new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color="#ed506c", opacity=1 } },null,null);
            nodeList.Add(node1);
            #endregion

            #region 插入产品关联的企业节点
            string id2 = Guid.NewGuid().ToString();
            string name2 = GetRandomName();
            Graph_Node node2 = GetNode(id2, node1.id, name2, enterpriceIndex, "Enterprise", "circle", 30, false,
                new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#b3d0ff", opacity = 1 } },null,null);
            Graph_Link link2 = GetLink(id1,id2,300,new[] { 1,1},
                new Graph_linkStyle() { normal=new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity=1 } });   
            nodeList.Add(node2);
            linkList.Add(link2);
            //获取企业下的所有默认节点
            //var node2_allChild = GetCompanyChildNodes(id2,2,0);
            //nodeList.AddRange(node2_allChild.nodes);
            //linkList.AddRange(node2_allChild.links);

            string id3 = Guid.NewGuid().ToString();
            string name3 = GetRandomName();
            Graph_Node node3 = GetNode(id3, node1.id, name3, enterpriceIndex, "Enterprise", "circle", 30, false, 
                new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#b3d0ff", opacity = 1 } },null,null);
            Graph_Link link3 = GetLink(id1, id3, 200, new[] { 1, 1 }, 
                new Graph_linkStyle() { normal = new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity = 1 } });
            nodeList.Add(node3);
            linkList.Add(link3);
            //获取企业下的所有默认节点
            //var node3_allChild = GetCompanyChildNodes(id3, 2,0);
            //nodeList.AddRange(node3_allChild.nodes);
            //linkList.AddRange(node3_allChild.links);

            string id4 = Guid.NewGuid().ToString();
            string name4 = GetRandomName();
            Graph_Node node4 = GetNode(id4, node1.id, name4, enterpriceIndex, "Enterprise", "circle", 30, false,
                new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#b3d0ff", opacity = 1 } }, null, null);
            Graph_Link link4 = GetLink(id1, id4, 200, new[] { 1, 1 },
                new Graph_linkStyle() { normal = new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity = 1 } });
            nodeList.Add(node4);
            linkList.Add(link4);
            //获取企业下的所有默认节点
            //var node4_allChild = GetCompanyChildNodes(id4, 2,0);
            //nodeList.AddRange(node4_allChild.nodes);
            //linkList.AddRange(node4_allChild.links);


            string id5 = Guid.NewGuid().ToString();
            string name5 = GetRandomName();
            Graph_Node node5 = GetNode(id5, node1.id, name5, enterpriceIndex, "Enterprise", "circle", 30, false,
                new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#b3d0ff", opacity = 1 } }, null, null);
            Graph_Link link5 = GetLink(id1, id5, 200, new[] { 1, 1 },
                new Graph_linkStyle() { normal = new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity = 1 } });
            nodeList.Add(node5);
            linkList.Add(link5);
            //获取企业下的所有默认节点
            //var node5_allChild = GetCompanyChildNodes(id5, 2,0);
            //nodeList.AddRange(node5_allChild.nodes);
            //linkList.AddRange(node5_allChild.links);


            string id6 = Guid.NewGuid().ToString();
            string name6 = GetRandomName();
            Graph_Node node6 = GetNode(id6, node1.id, name6, enterpriceIndex, "Enterprise", "circle", 30, false,
                new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#b3d0ff", opacity = 1 } }, null, null);
            Graph_Link link6 = GetLink(id1, id6, 200, new[] { 1, 1 },
                new Graph_linkStyle() { normal = new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity = 1 } });
            nodeList.Add(node6);
            linkList.Add(link6);
            //获取企业下的所有默认节点
            //var node6_allChild = GetCompanyChildNodes(id6, 2,0);
            //nodeList.AddRange(node6_allChild.nodes);
            //linkList.AddRange(node6_allChild.links);

            string id7 = Guid.NewGuid().ToString();
            string name7 = GetRandomName();
            Graph_Node node7 = GetNode(id7, node1.id, name7, enterpriceIndex, "Enterprise", "circle", 30, false,
                new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#b3d0ff", opacity = 1 } }, null, null);
            Graph_Link link7 = GetLink(id1, id7, 200, new[] { 1, 1 },
                new Graph_linkStyle() { normal = new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity = 1 } });
            nodeList.Add(node7);
            linkList.Add(link7);
            //获取企业下的所有默认节点
            //var node7_allChild = GetCompanyChildNodes(id7, 2,0);
            //nodeList.AddRange(node7_allChild.nodes);
            //linkList.AddRange(node7_allChild.links);

            string id8 = Guid.NewGuid().ToString();
            string name8 = GetRandomName();
            Graph_Node node8 = GetNode(id8, node1.id, name8, enterpriceIndex, "Enterprise", "circle", 30, false,
                new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#b3d0ff", opacity = 1 } }, null, null);
            Graph_Link link8 = GetLink(id1, id8, 200, new[] { 1, 1 },
                new Graph_linkStyle() { normal = new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity = 1 } });
            nodeList.Add(node8);
            linkList.Add(link8);
            //获取企业下的所有默认节点
            //var node8_allChild = GetCompanyChildNodes(id8, 2,0);
            //nodeList.AddRange(node8_allChild.nodes);
            //linkList.AddRange(node8_allChild.links);


            #endregion

            return Json(new { status = true, nodes = nodeList,links= linkList, messgage = "成功" }, JsonRequestBehavior.AllowGet);
        }
        #endregion

        #region 获取企业下的所有默认节点
        /// 

        /// 
        /// 
        /// 企业id
        /// 企业维度所对应的种类的索引
        /// 是否显示开企业维度的两个节点,0为不显示，1为显示
        /// 
        public Graph_Node_Link GetCompanyChildNodes(string id,int index,int isExpand)
        {
            Graph_Node_Link data = new Graph_Node_Link();
            List nodeList = new List();
            List linkList = new List();
            #region 获取两个维度节点
            string id1 = Guid.NewGuid().ToString();
            Graph_Node node1 = GetNode(id1, id, "Company Partrait", index, "Enterprise Dimension", "circle", 30, false,
                    new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#8d448b", opacity = isExpand } }, null, null);  //8d448b  ffddab
            Graph_Link link1 = GetLink(id, id1, 150, new[] { 0, 10 },
                new Graph_linkStyle() { normal = new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity = isExpand } });
            nodeList.Add(node1);
            linkList.Add(link1);

            string id2 = Guid.NewGuid().ToString();
            Graph_Node node2 = GetNode(id2, id, "Company Matching", index, "Enterprise Dimension", "circle", 30, false,
                    new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#8d448b", opacity = isExpand } }, null, null);
            Graph_Link link2 = GetLink(id, id2, 150, new[] { 0, 10 },
                new Graph_linkStyle() { normal = new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity = isExpand } });
            nodeList.Add(node2);
            linkList.Add(link2);
            #endregion

            index = index +1;

            #region 获取企业画像的节点
            string id31 = Guid.NewGuid().ToString();
            Graph_Node node31 = GetNode(id31, id1, "Contact", index, "Company Portrait", "circle", 30, false,
                    new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#ffa588", opacity = 0 } }, null, null);
            Graph_Link link31 = GetLink(id1, id31, 100, new[] { 1, 1 },
                new Graph_linkStyle() { normal = new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity = 0 } });
            nodeList.Add(node31);
            linkList.Add(link31);

            string id32 = Guid.NewGuid().ToString();
            Graph_Node node32 = GetNode(id32, id1, "Financial info", index, "Company Portrait", "circle", 30, false,
                    new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#ffa588", opacity = 0 } }, null, null);
            Graph_Link link32 = GetLink(id1, id32, 100, new[] { 1, 1 },
                new Graph_linkStyle() { normal = new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity = 0 } });
            nodeList.Add(node32);
            linkList.Add(link32);

            string id33 = Guid.NewGuid().ToString();
            Graph_Node node33 = GetNode(id33, id1, "News", index, "Company Portrait", "circle", 30, false,
                    new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#ffa588", opacity = 0 } }, null, null);
            Graph_Link link33 = GetLink(id1, id33, 100, new[] { 1, 1 },
                new Graph_linkStyle() { normal = new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity = 0 } });
            nodeList.Add(node33);
            linkList.Add(link33);

            string id34 = Guid.NewGuid().ToString();
            Graph_Node node34 = GetNode(id34, id1, "Legal status", index, "Company Portrait", "circle", 30, false,
                    new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#ffa588", opacity = 0 } }, null, null);
            Graph_Link link34 = GetLink(id1, id34, 100, new[] { 1, 1 },
                new Graph_linkStyle() { normal = new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity = 0 } });
            nodeList.Add(node34);
            linkList.Add(link34);

            string id35 = Guid.NewGuid().ToString();
            Graph_Node node35 = GetNode(id35, id1, "Production info", index, "Company Portrait", "circle", 30, false,
                    new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#ffa588", opacity = 0 } }, null, null);
            Graph_Link link35 = GetLink(id1, id35, 100, new[] { 1, 1 },
                new Graph_linkStyle() { normal = new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity = 0 } });
            nodeList.Add(node35);
            linkList.Add(link35);

            string id36 = Guid.NewGuid().ToString();
            Graph_Node node36 = GetNode(id36, id1, "Products", index, "Company Portrait", "circle", 30, false,
                    new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#ffa588", opacity = 0 } }, null, null);
            Graph_Link link36 = GetLink(id1, id36, 100, new[] { 1, 1 },
                new Graph_linkStyle() { normal = new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity = 0 } });
            nodeList.Add(node36);
            linkList.Add(link36);

            string id37 = Guid.NewGuid().ToString();
            Graph_Node node37 = GetNode(id37, id1, "Import&Export", index, "Company Portrait", "circle", 30, false,
                    new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#ffa588", opacity = 0 } }, null, null);
            Graph_Link link37 = GetLink(id1, id37, 100, new[] { 1, 1 },
                new Graph_linkStyle() { normal = new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity = 0 } });
            nodeList.Add(node37);
            linkList.Add(link37);

            string id38 = Guid.NewGuid().ToString();
            Graph_Node node38 = GetNode(id38, id1, "Company dynamics", index, "Company Portrait", "circle", 30, false,
                    new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#ffa588", opacity = 0 } }, null, null);
            Graph_Link link38 = GetLink(id1, id38, 100, new[] { 1, 1 },
                new Graph_linkStyle() { normal = new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity = 0 } });
            nodeList.Add(node38);
            linkList.Add(link38);
            #endregion

            index = index + 1;

            #region 获取企业关联的节点
            string id41 = Guid.NewGuid().ToString();
            Graph_Node node41 = GetNode(id41, id2, "Clients", index, "Company Matching", "circle", 30, false,
                    new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#ffa588", opacity = 0 } }, null, null);
            Graph_Link link41 = GetLink(id2, id41, 100, new[] { 0, 10 },
                new Graph_linkStyle() { normal = new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity = 0 } });
            nodeList.Add(node41);
            linkList.Add(link41);

            string id42 = Guid.NewGuid().ToString();
            Graph_Node node42 = GetNode(id42, id2, "Suppliers", index, "Company Matching", "circle", 30, false,
                    new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#ffa588", opacity = 0 } }, null, null);
            Graph_Link link42 = GetLink(id2, id42, 100, new[] { 0, 10 },
                new Graph_linkStyle() { normal = new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity = 0 } });
            nodeList.Add(node42);
            linkList.Add(link42);

            string id43 = Guid.NewGuid().ToString();
            Graph_Node node43 = GetNode(id43, id2, "Company tree", index, "Company Matching", "circle", 30, false,
                    new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#ffa588", opacity = 0 } }, null, null);
            Graph_Link link43 = GetLink(id2, id43, 100, new[] { 0, 10 },
                new Graph_linkStyle() { normal = new Graph_linkStyle_Child() { color = "#d2d2d2", width = 1, opacity = 0 } });
            nodeList.Add(node43);
            linkList.Add(link43);
            #endregion

            data.nodes = nodeList;
            data.links = linkList;
            return data;
        }
        #endregion

        #region 通过企业id来获取节点及其关系
        public ActionResult GetNodesByCompany(string id,string pId)
        {
            List nodeList = new List();
            List linkList = new List();
            int companyIndex = 0;
            int dimensionIndex = 1;

            if(!string.IsNullOrEmpty(pId))
            {
                companyIndex += 1;
                dimensionIndex += 1;
            }

            //这个方法暂时使用，后面改为直接使用企业id来构造企业节点
            if (string.IsNullOrEmpty(id))
            {
                id = Guid.NewGuid().ToString();
                string name = GetRandomName();
                Graph_Node node = GetNode(id, pId, name, companyIndex, "Enterprise", "circle", 30, true,
                    new Graph_itemStyle() { normal = new Graph_itemStyle_Child() { color = "#b3d0ff", opacity = 1 } }, null, null);
                nodeList.Add(node);
            }

            //获取企业下的所有默认节点
            var node2_allChild = GetCompanyChildNodes(id, dimensionIndex,1);
            nodeList.AddRange(node2_allChild.nodes);
            linkList.AddRange(node2_allChild.links);

            return Json(new {status=true, nodes = nodeList,links=linkList,messgage = "成功" }, JsonRequestBehavior.AllowGet);
        }
        #endregion

        #region 设置一个关系
        /// 

        /// 设置一个关系
        /// 
        /// 线头部的节点id
        /// 线尾部的节点id
        /// 
        public Graph_Link GetLink(string source, string target,int value, int[] symbolSize, Graph_linkStyle lineStyle)
        {
            Graph_Link link = new Graph_Link();
            link.source = source;
            link.target = target;
            link.value = value;
            link.symbolSize = symbolSize;
            link.lineStyle = lineStyle == null? new Graph_linkStyle() : lineStyle;
            return link;
        }
        #endregion

        #region 获取一个节点
        public Graph_Node GetNode(string id,string pId,string name,int category,string type,string symbol, int symbolSize,bool flag, Graph_itemStyle itemStyle, Graph_Label label, Graph_Tooltip tooltip)
        {
            Graph_Node node = new Graph_Node();
            node.id = id;
            node.pId = pId;
            node.name = name;
            //node.label = name;
            node.category = category;
            node.type = type;
            node.symbol = symbol;
            node.symbolSize = symbolSize;
            node.flag = flag;
            node.itemStyle = itemStyle == null ? new Graph_itemStyle() : itemStyle;
            node.label = label == null ? new Graph_Label() : label;
            node.tooltip = tooltip== null ? new Graph_Tooltip() : tooltip;
            return node;
        }
        #endregion

        #region 随机获取名称
        /// 

        /// 随机获取名称
        /// 
        /// 
        public string GetRandomName()
        {
            int[] numbers = new int[] { 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 };
            int index1 = new Random().Next(0, numbers.Length); //生成随机下标
            int length = numbers[index1];
            char[] arr = new char[] {'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z' };
            StringBuilder name = new StringBuilder();
            for(int i=0;i)
            {
                Thread.Sleep(3);
                int index = new Random().Next(0, arr.Length); //生成随机下标 
                char str = arr[index];
                name.Append(str);
            }            
            return name.ToString(); 
        }
        #endregion
    }

    public class Graph_Node_Link
    {
        public List nodes { get; set; }
        public List links { get; set; }
    }



    #region 节点
    /// 

    /// 节点
    /// 
    public class Graph_Node
    {
        public int ? x { get; set; } = null;
        public int? y { get; set; } = null;
        /// 

        /// 主键id
        /// 
        public string id { get; set; }
        /// 

        /// 父节点id
        /// 
        public string pId { get; set; }
        /// 

        /// 名称
        /// 
        public string name { get; set; }
        ///// 

        ///// 标签名称
        ///// 
        //public string label { get; set; }
        /// 

        /// 类别索引，从0开始
        /// 
        public int category { get; set; }
        /// 

        /// 节点类型
        /// 
        public string  type { get; set; }
        /// 

        /// 节点的图形
        /// 
        public string symbol { get; set; } = "circle";
        /// 

        /// 节点的大小
        /// 
        public int symbolSize { get; set; } = 30;
        /// 

        /// 标记是否为展开状态，true为展开，false为收缩
        /// 
        public bool flag { get; set; }
        /// 

        /// 该节点的样式
        /// 
        public Graph_itemStyle itemStyle { get; set; }
        /// 

        /// 该节点标签的样式
        /// 
        public Graph_Label label { get; set; }
        /// 

        /// 该节点的提示框样式
        /// 
        public Graph_Tooltip tooltip { get; set; }
    }



    #endregion

    #region 节点间的线
    public class Graph_Link
    {
        //线头部的节点id
        public string source { get; set; }
        // 线尾部的节点id
        public string target { get; set; }
        //边的数值，可以在力引导布局中用于映射到边的长度
        public int value { get; set; } = 300;
        //边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定
        public string symbol { get; set; }
        //边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定
        public int [] symbolSize { get; set; } = new int[] {1,1};
        //线的样式
        public Graph_linkStyle lineStyle { get; set; }
    }



    #endregion


    public class Graph_Category
    {
        /// 

        /// 类型名称
        /// 
        public string name { get; set; }
        /// 

        /// 大小
        /// 
        public int symbolSize { get; set; }
    }


    #region 节点的样式
    /// 

    /// 节点的样式
    /// 
    public class Graph_itemStyle
    {
        public Graph_itemStyle_Child normal { get; set; }
        public Graph_itemStyle_Child emphasis { get; set; }
    }

    public class Graph_itemStyle_Child
    {
        //图形的颜色
        public string color { get; set; }
        //图形的描边颜色
        public string borderColor { get; set; }
        //描边线宽
        public int borderWidth { get; set; } = 0;
        //描边类型
        public string borderType { get; set; }
        //图形阴影的模糊大小
        public int shadowBlur { get; set; } = 10;
        //阴影颜色
        public string shadowColor { get; set; }
        //阴影水平方向上的偏移距离
        public int shadowOffsetX { get; set; } = 0;
        //阴影垂直方向上的偏移距离
        public int shadowOffsetY { get; set; } = 0;
        //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
        public int opacity { get; set; } 
    }
    #endregion

    #region 线的样式
    public class Graph_linkStyle
    {
        public Graph_linkStyle_Child normal { get; set; }
        public Graph_linkStyle_Child emphasis { get; set; }

    }

    public class Graph_linkStyle_Child
    {
        /// 

        /// 线条颜色
        /// 
        public string color { get; set; }
        /// 

        /// 线宽
        /// 
        public int width { get; set; }
        /// 

        /// 线条类型
        /// 
        public string type { get; set; }
        /// 

        /// 图形阴影的模糊大小
        /// 
        public int shadowBlur { get; set; }
        /// 

        /// 阴影颜色
        /// 
        public string shadowColor { get; set; }
        /// 

        /// 阴影水平方向上的偏移距离。
        /// 
        public int shadowOffsetX { get; set; }
        /// 

        /// 阴影垂直方向上的偏移距离。
        /// 
        public int shadowOffsetY { get; set; }
        /// 

        /// 图形透明度
        /// 
        public int opacity { get; set; }
        /// 

        /// 边的曲度，支持从 0 到 1 的值，值越大曲度越大
        /// 
        public int curveness { get; set; }
    }
    #endregion

    #region 节点的标签的样式
    public class Graph_Label
    {
        public Graph_Label_Child normal { get; set; }
        public Graph_Label_Child emphasis { get; set; }
    }

    public class Graph_Label_Child
    {
        /// 

        /// 是否显示标签
        /// 
        public bool show { get; set; }
        /// 

        /// 标签的位置
        /// 
        public string position { get; set; }
        /// 

        /// 文字的颜色
        /// 
        public string color { get; set; }
        /// 

        /// 文字的字体大小
        /// 
        public int fontSize { get; set; } = 12;
        /// 

        /// 文字块背景色,可以使用自定义图片
        /// 
        public string backgroundColor { get; set; }
        /// 

        /// 文字块的宽度
        /// 
        public int width { get; set; }
        /// 

        /// 文字块的高度
        /// 
        public int height { get; set; }
    }
    #endregion

    #region 节点的提示框样式
    public class Graph_Tooltip
    {
        /// 

        /// 提示框浮层的位置，默认不设置时位置会跟随鼠标的位置
        /// 
        public string position { get; set; }
        /// 

        /// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。这里使用字符串模板
        /// 
        public string formatter { get; set; }
        /// 

        /// 提示框浮层的背景颜色
        /// 
        public string backgroundColor{ get; set; }
        /// 

        /// 提示框浮层的边框颜色
        /// 
        public string borderColor { get; set; }
        /// 

        /// 提示框浮层的边框宽
        /// 
        public int borderWidth { get; set; }
        /// 

        /// 提示框浮层内边距，单位px
        /// 
        public int padding { get; set; }
        public Graph_TextStyle textStyle { get; set; }

    }

    public class Graph_TextStyle
    {
        /// 

        /// 文字的颜色
        /// 
        public string color { get; set; }
        /// 

        /// 文字的字体大小
        /// 
        public int fontSize { get; set; }
        /// 

        /// 行高
        /// 
        public int lineHeight { get; set; }
        /// 

        /// 文字块的宽度
        /// 
        public int width { get; set; }
        /// 

        /// 文字块的高度
        /// 
        public int height { get; set; }
        /// 

        /// 文字本身的描边颜色
        /// 
        public string textBorderColor { get; set; }
        /// 

        /// 文字本身的描边宽度
        /// 
        public int textBorderWidth { get; set; }
        /// 

        /// 文字本身的阴影颜色
        /// 
        public string textShadowColor { get; set; }
        /// 

        /// 文字本身的阴影长度
        /// 
        public int textShadowBlur { get; set; }
        /// 

        /// 文字本身的阴影 X 偏移
        /// 
        public int textShadowOffsetX { get; set; }
        /// 

        /// 文字本身的阴影 Y 偏移
        /// 
        public int textShadowOffsetY { get; set; }
    }

    #endregion
}

View Code

//js代码

$(function () {
    var graphObj = {
        //图表对象
        chartObj: null,
        type: "",  //初始化时的类型：分别有"企业"和"产品"
        id: "",     //初始化时元素的id,企业id或产品id
        color1: ['#ed506c', '#b3d0ff', '#ffddab', '#ffa588', '#ffa588'],  //初始化为产品时的颜色集合
        color2: ['#b3d0ff', '#8d448b', '#ffa588', '#ffa588'],             //初始化为企业时的颜色集合
        //初始化
        init: function (id, type) {
            graphObj.type = type;
            graphObj.id = id;

            var data = null;
            var categories = null;
            var color = null;
            if (type == "Product")
            {
                var data1 = graphObj.getNodesByProduct(id);
                var categories1 = graphObj.getCategory(type);
                data = data1;
                categories = categories1;
                color = graphObj.color1;
            }
            else
            {
                var data2 = graphObj.getNodesByCompany(id, "");
                var categories2 = graphObj.getCategory();
                data = data2;
                categories = categories2;
                color = graphObj.color2;
            }
            // 基于准备好的dom，初始化echarts实例
            graphObj.chartObj = echarts.init(document.getElementById('graph'));
            var option = graphObj.getOption(color,categories, data);
            graphObj.setChartOption(option);
            //绑定事件
            graphObj.chartObj.on('click', graphObj.clickNode);
            graphObj.chartObj.on('mouseover', graphObj.mouseoverNode);
            graphObj.chartObj.on('mouseout', graphObj.mouseoutNode);
        },
        //获取构造图表的配置
        getOption:function(color,categories,data){
            var nodesData = data.nodes;
            var linksData = data.links;

            var option = {
                backgroundColor: '#373536',//背景色
                color: color,
                //图例
                legend: [{
                    show: true,
                    left: 20,
                    top: 20,
                    orient: 'vertical',
                    data: categories.map(function (a) {
                        return a.name;
                    }),
                    textStyle: {
                        color:'#fff'
                    }
                }],
                //工具
                toolbox:{
                    show: true,
                    orient: 'hovizontal',
                    itemSize: 25,
                    right: 20,
                    top:20,
                    feature: {
                        myTool: {
                            show: true,
                            title: 'Restore',
                            icon: 'image://http://img.tranalysis.com/Tranalysis/20170728052126788.png',
                            onclick:graphObj.restore
                        }
                    },
                    iconStyle: {
                        normal: {
                            //color:'#fff',
                            borderColor:'#fff',
                        }
                    }

                },
                series: [
                    {
                        type: 'graph',
                        layout: 'force',
                        force: {
                            repulsion: 120,          //节点之间的斥力因子。120
                            gravity: 0.01,            //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢  0.01
                            edgeLength: 100,          //边的两个节点之间的距离，这个距离也会受 repulsion。 100
                        },
                        roam: true,
                        draggable: true,
                        symbol: 'circle',
                        symbolSize: 30,              //关系图节点标记的大小
                        edgeSymbol: ['circle', 'arrow'], //边两端的标记类型  arrow  circle
                        edgeSymbolSize: [1, 1],          //边两端的标记大小
                        animation: true,
                        lineStyle: {
                            normal: {
                                color: '#ABABAB',     //线的颜色
                                width: 1,            //线宽
                                type: 'solid',      //线的类型
                                //shadowBlur:15,     //图形阴影的模糊大小
                                //shadowColor:'#ffb400',  //阴影颜色
                                //shadowOffsetX:4,         //阴影水平方向上的偏移距离
                                //shadowOffsetY:5,         //阴影垂直方向上的偏移距离。
                                //opacity:1,              //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                            }
                        },
                        //图形上的文本标签，可用于说明图形的一些数据信息
                        label: {
                            normal: {
                                show: true,         //是否显示标签
                                position: 'right',   //标签的位置
                                //distance:5,         //距离图形元素的距离
                                color: '#fff',       //文字的颜色
                                fontSize: 12,        //文字的字体大小
                                //backgroundColor:'#d2d2d2',  //文字块背景色,可以使用自定义图片
                                //width:100,          //文字块的宽度
                                //height:50,          //文字块的高度
                            },
                            emphasis: {
                                show: false         //是否显示标签
                            }
                        },
                        categories: categories,
                        data: nodesData,
                        links: linksData                     
                    }
                ]
            };
            return option;
        },
        //重置
        restore: function () {
            var id = graphObj.id;
            var type = graphObj.type;
            graphObj.init(id,type);
        },
        //获取种类
        getCategory:function(type){
            var data;
            $.ajax({
                async: false,
                url: "/Home/GetCategory?type="+type,
                type: 'GET',
                dataType: "json",
                success: function (res) {
                    if (res.status == true) {
                        data = res.categorys;
                    }
                    else
                        $.chans.dialog.success(res.message, true, "系统提示");
                },
                error: function (ex) {
                    $.chans.dialog.success("获取数据失败", true, "系统提示");
                }
            });
            return data;
        },
        //通过产品获取节点
        getNodesByProduct:function(){
            var data;
            $.ajax({
                async: false,
                url: "/Home/GetNodesByProduct?name=" + name,
                type: 'GET',
                dataType: "json",
                success: function (res) {
                    if (res.status == true) {
                        data = res;
                    }
                    else
                        $.chans.dialog.success(res.message, true, "系统提示");
                },
                error: function (ex) {
                    $.chans.dialog.success("获取数据失败", true, "系统提示");
                }
            });
            return data;
        },
        //通过企业获取节点
        getNodesByCompany:function(id,pId)
        {
            var data;
            $.ajax({
                async: false,
                url: "/Home/GetNodesByCompany?id="+id+"&pId="+pId,
                type: 'GET',
                dataType: "json",
                success: function (res) {
                    if (res.status == true) {
                        data = res;
                    }
                    else
                        $.chans.dialog.success(res.message, true, "系统提示");
                },
                error: function (ex) {
                    $.chans.dialog.success("获取数据失败", true, "系统提示");
                }
            });
            return data;
        },
        //点击节点
        clickNode: function (param) {
            var currentNode = param.data;
            param.event.cancelBubble = true;
            if (currentNode.flag == false)
            {
                //显示下一级子节点
                graphObj.showNode(currentNode);                
            }
            else
            {
                //收起节点下的所有节点以及线
                graphObj.hideNode(currentNode);
            }

            //事件
            if (currentNode.type == "Enterprise" && currentNode.flag == false)
            {
                graphObj.clickCompanyNode(currentNode);
            }
            if (currentNode.type == "Company Portrait")
            {
                graphObj.clickCompanyPartrait(currentNode);
            }
            if (currentNode.type == "Company Matching") {
                graphObj.clickCompanyMatching(currentNode);
            }
        },
        //鼠标移到节点上
        mouseoverNode: function (param) {
            param.event.cancelBubble = true;
            var currentNode = param.data;
            var option = graphObj.getChartOption();
            var nodesOption = option.series[0].data;//获得所有节点的数组
            var linksOption = option.series[0].links;//获得所有连接的数组
            var categoryLength = option.series[0].categories.length;//获得类别数组的大小  
            
            for(var i=0;i)
            {
                if(currentNode.id == nodesOption[i].id)
                {
                    nodesOption[i].symbolSize += 15;
                    break;
                }
            }
            graphObj.setChartOption(option);
        },
        //鼠标移开节点
        mouseoutNode: function (param) {
            param.event.cancelBubble = true;
            var currentNode = param.data;
            var option = graphObj.getChartOption();
            var nodesOption = option.series[0].data;//获得所有节点的数组
            var linksOption = option.series[0].links;//获得所有连接的数组
            var categoryLength = option.series[0].categories.length;//获得类别数组的大小  

            for (var i = 0; i < nodesOption.length; i++) {
                if (currentNode.id == nodesOption[i].id) {
                    nodesOption[i].symbolSize -= 15;
                    break;
                }
            }
            graphObj.setChartOption(option);
        },
        //获取图表对象的配置
        getChartOption: function () {
            return graphObj.chartObj.getOption();
        },
        //通过配置宣扬图表
        setChartOption: function (option) {
            graphObj.chartObj.setOption(option);
        },
        //隐藏节点下所有节点及关系线
        hideNode:function(currentNode){
            var option = graphObj.getChartOption();
            //构建要隐藏线的数组
            var dataArray = [];
            var linksArray = [];
            //初始化,先根据当前节点去查找下一级节点
            currentNode.flag = false;  //收起
            dataArray.push(currentNode);
            //隐藏所有相关节点，以及找出对应的关系线
            for (var i = 0; i < dataArray.length; i++) {
                var id = dataArray[i].id;
                //遍历所有节点，找出当前节点的子节点
                for (var j = 0; j < option.series[0].data.length; j++) {
                    if (id == option.series[0].data[j].id)
                    {
                        option.series[0].data[j].flag = false;      //改变为收起状态
                    }

                    if (id == option.series[0].data[j].pId) {
                        option.series[0].data[j].itemStyle.normal.opacity = 0;  //隐藏
                        option.series[0].data[j].flag = false;      //改变为收起状态
                        dataArray.push(option.series[0].data[j]);
                        linksArray.push({ source: id, target: option.series[0].data[j].id });
                    }
                }
            }

            //隐藏所有相关的线
            for (var i = 0; i < linksArray.length; i++)
            {
                for(var j=0;j)
                {
                    if(linksArray[i].source == option.series[0].links[j].source && linksArray[i].target == option.series[0].links[j].target)
                    {
                        option.series[0].links[j].lineStyle.normal.opacity = 0;
                    }
                }
            }

            //重新刷新
            graphObj.setChartOption(option);

        },
        //显示节点下一级的所有节点及关系线
        showNode: function (currentNode) {
            if (currentNode.type == "Company Portrait")
            {
                //企业画像节点下没有子节点
                return;
            }
            var option = graphObj.getChartOption();
            //构建要隐藏线的数组
            var linksArray = [];

            var id = currentNode.id;
            //遍历所有节点，显示其下一级别的所有子节点
            for (var j = 0; j < option.series[0].data.length; j++) {
                if (id == option.series[0].data[j].id)
                {
                    option.series[0].data[j].flag = true;       //改变当前点击节点的状态为展开状态  
                }

                if (id == option.series[0].data[j].pId) {
                    option.series[0].data[j].itemStyle.normal.opacity = 1;  //显示
                    option.series[0].data[j].flag = false;                  //改变为收起状态
                    linksArray.push({ source: id, target: option.series[0].data[j].id });
                }
            }

            //显示所有相关的线
            for (var i = 0; i < linksArray.length; i++) {
                for (var j = 0; j < option.series[0].links.length; j++) {
                    if (linksArray[i].source == option.series[0].links[j].source && linksArray[i].target == option.series[0].links[j].target) {
                        option.series[0].links[j].lineStyle.normal.opacity = 1;
                    }
                }
            }
            //重新刷新
            graphObj.setChartOption(option);

        },
        //点击企业节点事件
        clickCompanyNode: function (currentNode) {
            var option = graphObj.getChartOption();
            //判断企业该企业节点是否已加载了数据，若没有则请求添加数据
            var isExist = false;
            for (var i = 0; i < option.series[0].data.length; i++)
            {
                if(currentNode.id == option.series[0].data[i].pId && option.series[0].data[i].type == "Enterprise Dimension")
                {
                    isExist = true;
                    break;
                }
            }
            if (isExist ==false)
            {
                //获取数据
                var jsonData = graphObj.getNodesByCompany(currentNode.id);
                var nodes = jsonData.nodes;
                var links = jsonData.links;

                //插件新的节点
                for (var i = 0; i < nodes.length; i++) {
                    var node1 = graphObj.isExistNode(nodes[i].id);
                    if (node1 == -1)
                    {
                        option.series[0].data.push(nodes[i]);
                    }
                }

                //插件新的关系
                for (var i = 0; i < links.length; i++) {
                    var link = graphObj.isExistLink(links[i].source, links[i].target);
                    if (link == -1)
                    {
                        option.series[0].links.push(links[i]);
                    }
                }
                //重新刷新
                graphObj.setChartOption(option);
            }            
        },
        //点击企业Company Partrait下具体的详情节点事件
        clickCompanyPartrait: function (currentNode)
        {
            alert(currentNode.name);
        },
        //点击企业Company Matching下具体的详情节点事件
        clickCompanyMatching: function (currentNode) {
            if (currentNode.name == "Clients")
            {
                graphObj.getClientList(currentNode);
            }
            else
            {
                $("#list").html("");
            }
        },
        //判断节点是否已存在
        isExistNode:function(id){
            var option = graphObj.getChartOption();
            for (var i = 0; i < option.series[0].data.length; i++) {
                if (id == option.series[0].data[i].id) {
                    //存在，则返回该节点信息
                    return option.series[0].data[i];
                }
            }
            //不存在,则返回-1
            return -1;
        },
        //判断关系线是否已存在
        isExistLink:function(source,target)
        {
            var option = graphObj.getChartOption();
            for (var i = 0; i < option.series[0].links.length; i++) {
                if (source == option.series[0].links[i].source && target == option.series[0].links[i].target) {
                    //存在，则返回该线的信息
                    return option.series[0].links[i];
                }
            }
            //不存在,则返回-1
            return -1;
        },
        //获取企业列表
        getClientList: function (currentNode) {
            var html = "
西美信息
";
            $("#list").html(html);
            $(".client").on('click', 'li', function (e) {                
                var id = $(e.currentTarget).attr("data-id");    //当前企业的id
                var pId = $(e.currentTarget).attr("data-Pid");  //该企业节点关联的上级节点id
                //判断节点是否已存在
                var node = graphObj.isExistNode(id);
                if (node == -1)
                {
                    //不存在,则往图上添加节点信息
                    graphObj.addCompanyById(id, pId);
                }
                else
                {

                }

                
            });

        },
        //通过企业列表中的企业
        addCompanyById: function (id, pId) {
            var dataArray = [];
            var option = graphObj.getChartOption();
            var node;
            for (var i = 0; i < option.series[0].data.length; i++) {
                if (pId == option.series[0].data[i].id) {
                    node = option.series[0].data[i];
                    option.series[0].data[i].flag = true;
                }
            }

            var jsonData = graphObj.getNodesByCompany("", pId);

            var nodes = jsonData.nodes;
            var links = jsonData.links;
            var sourceNode;
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].type == "Enterprise") {
                    sourceNode = nodes[i];
                }
            }

            //插件新的节点
            for (var i = 0; i < nodes.length; i++)
            {
                var node1 = graphObj.isExistNode(nodes[i].id);
                if (node1 == -1)
                {
                    option.series[0].data.push(nodes[i]);
                }
            }

            //插件新的关系
            for (var i = 0; i < links.length; i++)
            {
                var link = graphObj.isExistLink(links[i].source, links[i].target);
                if (link == -1)
                {
                    option.series[0].links.push(links[i]);
                }
            }
            option.series[0].links.push({ source: pId, target: sourceNode.id, value: 300, symbolSize: [1, 1], lineStyle: { normal: { color: "#d2d2d2", width: 1, opacity: 1 } } });



            //查旁边关系
            var node2 = null;
            for (var i = 0; i < option.series[0].data.length; i++) {
                if (node.pId == option.series[0].data[i].pId && option.series[0].data[i].type == "Company Matching" && option.series[0].data[i].name == "Suppliers") {
                    node2 = option.series[0].data[i];
                    option.series[0].data[i].flag = true;
                    break;
                }
            }
            option.series[0].links.push({ source: node2.id, target: sourceNode.id, value: 300, symbolSize: [1, 1], lineStyle: { normal: { color: "#d2d2d2", width: 1, opacity: 1 } } });
            //重新刷新
            graphObj.setChartOption(option);
        },
        //添加节点的关系
        addLinkByCompany:function(id,pId){

        }


    };



    //初始化事件执行
    graphObj.init("", "Product");
    //graphObj.init("", "Enterprise");


});

View Code

 

转载于:https://www.cnblogs.com/kehaocheng/p/7504013.html