使用百度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 獲取所有的類目
        /// <summary>
        /// 獲取所有的類目
        /// </summary>
        /// <returns></returns>
        public ActionResult GetCategory(string type)
        {
            List<Graph_Category> list = new List<Graph_Category>();
            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 通過產品名稱獲取節點以及其關系
        /// <summary>
        /// 通過產品名稱獲取節點以及其關系
        /// </summary>
        /// <param name="name"></param>
        /// <returns></returns>
        public ActionResult GetNodesByProduct(string name)
        {
            List<Graph_Node> nodeList = new List<Graph_Node>();
            List<Graph_Link> linkList = new List<Graph_Link>();
            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 獲取企業下的所有默認節點
        /// <summary>
        /// 
        /// </summary>
        /// <param name="id">企業id</param>
        /// <param name="index">企業維度所對應的種類的索引</param>
        /// <param name="isExpand">是否顯示開企業維度的兩個節點,0為不顯示，1為顯示</param>
        /// <returns></returns>
        public Graph_Node_Link GetCompanyChildNodes(string id,int index,int isExpand)
        {
            Graph_Node_Link data = new Graph_Node_Link();
            List<Graph_Node> nodeList = new List<Graph_Node>();
            List<Graph_Link> linkList = new List<Graph_Link>();
            #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<Graph_Node> nodeList = new List<Graph_Node>();
            List<Graph_Link> linkList = new List<Graph_Link>();
            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 設置一個關系
        /// <summary>
        /// 設置一個關系
        /// </summary>
        /// <param name="source">線頭部的節點id</param>
        /// <param name="target">線尾部的節點id</param>
        /// <returns></returns>
        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 隨機獲取名稱
        /// <summary>
        /// 隨機獲取名稱
        /// </summary>
        /// <returns></returns>
        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<length;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<Graph_Node> nodes { get; set; }
        public List<Graph_Link> links { get; set; }
    }



    #region 節點
    /// <summary>
    /// 節點
    /// </summary>
    public class Graph_Node
    {
        public int ? x { get; set; } = null;
        public int? y { get; set; } = null;
        /// <summary>
        /// 主鍵id
        /// </summary>
        public string id { get; set; }
        /// <summary>
        /// 父節點id
        /// </summary>
        public string pId { get; set; }
        /// <summary>
        /// 名稱
        /// </summary>
        public string name { get; set; }
        ///// <summary>
        ///// 標簽名稱
        ///// </summary>
        //public string label { get; set; }
        /// <summary>
        /// 類別索引，從0開始
        /// </summary>
        public int category { get; set; }
        /// <summary>
        /// 節點類型
        /// </summary>
        public string  type { get; set; }
        /// <summary>
        /// 節點的圖形
        /// </summary>
        public string symbol { get; set; } = "circle";
        /// <summary>
        /// 節點的大小
        /// </summary>
        public int symbolSize { get; set; } = 30;
        /// <summary>
        /// 標記是否為展開狀態，true為展開，false為收縮
        /// </summary>
        public bool flag { get; set; }
        /// <summary>
        /// 該節點的樣式
        /// </summary>
        public Graph_itemStyle itemStyle { get; set; }
        /// <summary>
        /// 該節點標簽的樣式
        /// </summary>
        public Graph_Label label { get; set; }
        /// <summary>
        /// 該節點的提示框樣式
        /// </summary>
        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
    {
        /// <summary>
        /// 類型名稱
        /// </summary>
        public string name { get; set; }
        /// <summary>
        /// 大小
        /// </summary>
        public int symbolSize { get; set; }
    }


    #region 節點的樣式
    /// <summary>
    /// 節點的樣式
    /// </summary>
    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
    {
        /// <summary>
        /// 線條顏色
        /// </summary>
        public string color { get; set; }
        /// <summary>
        /// 線寬
        /// </summary>
        public int width { get; set; }
        /// <summary>
        /// 線條類型
        /// </summary>
        public string type { get; set; }
        /// <summary>
        /// 圖形陰影的模糊大小
        /// </summary>
        public int shadowBlur { get; set; }
        /// <summary>
        /// 陰影顏色
        /// </summary>
        public string shadowColor { get; set; }
        /// <summary>
        /// 陰影水平方向上的偏移距離。
        /// </summary>
        public int shadowOffsetX { get; set; }
        /// <summary>
        /// 陰影垂直方向上的偏移距離。
        /// </summary>
        public int shadowOffsetY { get; set; }
        /// <summary>
        /// 圖形透明度
        /// </summary>
        public int opacity { get; set; }
        /// <summary>
        /// 邊的曲度，支持從 0 到 1 的值，值越大曲度越大
        /// </summary>
        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
    {
        /// <summary>
        /// 是否顯示標簽
        /// </summary>
        public bool show { get; set; }
        /// <summary>
        /// 標簽的位置
        /// </summary>
        public string position { get; set; }
        /// <summary>
        /// 文字的顏色
        /// </summary>
        public string color { get; set; }
        /// <summary>
        /// 文字的字體大小
        /// </summary>
        public int fontSize { get; set; } = 12;
        /// <summary>
        /// 文字塊背景色,可以使用自定義圖片
        /// </summary>
        public string backgroundColor { get; set; }
        /// <summary>
        /// 文字塊的寬度
        /// </summary>
        public int width { get; set; }
        /// <summary>
        /// 文字塊的高度
        /// </summary>
        public int height { get; set; }
    }
    #endregion

    #region 節點的提示框樣式
    public class Graph_Tooltip
    {
        /// <summary>
        /// 提示框浮層的位置，默認不設置時位置會跟隨鼠標的位置
        /// </summary>
        public string position { get; set; }
        /// <summary>
        /// 提示框浮層內容格式器，支持字符串模板和回調函數兩種形式。這里使用字符串模板
        /// </summary>
        public string formatter { get; set; }
        /// <summary>
        /// 提示框浮層的背景顏色
        /// </summary>
        public string backgroundColor{ get; set; }
        /// <summary>
        /// 提示框浮層的邊框顏色
        /// </summary>
        public string borderColor { get; set; }
        /// <summary>
        /// 提示框浮層的邊框寬
        /// </summary>
        public int borderWidth { get; set; }
        /// <summary>
        /// 提示框浮層內邊距，單位px
        /// </summary>
        public int padding { get; set; }
        public Graph_TextStyle textStyle { get; set; }

    }

    public class Graph_TextStyle
    {
        /// <summary>
        /// 文字的顏色
        /// </summary>
        public string color { get; set; }
        /// <summary>
        /// 文字的字體大小
        /// </summary>
        public int fontSize { get; set; }
        /// <summary>
        /// 行高
        /// </summary>
        public int lineHeight { get; set; }
        /// <summary>
        /// 文字塊的寬度
        /// </summary>
        public int width { get; set; }
        /// <summary>
        /// 文字塊的高度
        /// </summary>
        public int height { get; set; }
        /// <summary>
        /// 文字本身的描邊顏色
        /// </summary>
        public string textBorderColor { get; set; }
        /// <summary>
        /// 文字本身的描邊寬度
        /// </summary>
        public int textBorderWidth { get; set; }
        /// <summary>
        /// 文字本身的陰影顏色
        /// </summary>
        public string textShadowColor { get; set; }
        /// <summary>
        /// 文字本身的陰影長度
        /// </summary>
        public int textShadowBlur { get; set; }
        /// <summary>
        /// 文字本身的陰影 X 偏移
        /// </summary>
        public int textShadowOffsetX { get; set; }
        /// <summary>
        /// 文字本身的陰影 Y 偏移
        /// </summary>
        public int textShadowOffsetY { get; set; }
    }

    #endregion
}

//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<nodesOption.length;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<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 = 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 = "<ul class='client'><li data-id='' data-pId="+ currentNode.id+">西美信息</li></ul>";
            $("#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");


});