Echarts 实现树状图的展示与编辑示例

示例效果图如下：

当前示例的数据加载的是静态json文件。

当鼠标移动到节点上时，会有节点描叙信息提示框。

当在节点处右键时，会弹出右键编辑菜单，效果如下图：

当鼠标单击节点以外区域时，会隐藏右键编辑菜单。

接下来直接上源码。

首先是静态JSON数据文件：

flare.json 文件内容如下：

{"name": "根节点","describes":"这个是一级根节点","children":[{"name": "二级节点(analytics)","describes":"这个是二级子节点","children": [{"name": "cluster","children": [{"name": "AgglomerativeCluster", "value": 3938},{"name": "CommunityStructure", "value": 3812},{"name": "HierarchicalCluster", "value": 6714},{"name": "MergeEdge", "value": 743}]},{"name": "graph","children": [{"name": "BetweennessCentrality", "value": 3534},{"name": "LinkDistance", "value": 5731},{"name": "MaxFlowMinCut", "value": 7840},{"name": "ShortestPaths", "value": 5914},{"name": "SpanningTree", "value": 3416}]},{"name": "optimization","children": [{"name": "AspectRatioBanker", "value": 7074}]}]},{"name": "animate","children": [{"name": "Easing", "value": 17010},{"name": "FunctionSequence", "value": 5842},{"name": "interpolate","children": [{"name": "ArrayInterpolator", "value": 1983},{"name": "ColorInterpolator", "value": 2047},{"name": "DateInterpolator", "value": 1375},{"name": "Interpolator", "value": 8746},{"name": "MatrixInterpolator", "value": 2202},{"name": "NumberInterpolator", "value": 1382},{"name": "ObjectInterpolator", "value": 1629},{"name": "PointInterpolator", "value": 1675},{"name": "RectangleInterpolator", "value": 2042}]},{"name": "ISchedulable", "value": 1041},{"name": "Parallel", "value": 5176},{"name": "Pause", "value": 449},{"name": "Scheduler", "value": 5593},{"name": "Sequence", "value": 5534},{"name": "Transition", "value": 9201},{"name": "Transitioner", "value": 19975},{"name": "TransitionEvent", "value": 1116},{"name": "Tween", "value": 6006}]},{"name": "data","children": [{"name": "converters","children": [{"name": "Converters", "value": 721},{"name": "DelimitedTextConverter", "value": 4294},{"name": "GraphMLConverter", "value": 9800},{"name": "IDataConverter", "value": 1314},{"name": "JSONConverter", "value": 2220}]},{"name": "DataField", "value": 1759},{"name": "DataSchema", "value": 2165},{"name": "DataSet", "value": 586},{"name": "DataSource", "value": 3331},{"name": "DataTable", "value": 772},{"name": "DataUtil", "value": 3322}]},{"name": "display","children": [{"name": "DirtySprite", "value": 8833},{"name": "LineSprite", "value": 1732},{"name": "RectSprite", "value": 3623},{"name": "TextSprite", "value": 10066}]},{"name": "flex","children": [{"name": "FlareVis", "value": 4116}]},{"name": "query","children": [{"name": "AggregateExpression", "value": 1616},{"name": "And", "value": 1027},{"name": "Arithmetic", "value": 3891},{"name": "Average", "value": 891},{"name": "BinaryExpression", "value": 2893},{"name": "Comparison", "value": 5103},{"name": "CompositeExpression", "value": 3677},{"name": "Count", "value": 781},{"name": "DateUtil", "value": 4141},{"name": "Distinct", "value": 933},{"name": "Expression", "value": 5130},{"name": "ExpressionIterator", "value": 3617},{"name": "Fn", "value": 3240},{"name": "If", "value": 2732},{"name": "IsA", "value": 2039},{"name": "Literal", "value": 1214},{"name": "Match", "value": 3748},{"name": "Maximum", "value": 843},{"name": "methods","children": [{"name": "add", "value": 593},{"name": "and", "value": 330},{"name": "average", "value": 287},{"name": "count", "value": 277},{"name": "distinct", "value": 292},{"name": "div", "value": 595},{"name": "eq", "value": 594},{"name": "fn", "value": 460},{"name": "gt", "value": 603},{"name": "gte", "value": 625},{"name": "iff", "value": 748},{"name": "isa", "value": 461},{"name": "lt", "value": 597},{"name": "lte", "value": 619},{"name": "max", "value": 283},{"name": "min", "value": 283},{"name": "mod", "value": 591},{"name": "mul", "value": 603},{"name": "neq", "value": 599},{"name": "not", "value": 386},{"name": "or", "value": 323},{"name": "orderby", "value": 307},{"name": "range", "value": 772},{"name": "select", "value": 296},{"name": "stddev", "value": 363},{"name": "sub", "value": 600},{"name": "sum", "value": 280},{"name": "update", "value": 307},{"name": "variance", "value": 335},{"name": "where", "value": 299},{"name": "xor", "value": 354},{"name": "-", "value": 264}]},{"name": "Minimum", "value": 843},{"name": "Not", "value": 1554},{"name": "Or", "value": 970},{"name": "Query", "value": 13896},{"name": "Range", "value": 1594},{"name": "StringUtil", "value": 4130},{"name": "Sum", "value": 791},{"name": "Variable", "value": 1124},{"name": "Variance", "value": 1876},{"name": "Xor", "value": 1101}]},{"name": "scale","children": [{"name": "IScaleMap", "value": 2105},{"name": "LinearScale", "value": 1316},{"name": "LogScale", "value": 3151},{"name": "OrdinalScale", "value": 3770},{"name": "QuantileScale", "value": 2435},{"name": "QuantitativeScale", "value": 4839},{"name": "RootScale", "value": 1756},{"name": "Scale", "value": 4268},{"name": "ScaleType", "value": 1821},{"name": "TimeScale", "value": 5833}]},{"name": "util","children": [{"name": "Arrays", "value": 8258},{"name": "Colors", "value": 10001},{"name": "Dates", "value": 8217},{"name": "Displays", "value": 12555},{"name": "Filter", "value": 2324},{"name": "Geometry", "value": 10993},{"name": "heap","children": [{"name": "FibonacciHeap", "value": 9354},{"name": "HeapNode", "value": 1233}]},{"name": "IEvaluable", "value": 335},{"name": "IPredicate", "value": 383},{"name": "IValueProxy", "value": 874},{"name": "math","children": [{"name": "DenseMatrix", "value": 3165},{"name": "IMatrix", "value": 2815},{"name": "SparseMatrix", "value": 3366}]},{"name": "Maths", "value": 17705},{"name": "Orientation", "value": 1486},{"name": "palette","children": [{"name": "ColorPalette", "value": 6367},{"name": "Palette", "value": 1229},{"name": "ShapePalette", "value": 2059},{"name": "SizePalette", "value": 2291}]},{"name": "Property", "value": 5559},{"name": "Shapes", "value": 19118},{"name": "Sort", "value": 6887},{"name": "Stats", "value": 6557},{"name": "Strings", "value": 22026}]},{"name": "vis","children": [{"name": "axis","children": [{"name": "Axes", "value": 1302},{"name": "Axis", "value": 24593},{"name": "AxisGridLine", "value": 652},{"name": "AxisLabel", "value": 636},{"name": "CartesianAxes", "value": 6703}]},{"name": "controls","children": [{"name": "AnchorControl", "value": 2138},{"name": "ClickControl", "value": 3824},{"name": "Control", "value": 1353},{"name": "ControlList", "value": 4665},{"name": "DragControl", "value": 2649},{"name": "ExpandControl", "value": 2832},{"name": "HoverControl", "value": 4896},{"name": "IControl", "value": 763},{"name": "PanZoomControl", "value": 5222},{"name": "SelectionControl", "value": 7862},{"name": "TooltipControl", "value": 8435}]},{"name": "data","children": [{"name": "Data", "value": 20544},{"name": "DataList", "value": 19788},{"name": "DataSprite", "value": 10349},{"name": "EdgeSprite", "value": 3301},{"name": "NodeSprite", "value": 19382},{"name": "render","children": [{"name": "ArrowType", "value": 698},{"name": "EdgeRenderer", "value": 5569},{"name": "IRenderer", "value": 353},{"name": "ShapeRenderer", "value": 2247}]},{"name": "ScaleBinding", "value": 11275},{"name": "Tree", "value": 7147},{"name": "TreeBuilder", "value": 9930}]},{"name": "events","children": [{"name": "DataEvent", "value": 2313},{"name": "SelectionEvent", "value": 1880},{"name": "TooltipEvent", "value": 1701},{"name": "VisualizationEvent", "value": 1117}]},{"name": "legend","children": [{"name": "Legend", "value": 20859},{"name": "LegendItem", "value": 4614},{"name": "LegendRange", "value": 10530}]},{"name": "operator","children": [{"name": "distortion","children": [{"name": "BifocalDistortion", "value": 4461},{"name": "Distortion", "value": 6314},{"name": "FisheyeDistortion", "value": 3444}]},{"name": "encoder","children": [{"name": "ColorEncoder", "value": 3179},{"name": "Encoder", "value": 4060},{"name": "PropertyEncoder", "value": 4138},{"name": "ShapeEncoder", "value": 1690},{"name": "SizeEncoder", "value": 1830}]},{"name": "filter","children": [{"name": "FisheyeTreeFilter", "value": 5219},{"name": "GraphDistanceFilter", "value": 3165},{"name": "VisibilityFilter", "value": 3509}]},{"name": "IOperator", "value": 1286},{"name": "label","children": [{"name": "Labeler", "value": 9956},{"name": "RadialLabeler", "value": 3899},{"name": "StackedAreaLabeler", "value": 3202}]},{"name": "layout","children": [{"name": "AxisLayout", "value": 6725},{"name": "BundledEdgeRouter", "value": 3727},{"name": "CircleLayout", "value": 9317},{"name": "CirclePackingLayout", "value": 12003},{"name": "DendrogramLayout", "value": 4853},{"name": "ForceDirectedLayout", "value": 8411},{"name": "IcicleTreeLayout", "value": 4864},{"name": "IndentedTreeLayout", "value": 3174},{"name": "Layout", "value": 7881},{"name": "NodeLinkTreeLayout", "value": 12870},{"name": "PieLayout", "value": 2728},{"name": "RadialTreeLayout", "value": 12348},{"name": "RandomLayout", "value": 870},{"name": "StackedAreaLayout", "value": 9121},{"name": "TreeMapLayout", "value": 9191}]},{"name": "Operator", "value": 2490},{"name": "OperatorList", "value": 5248},{"name": "OperatorSequence", "value": 4190},{"name": "OperatorSwitch", "value": 2581},{"name": "SortOperator", "value": 2023}]},{"name": "Visualization", "value": 16540}]}]
}

