echarts 关系图-force布局（MVC）_某年某月_新浪博客

数据要求：

data:[{

name: '', //数据项名称

category: 1, //数据项所在类目的 index

x: 0,           //X偏移量

y: 0            //Y偏移量

}]

links: [{ 

        source: 'n1',  //源节点名称

  target: 'n2'  //目标节点名称

}]

产生数据表：

获得一个含 cSOCode(订单), code(工单), cInvName(产成品), oprid(工序ID), gx(工序名称), xu(行号) 的表或视图 v_jobtopo ；

定义一个表 u_jobpogx_name 对应 data 数据 ，u_jobpogx_gx 对应 links 数据；

写一个存储过程 向 u_jobpogx_name ,u_jobpogx_gx 插入数据:

CREATE PROC p_jobtopo_list

 @t_find VARCHAR(50),

 @t_uid VARCHAR(50)

 AS

 BEGIN

         --清空原 u_jobpogx_name

    DELETE u_jobpogx_name WHERE uid=@t_uid;

         --插入新数据 u_jobpogx_name

  INSERT INTO u_jobpogx_name(name,x,y,category,uid)

SELECT cSOCode AS name, 100 AS x , 100 + (xu-1) * 30 AS y,0 AS category,@t_uid

FROM

(SELECT *,row_number() OVER(ORDER BY cSOCode) AS xu FROM

(SELECT DISTINCT cSOCode   FROM v_jobtopo WHERE cSOCode =@t_find OR code=@t_find ) AS a) AS b

INSERT INTO u_jobpogx_name(name,x,y,category,uid)

SELECT name, 200 AS x , 100 + (xu-1) * 30 AS y,1 AS category,@t_uid

FROM

(SELECT *,row_number() OVER(ORDER BY name) AS xu FROM

(SELECT DISTINCT code AS name   FROM v_jobtopo WHERE cSOCode =@t_find OR code=@t_find ) AS a) AS b

INSERT INTO u_jobpogx_name(name,x,y,category,uid)

SELECT name, 300 AS x , 100 + (xu-1) * 30 AS y ,2 AS category, @t_uid

FROM

(SELECT *,row_number() OVER(ORDER BY name) AS xu FROM

(SELECT DISTINCT cInvName AS name   FROM v_jobtopo WHERE cSOCode =@t_find OR code=@t_find ) AS a) AS b

INSERT INTO u_jobpogx_name(name,x,y,category,uid)

SELECT name, 400 AS x , 100 + (xu-1) * 30 AS y ,3 AS category, @t_uid 

FROM

(SELECT *,row_number() OVER(ORDER BY name) AS xu FROM

(SELECT DISTINCT  gx AS name   FROM v_jobtopo WHERE cSOCode =@t_find OR code=@t_find ) AS a) AS b

     --清空原 u_jobpogx_gx

       DELETE u_jobpogx_gx WHERE uid=@t_uid

 --插入新数据 u_jobpogx_gx

     INSERT INTO u_jobpogx_gx(source,target,uid)

SELECT cSOCode, code, @t_uid   FROM v_jobtopo WHERE cSOCode =@t_find OR code=@t_find  GROUP BY cSOCode, code

             INSERT INTO u_jobpogx_gx(source,target,uid)

SELECT code, cInvName, @t_uid   FROM v_jobtopo WHERE cSOCode =@t_find OR code=@t_find  GROUP BY  code, cInvName

 INSERT INTO u_jobpogx_gx(source,target,uid)

SELECT cInvName, gx ,@t_uid  FROM v_jobtopo WHERE cSOCode =@t_find OR code=@t_find  GROUP BY cInvName, gx

 END

GO

MVC 类：

新建类 u_jobpogx_name ，u_jobpogx_gx ，v_jobtopo 对应SQL 的表；

控制器：

//JOSN工单订单列表

        public ActionResult jobpolist(string srfind = "无")

        {

            if (string.IsNullOrEmpty(srfind))

            {

                srfind = "无关键词";

            }

                re_jobtopolist(srfind, User.Identity.Name); //调用 存储过程产生数据

            ArrayList ar1 = new ArrayList();

            var xx = from m in db.u_jobpogx_name

                     where m.uid == User.Identity.Name

                     select m;

            ar1.Add(xx);

            var xx2 = from m in db.u_jobpogx_gx

                      where m.uid == User.Identity.Name

                      select m;

            ar1.Add(xx2);

            return Json(ar1, JsonRequestBehavior.AllowGet);

        }

视图：

定义一个容器 gx_1:

@using (Html.BeginForm())

{

    订单或工单编号：@Html.TextBox("srfind") 

}

    var dt;

    $.ajax({

        url: '@Url.Action("jobpolist", "bc", new { srfind = ViewBag.srfind })',

        type: 'POST',

        dataType: 'json',

        data: {},

        success: function (result) {

            dt = result;

            var myChart = echarts.init(document.getElementByIdx_x('gx_1'));

            option.series[0].data = dt[0];

            option.series[0].links = dt[1];

            option.series[0].categories = categories;

            myChart.setOption(option);

            myChart.on('dblclick', function (params) {

                var s = params;

                if (params.data.category == 3) {

                    var s = params.data.name;

                    var i = s.split("_")[2];

                    var j = "64|" + i;

                    window.open('/bc/bc_addforsc?smcode=' + j);

                } else if (params.data.category == 0) {

                    var s = params.data.name;

                    window.open('/bc/bcbb_jobtopo?srfind=' + s);

                } else if (params.data.category == 2 && ('@ViewBag.srfind').substring(0, 1) == "S") {

                    var s = params.data.name;

                    var i = s.split("-")[0];

                    window.open('/bc/bcbb_jobtopo?srfind=' + i);

                }

            });

        },

        error: function () {

            alert("异常");

        }

    });

    // 指定图表的配置项和数据

    var categories = [];

    categories[0] = {

        name: '订单'

    };

    categories[1] = {

        name: '工单'

    };

    categories[2] = {

        name: '产品'

    };

    categories[3] = {

        name: '工序'

    };

    option = {

        title: {

            text: '订单-工单-工序 关系图'

        },

        tooltip: {},

        legend: [{

            // selectedMode: 'single',

            x: 'right',

            data: categories.map(function (a) {

                return a.name;

            })

        }],

        //animationDuration: 10,

        animationEasingUpdate: 'quinticInOut',

        animation: false,

        series: [

        {

            type: 'graph',

            layout: 'force',

            draggable: false,

            symbolSize: 25,

            roam: true,

            label: {

                    normal: {

                        position: 'right',

                        show: true

                    }

                },

            force: {

                    repulsion: 400

                },

            lineStyle: {

                    normal: {

                        width: 2,

                        color: '#CD3700',

                        curveness: 0

                    }

                }

        }

    ]

    };

效果：