最近的项目须要用到组织架构图，Echarts2.2.7中树图正好能够使用，可是最新的Echarts3.0删除了这个组件javascript
六、去掉了拖拽重计算，树图，和弦图，字符云，韦恩图
树图，字符云和韦恩图这三个图咱们以为在 2 中很不成熟，3 中对其优化改进前先暂时不支持，拖拽重计算咱们以为使用的人并很少，又会增长很多代码体积，因此也先去掉了，不排除后面会经过扩展的方式加入——引用至https://github.com/ecomfe/echarts/issues/3322。html
总而言之，必须使用Echart2.2.7和使用2.0版本的引用方式，3.0引用方式有改动。java
<script type="text/javascript"> //递归处理Handler.ashx传过来的数据 var HandlerData =function(datas,Pid){ var itemArr=[]; for(var i=0;i<datas.length;i++){ var node=datas[i]; if(node.Pid==Pid ) { var newNode={"name":node.Name,"children":HandlerData(datas,node.Id)}; itemArr.push(newNode); } }; return itemArr; }; //全局变量data_tree var data_tree = []; $(document).ready(function(){ $.ajax({ url:"ajax/Handler.ashx", data:{cmd:"tree"}, cache:false, async:false, dataType:'json', success:function(data){ if(data){ data_tree=HandlerData(data,"0"); } }, error:function(msg){ alert("系统发生错误"); } }) }); //配置路径 require.config({ paths:{ "echarts":"build/dist/echarts", "echarts/chart/tree":"build/dist/chart/tree" } }); //using路径 require( [ "echarts", "echarts/chart/tree" ], function(ec){ var myChart=ec.init(document.getElementById("main")); var option = { title : { text: '冰桶挑战' }, //工具箱 toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, //序列 series : [ { name:'树图', type:'tree', orient: 'horizontal', // vertical horizontal rootLocation: {x: 100,y: 230}, // 根节点位置 {x: 100, y: 'center'} 根节点坐标，支持绝对值（px）、字符和百分比 nodePadding: 10,//节点间距 layerPadding: 200,//层间距 hoverable: false,//非数值显示（如仅用于显示标注标线时），能够经过hoverable:false关闭区域悬浮高亮 roam: true,//是否开启滚轮缩放和拖拽漫游 symbolSize: 8,//全部该类目的节点的大小 //图形样式 itemStyle: { normal: { color: '#4883b4', //标签 label: { show: true, position: 'right', formatter: "{b}", textStyle: { color: '#000',//二级氧箱零件名称颜色 fontSize: 5 } }, //连线颜色 lineStyle: { color: '#ccc', type: 'curve' // 'curve'|'broken'|'solid'|'dotted'|'dashed' } }, emphasis: { color: '#4883b4', label: { show: false }, borderWidth: 0 } }, //局部变量传进来的数据 data: data_tree } ] }; //loading data myChart.setOption(option); } ); </script>
<!DCOTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echarts测试页</title>
<script src="esl/esl.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="main" style="height: 400px;">
</div>
<!-- 这里放js代码-->
</body>
</html>
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.Data;
using BaseLib;
using System.Collections.Generic;
using System.Web.Script.Serialization;
public class Handler : IHttpHandler {
List<TreeDemo> tree = new List<TreeDemo>();
public void ProcessRequest (HttpContext context) {
string command = context.Request["cmd"];
switch (command)
{
case "tree":
GetTree(context);
break;
}
}
public void GetTree(HttpContext context)
{
DataSet dsTree = GetData();
foreach (DataRow row in dsTree.Tables[0].Rows)
{
TreeDemo tr = new TreeDemo(row["PartID"].ToString(), row["ParentID"].ToString(), row["PartName"].ToString());
tree.Add(tr);
}
JavaScriptSerializer jsS = new JavaScriptSerializer();
string result = jsS.Serialize(tree);
context.Response.Write(result);
}
public bool IsReusable {
get {
return false;
}
}
private DataSet GetData()
{
DBLib dbLib = new DBLib();
string strSQL = "select * from 零件目录 where PartID <>5096 ";
DataSet ds =dbLib.GetDataSet(strSQL);
DataRow newRow = ds.Tables[0].NewRow();
newRow["PartID"] = 0;
newRow["PartName"] = "XXXX";
newRow["ParentID"] = -1;
ds.Tables[0].Rows.InsertAt(newRow, 0);
return ds;
}
}
public class TreeDemo
{
public string Id;
public string Pid;
public string Name;
public TreeDemo(string id,string pid,string name)
{
Id = id;
Pid = pid;
Name = name;
}
}
一、引入方式旧版有Tree.js，新版没有，两个版本引入方式并不相同
二、找到一个能够运行出来的Echarts2.2.7版本的DEMO；
三、更改DEMO，以函数传参的形式传入Data；
四、从Handler文件传过来的Data形式为node
[{"Id":"0","Pid":"-1","Name":"XXX"},
{"Id":"5095","Pid":"0","Name":"XXX"},
{"Id":"5100","Pid":"5095","Name":"XXX"},
{"Id":"5101","Pid":"5095","Name":"XXX"}]
转换为jquery
[{"name":"郭静",
"children":[{"name":"大芙", "children":[{"name":"大泡芙","value":"3.2"}, {"name":"二泡芙","value":"4.1"}],"value":"1.6"}, {"name":"小芙","value":"2.1"}, {"name":"三芙","value":"3.1"}],"value":"1.2"}]
将带有pid的json格式转换为层级json格式有两种途径：
1）、 后台C#转
2）、JS转git