重要的页面html文件,echart_demo.html

<!DOCTYPE html>
<html>
<head><title>Echarts 树形图示例</title><meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport' /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><link href='../../assets/stylesheets/bootstrap/bootstrap.css' media='all' rel='stylesheet' type='text/css' /><style>*{padding: 0;margin: 0;}.menu{/*这个样式不写，右键弹框会一直显示在画布的左下角*/position: absolute;background: #ffff;border-radius: 5px;left: -99999px;top: -999999px;z-index:1;}.menu ul{list-style: none}.menu ul li{padding: 5px 10px;color: #228EFB;border-bottom: 1px dashed #228EFB;font-size: 17px;}.menu ul li:last-child{border-bottom: none;}</style></head><body class='contrast-blue'><div id='wrapper'><section id='content'><div class="nav-part"><div class="cur-position risk">树模型>>编辑</div></div><div class="container-fluid"><div class="querycontext"></div></div><div class="tree-container"><div id="main" style="width:100%;height:1000px;"></div></div></section></div><!--右键弹出菜单--><div id="rightMenu" class="menu" style="display:none;"><ul><li onclick="editModelNode()">编辑节点</li><li onclick="addModelNode()">增加子节点</li><li onclick="deleteModelNode('1')">删除当前节点</li><li onclick="deleteModelNode('2')">删除子节点</li></ul></div></body><script src='https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js' type='text/javascript'></script><script src='https://cdn.staticfile.org/echarts/5.1.0/echarts.js' type='text/javascript'></script><script type="text/javascript">var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom, 'dark');//var option;//flare.json是静态JSON文件，为了测试所用，实际应用时替换为接口返回的数据//注意：json数据格式中子节点的key名必须为childrenmyChart.showLoading();//echarts自带的Loading遮罩方法$.getJSON('flare.json', {}, function (data) {myChart.hideLoading();data.collapsed=false;data.children.forEach(function (datum, index) {datum.collapsed = true});option={tooltip: {show:true,trigger: 'item',triggerOn: 'mousemove',position:"bottom",textStyle:{color:"#228EFB",fontSize:17},extraCssText:'width:300px;white-space:pre-wrap;',formatter:function(params, ticket, callback){var tsxx=params.data.describes==""||params.data.describes==null?params.data.name:params.data.describes;return tsxx;}},series: [{type: 'tree',data: [data],top: 'middle',left: 'center',
//                          bottom: '1%',
//                          right: '15%',symbolSize: 15,itemStyle:{color: '#228EFB' ,},lineStyle:{color: '#DDD',},label: {color: "#FFF",position: 'left',verticalAlign: 'middle',align: 'right',fontSize: 18},leaves: {label: {position: 'right',verticalAlign: 'middle',align: 'left'}},emphasis: {focus: 'descendant'},edgeForkPosition: "72%",roam : true,//鼠标缩放，拖拽整颗树expandAndCollapse: true,animationDuration: 550,animationDurationUpdate: 750}]};myChart.setOption(option);}, 'json');//新增或者修改节点后，调用后台保存或更新数据function submitForm(){//请求成功后var flag=true;//模拟请求接口返回成功if(flag){alert(resData.msg);data=resData.result[0];if(czlx=="addRoot"){$("#modelRootId").val(data.id);//根节点}data.collapsed=false;data.children.forEach(function (datum, index) {datum.collapsed = true});option={tooltip: {show:true,trigger: 'item',triggerOn: 'mousemove',position:"bottom",textStyle:{color:"#228EFB",fontSize:17},extraCssText:'width:300px;white-space:pre-wrap;',formatter:function(params, ticket, callback){var tsxx=params.data.describes==""||params.data.describes==null?params.data.name:params.data.describes;return tsxx;}},series: [{type: 'tree',data: [data],top: 'middle',left: 'center',
//                                  bottom: '1%',
//                                  right: '15%',symbolSize: 15,itemStyle:{color: '#228EFB' ,},lineStyle:{color: '#DDD',},label: {color: "#FFF",position: 'left',verticalAlign: 'middle',align: 'right',fontSize: 18},leaves: {label: {position: 'right',verticalAlign: 'middle',align: 'left'}},emphasis: {focus: 'descendant'},edgeForkPosition: "72%",roam:true,//鼠标缩放，拖拽整颗树expandAndCollapse: true,animationDuration: 550,animationDurationUpdate: 750}]};var sfEdit=true;//是否为新增或修改if(sfEdit){myChart.clear();$('.tree-container').click();}myChart.setOption(option);}}myChart.on("click", this.treeNodeclick);
//  节点点击事件function treeNodeclick(param){/* true 代表点击的是圆点fasle 表示点击的是当前节点的文本*/if(param.event.target.culling === true){if (typeof param.seriesIndex == 'undefined') {return;}if (param.type == 'click') {if (!param.data.hasChild) {if(param.data.collapsed == undefined || param.data.collapsed == true){console.log("未定义或者是未展开，下次即将展开");param.data.collapsed=false;}else{console.log("下次不展开");param.data.collapsed=true;}return;}}return ;} else if(param.event.target.culling === false){
//          let args = param.data; //当前节点及其子节点的值
//          let level = param.data.level; //当前节点的层级 eg:"1-1-0",可以通过level判断当前的层级，从而进行不同的操作
// //           this.textNodeclick(args,level);}}/*** 鼠标右键，弹出右键操作菜单*/$("#main").bind("contextmenu", function () { return false; });//防止默认菜单弹出（查看图像,图像另存为等）var gloab_param=null;myChart.on("contextmenu", function(params){gloab_param=params;$('#rightMenu').css({'display': 'block','left': params.event.offsetX+15,//此处根据自己实际情况调整右键操作菜单显示位置'top' : params.event.offsetY -110});});/*** 点击画布的时候隐藏右键菜单*/$('.tree-container').click(function () {$('#rightMenu').css({'display': 'none','left': '-9999px','top': '-9999px'});});//编辑节点function editModelNode(){//editData为编辑的当前节点数据Objvar editData=gloab_param.data;}//添加子节点function addModelNode(){console.log("新增");}//删除当前节点function deleteModelNode(deleteType){var ts="删除当前节点后，当前节点下所有子节点也会被删除，确定要删除当前节点吗？";if(window.confirm(ts)){//此处请求后台删除节点数据var flag=true;//模拟请求成功，重新渲染整个树if(flag){var data=resData.result[0];data.collapsed=false;data.children.forEach(function (datum, index) {datum.collapsed = true});option={tooltip: {show:true,trigger: 'item',triggerOn: 'mousemove',position:"bottom",textStyle:{color:"#228EFB",fontSize:17},extraCssText:'width:300px;white-space:pre-wrap;',formatter:function(params, ticket, callback){var tsxx=params.data.describes==""||params.data.describes==null?params.data.name:params.data.describes;return tsxx;}},series: [{type: 'tree',data: [data],top: 'middle',left: 'center',
//                                          bottom: '1%',
//                                          right: '15%',symbolSize: 15,itemStyle:{color: '#228EFB' ,},lineStyle:{color: '#DDD',},label: {color: "#FFF",position: 'left',verticalAlign: 'middle',align: 'right',fontSize: 18},leaves: {label: {position: 'right',verticalAlign: 'middle',align: 'left'}},emphasis: {focus: 'descendant'},edgeForkPosition: "72%",roam:true,//鼠标缩放，拖拽整颗树expandAndCollapse: true,animationDuration: 550,animationDurationUpdate: 750}]};myChart.clear();$('.tree-container').click();myChart.setOption(option);}else{//数据已经清空了，页面reloadwindow.location.reload();}}}//根据指定key的值删除对应的对象function removeByValue(arr, attrKey, attrValue){ var index=0;for(var i in arr){if(arr[i][attrKey]==attrValue){index=i;break;}}arr.splice(index,1);}</script>
</html>

