.net mvc+echart 实现Sankey图

3个Datatable数据格式（datatable 2和3的数据其实都是从datatable1中分离出来的，我是直接从数据库把数据准备好，你也可以在后端转换，或者在前端处理datatable1，这样就不用三个datatable了）和效果图，图中序号跟数据列对应：

Datatable 2

Datatable 3

后端代码：

public string GetEchart(string StartYear, string EndYear)
        {

            Dictionary<string, object> dic = _service.GetUserInfoDic();
            //  dic.Add("StartYear", StartYear);
            // dic.Add("EndYear", EndYear);
            dic.Add("Action", "View");
            DataSet ds = _service.Query("PWD_IECapacityPlanningSankeychart", XmlParams.CreateSqlXml(dic));
            DataTable dt = ds.Tables[2];
            DataTable dt1 = ds.Tables[1];
            List<string> NameList = new List<string>();
            List<string> SourceList = new List<string>();
            List<string> TargetList = new List<string>();
            List<string> ValueList = new List<string>();
            if (dt.Rows.Count > 0)
            {
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    DataRow dataRow = dt.Rows[i];
                    NameList.Add(dataRow["name"].ToString());
                   

                }
                for(int j = 0; j < dt1.Rows.Count; j++)
                {
                    DataRow dataRow = dt1.Rows[j];
                    SourceList.Add(dataRow["source"].ToString());
                    TargetList.Add(dataRow["target"].ToString());
                    ValueList.Add(dataRow["value"].ToString());
                }
                var obj = new
                {
                    Name = NameList,
                    Source = SourceList,
                    Target = TargetList,
                    Value = ValueList,



                };
                

            string jsonstr = JsonConvert.SerializeObject(obj);
                return jsonstr;
            }
            else
            {
                string jsonstr = "";
                return jsonstr;
            }
        }

前端JS：

function GetEchart1()
   {
       var StartYear = $("#StartYear").val();
       var EndYear = $("#EndYear").val();
       var linksData = [];
       var mydata = [];
       
         $.ajax({
            url:'@Url.Action("GetEchart")',
            type: "post",
            dataType: "json",
            async: true,
             data: { StartYear: StartYear, EndYear: EndYear},

            success: function (data) {
                 debugger;
                //console.log(data);
                for (var i = 0; i < data.Name.length; i++) {
                   // names.push(data.Name[i]);
                    mydata[i] = { name: data.Name[i] };
                    
                }
                for (var j = 0; j < data.Source.length; j++) {
                    
                    linksData[j] = { source: data.Source[j], target: data.Target[j], value: data.Value[j] };

                }
                // const arr = ['B11 Total', 'DLP'];
                const arr = data.Name;
                /*
                const obj = {
                    Data: arr.map(name => ({ name }))
                };
                 */

                var chartDom = document.getElementById('chart');

                var myChart = echarts.init(chartDom);

                var option;
                option = {
                    title: {
                        text: 'B11 PWD Plan HC',
                        top:'5',
                    },
                    color: ['#38a97e', '#94b305', '#d87438', '#977c78', '#c4ccd3'],
                    tooltip: {
                        trigger: 'item',
                        triggerOn: 'mousemove'
                    },
                    
                    series: {
                        type: 'sankey',
                        layout: 'none',
                        emphasis: {
                            focus: 'adjacency'
                        },
                        focusNodeAdjacency: true,
                        itemStyle: {
                            borderWidth: 1,
                           
                            borderColor: '#fff'
                        },
                        lineStyle: {
                            curveness: 0.5,
                            
                        },
                      
                    
                        data: mydata,
                        links: linksData  ,
                    }
                };

        option && myChart.setOption(option);
            }
        });
    };

页面DIV 用于显示sankey图

 <div id="chart" style="width:96%;margin-left:2%;margin-right:2%;height:95%;margin-top:1%;">

        </div>