桑基图效果如下:
准备工作:
1、新建 SanKey.aspx.cs ,如下所示,将对于部分删除。
删除多余部分,保留头部如下:
2、新建 SanKey.html 页面,如下所示;
在html页面中添加如下信息:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Scripts/bootExtJS.js" type="text/javascript"></script>
<script src="Scripts/Jquery/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/ECharts4.0.2/echarts.min.js" type="text/javascript"></script>
<script src="Scripts/SanKey.js"></script>
</head>
<body>
<div id="main1" style="float: left; width: 1300px; height: 800px; background-color: #efefef;">
<div id="pic1" style="float: left; width: 1000px; height: 600px; background-color: #efefef;"></div>
</div>
</body>
</html>
3、新建SanKey.js文件,如下:
/*
*
* 页面前台
*
* 页面:桑吉图
* 作者:凌霜残雪
*
*/
Ext.onReady(function () {
//开启提示功能
Ext.QuickTips.init();
//通过ajax发送添加请求
Ext.Ajax.request({
url: "SanKey.aspx?method=GetData",
method: 'POST',
success: function (response) {
var data = response.responseText;
if (data != "" && data != null) {
var pic1 = echarts.init(document.getElementById('pic1'));
var eValue = eval('(' + data + ')'); //要先转换
pic1.setOption(option = {
title: {
text: '工厂能耗桑基图(功率kW)',
left: 45,
textStyle:
{
fontSize: 20
}
},
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
layout: 'none',
data: eValue.nodes,
links: eValue.links,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#aaa'
}
},
lineStyle: {
normal: {
color: 'source',
curveness: 0.5
}
},
top: 20
}
]
});
}
}
});
////////////////////////////////////////////////////
//////////////////////页面总布局////////////////////
////////////////////////////////////////////////////
var viewport = Ext.create('Ext.container.Viewport', {
layout: 'border',
items:
[
{
region: 'center',
border: 0,
bodyStyle: 'padding: 10px; background-color: #efefef; overflow-y: auto; overflow-x: hidden;',
layout: 'fit',
contentEl: 'main1'
}
]
});
});
4、后端SanKey.aspx 代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ExtExample.Pages
{
public partial class SanKey : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
String methodName = Request["method"]; //方法名称
MethodInfo method = this.GetType().GetMethod(methodName);
if (method == null)
throw new Exception("method is null");
try
{
method.Invoke(this, null); //方法调用
}
catch
{
}
}
public void GetData()
{
#region 静态桑基图数据源
List<Nodes> nodes = new List<Nodes>();
Nodes n1 = new Nodes { name = "总用量", value = "1403.97", itemStyle = new ItemStyle() { color = "#9d9ca3" } };
nodes.Add(n1);
Nodes n2 = new Nodes { name = "厂房1", value = "118.38", itemStyle = new ItemStyle() { color = "#00a800" } };
nodes.Add(n2);
Nodes n3 = new Nodes { name = "机器1", value = "0", itemStyle = new ItemStyle() { color = "#81be8a" } };
nodes.Add(n3);
Nodes n4 = new Nodes { name = "机器2", value = "0", itemStyle = new ItemStyle() { color = "#81be8a" } };
nodes.Add(n4);
Nodes n5 = new Nodes { name = "机器3", value = "0", itemStyle = new ItemStyle() { color = "#81be8a" } };
nodes.Add(n5);
Nodes n6 = new Nodes { name = "厂房2", value = "1191.22", itemStyle = new ItemStyle() { color = "#8888ff" } };
nodes.Add(n6);
Nodes n7 = new Nodes { name = "机器4", value = "396.26", itemStyle = new ItemStyle() { color = "#8888ff" } };
nodes.Add(n7);
Nodes n8 = new Nodes { name = "电机1", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };
nodes.Add(n8);
Nodes n9 = new Nodes { name = "电机2", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };
nodes.Add(n9);
Nodes n10 = new Nodes { name = "电机3", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };
nodes.Add(n10);
Nodes n11 = new Nodes { name = "电机4", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };
nodes.Add(n11);
Nodes n12 = new Nodes { name = "电机5", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };
nodes.Add(n12);
Nodes n13 = new Nodes { name = "电机6", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };
nodes.Add(n13);
Nodes n14 = new Nodes { name = "电机7", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };
nodes.Add(n14);
Nodes n15 = new Nodes { name = "电机8", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };
nodes.Add(n15);
Nodes n16 = new Nodes { name = "电机9", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };
nodes.Add(n16);
Nodes n17 = new Nodes { name = "电机10", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };
nodes.Add(n17);
Nodes n18 = new Nodes { name = "电机11", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };
nodes.Add(n18);
Nodes n19 = new Nodes { name = "厂房3", value = "94.37", itemStyle = new ItemStyle() { color = "#8888ff" } };
nodes.Add(n19);
Nodes n20 = new Nodes { name = "电机12", value = "0", itemStyle = new ItemStyle() { color = "#ff9a35" } };
nodes.Add(n20);
Nodes n21 = new Nodes { name = "电机13", value = "0", itemStyle = new ItemStyle() { color = "#ff9a35" } };
nodes.Add(n21);
List<Links> links = new List<Links>();
Links l1 = new Links { source = "总用量", target = "厂房1", value = "118.38", lineStyle = new ItemStyle() { color = "#81be8a" } };
Links l2 = new Links { source = "厂房1", target = "机器1", value = "53.50", lineStyle = new ItemStyle() { color = "#81be8a" } };
Links l3 = new Links { source = "厂房1", target = "机器2", value = "57.68", lineStyle = new ItemStyle() { color = "#81be8a" } };
Links l4 = new Links { source = "厂房1", target = "机器3", value = "7.20", lineStyle = new ItemStyle() { color = "#81be8a" } };
Links l5 = new Links { source = "总用量", target = "厂房2", value = "1191.22", lineStyle = new ItemStyle() { color = "#3e0fee" } };
Links l6 = new Links { source = "厂房2", target = "机器4", value = "396.26", lineStyle = new ItemStyle() { color = "#3e0fee" } };
Links l7 = new Links { source = "机器4", target = "电机1", value = "170.10", lineStyle = new ItemStyle() { color = "#8888ff" } };
Links l8 = new Links { source = "机器4", target = "电机2", value = "82.00", lineStyle = new ItemStyle() { color = "#8888ff" } };
Links l9 = new Links { source = "机器4", target = "电机3", value = "144.16", lineStyle = new ItemStyle() { color = "#d6a18f" } };
Links l10 = new Links { source = "厂房2", target = "电机4", value = "204.32", lineStyle = new ItemStyle() { color = "#d6a18f" } };
Links l11 = new Links { source = "厂房2", target = "电机5", value = "321.48", lineStyle = new ItemStyle() { color = "#d6a18f" } };
Links l12 = new Links { source = "厂房2", target = "电机6", value = "14.72", lineStyle = new ItemStyle() { color = "#d6a18f" } };
Links l13 = new Links { source = "厂房2", target = "电机7", value = "21.76", lineStyle = new ItemStyle() { color = "#d6a18f" } };
Links l14 = new Links { source = "厂房2", target = "电机8", value = "1.28", lineStyle = new ItemStyle() { color = "#d6a18f" } };
Links l15 = new Links { source = "厂房2", target = "电机9", value = "51.20", lineStyle = new ItemStyle() { color = "#d6a18f" } };
Links l16 = new Links { source = "厂房2", target = "电机10", value = "19.28", lineStyle = new ItemStyle() { color = "#d6a18f" } };
Links l17 = new Links { source = "厂房2", target = "电机11", value = "160.92", lineStyle = new ItemStyle() { color = "#d6a18f" } };
Links l18 = new Links { source = "总用量", target = "厂房3", value = "94.37", lineStyle = new ItemStyle() { color = "#81be8a" } };
Links l19 = new Links { source = "厂房3", target = "电机12", value = "45.15", lineStyle = new ItemStyle() { color = "#8888ff" } };
Links l20 = new Links { source = "厂房3", target = "电机13", value = "48.48", lineStyle = new ItemStyle() { color = "#8888ff" } };
links.Add(l1);
links.Add(l2);
links.Add(l3);
links.Add(l4);
links.Add(l5);
links.Add(l6);
links.Add(l7);
links.Add(l8);
links.Add(l9);
links.Add(l10);
links.Add(l11);
links.Add(l12);
links.Add(l13);
links.Add(l14);
links.Add(l15);
links.Add(l16);
links.Add(l17);
links.Add(l18);
links.Add(l19);
links.Add(l20);
Rootobject b = new Rootobject();
b.nodes = nodes;
b.links = links;
#endregion
#region 将数据源转换成Json格式
JavaScriptSerializer oSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
var json = oSerializer.Serialize(b);
#endregion
//由于页面定义了Div等Html元素,所以在Response json格式需要将Html页面元素清除,只输出json,这样前台就只收到Json格式不包含html元素。
Response.Clear();
Response.Write(json);
Response.Flush();
Response.End();
}
#region 桑吉图Json格式类定义
public class Rootobject
{
public List<Nodes> nodes { get; set; }
public List<Links> links { get; set; }
}
public class Nodes
{
public string name { get; set; }
public string value { get; set; }
public ItemStyle itemStyle { get; set; }
}
public class Links
{
public string source { get; set; }
public string target { get; set; }
public string value { get; set; }
public ItemStyle lineStyle { get; set; }
}
public class ItemStyle
{
public string color { get; set; }
}
#endregion
}
}
运行后效果如开头所示,源代码下载:猛戳这里