Echarts2.27树图和Handler.aspx结合

最新推荐文章于 2025-06-10 13:40:25 发布

It_sharp

最新推荐文章于 2025-06-10 13:40:25 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 C# 文章标签： echarts动态获取数据 Json层级

本文链接：https://blog.youkuaiyun.com/It_sharp/article/details/78459294

C# 同时被 2 个专栏收录

85 篇文章

订阅专栏

前端

75 篇文章

订阅专栏

本文介绍如何使用Echarts2.2.7版本实现组织架构图，并提供了完整的示例代码，包括JS、HTML及后台数据处理部分。由于Echarts3.0移除了树图组件，此教程对于需要在项目中使用树图功能的开发者非常实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

最近的项目需要用到组织架构图，Echarts2.2.7中树图正好可以使用，但是最新的Echarts3.0删除了这个组件

6、去掉了拖拽重计算，树图，和弦图，字符云，韦恩图
树图，字符云和韦恩图这三个图我们觉得在 2 中很不成熟，3 中对其优化改进前先暂时不支持，拖拽重计算我们觉得使用的人并不多，又会增加不少代码体积，所以也先去掉了，不排除后面会通过扩展的方式加入——引用至https://github.com/ecomfe/echarts/issues/3322。

总而言之，必须使用Echart2.2.7和使用2.0版本的引用方式，3.0引用方式有改动。

JS部分

<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>

Html部分

<!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>

Handler.ashx部分

<%@ 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;
        }
   }

总结

1、引入方式旧版有Tree.js，新版没有，两个版本引入方式并不相同
2、找到一个可以运行出来的Echarts2.2.7版本的DEMO；
3、更改DEMO，以函数传参的形式传入Data；
4、从Handler文件传过来的Data形式为

    [{"Id":"0","Pid":"-1","Name":"XXX"},
    {"Id":"5095","Pid":"0","Name":"XXX"},
    {"Id":"5100","Pid":"5095","Name":"XXX"},
    {"Id":"5101","Pid":"5095","Name":"XXX"}]

转换为

    [{"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"}]