如果需要更详细的使用支持，可以私信咨询小编或者评论区留言，小编会在第一时间及时回复。

感觉对您有所帮助的话，还请帮小编点赞收藏加关注哦。

Echarts 实现树状图的展示与编辑示例相关推荐

echarts 堆叠树状图排序
echarts 堆叠树状图.没有相关的配置API,要自己先把数据排好,再传到数据配置中... 未排序: 它的配置项: option = {tooltip: {trigger: 'axis',axisP ...
d3.js v3版本实现-树状图
参考的例子:http://bl.ocks.org/robschmuecker/7880033 一.为什么选择d3.js 二.d3.js概述三:树状图实现 1.创建svg 2.在svg元素里面画一个g ...
微信小程序 ———— 使用ECharts实现树状关系图
在开发中,有时候会遇到展示一些人物关系,上下级关系等相关需求,使用树状图可以清晰的表达出来首先看下目录结构 - component- echarts- ec-canvas.js- ec-canvas ...
递归展示树状图/树状表格
递归展示树状图一.数据库表设计二.后端java递归代码三.前端展示树状表格四.效果展示一.数据库表设计这里我们采用自关联的设计,通过id和pid的对应来确认数据的上下级关系建表语句,我这 ...
【Python 实战基础】如何绘制树状图展示Python数据分析师的知识结构
目录一.实战场景二.主要知识点文件读写基础语法字符串处理文件生成数据构建三.菜鸟实战 1.创建 python 文件 2.运行结果一.实战场景实战场景:如何绘制树状图展示Python ...
Java树状图展示的实现
Java树状图展示的实现在项目中经常会遇到将数据以树状图的形式展现出来,如图: 有时候不仅要构建树结构,还要计算每个节点拥有的成员数量. 由于我们不能确定树的大小和层级就不能用常规的方法进行展示,我 ...
Pyecharts树状图：地理图表
Pyecharts树状图:地理图表文章目录 Pyecharts树状图:地理图表前言一.地理图表 1. 基本的国家地图(瑞士) 2. 在地图上展示动态运动效果 3. 分段展示图 4. 省市图 5. ...
html树状图右侧_树状图及制作方法（Excel 2016/Excel 2013）
↑↑↑关注ExcelEasy,让Excel更简单树状图是一种展示层次结构数据的图表,可以很好的揭示各类别数据的比例关系及类别内数据的组成结构.今天为大家详细介绍一下树状图的制作方法树状图在Exce ...
一个有意思的echarts3D树状图
玩了一个有意思的echarts3D树状图,贴出来供大家看看 <!DOCTYPE html> <html><head><meta charset="U ...
如何在 LaTeX 中画一个树状图（使用tikz和tikz-qtree包中的宏绘制树、森林、二叉树）
简单介绍在计算机相关的文章中,树状图是最常见的几种图之一.树状图经常被用来用来演示结构.层次.算法等内容.而二叉树是最基础的树状图之一,掌握二叉树的画法就可以用图像展示一些算法或者数据结构了. 在 ...

Echarts 实现树状图的展示与编辑示例

Echarts 实现树状图的展示与编辑示例相关推荐

最新文章

热门文章