Echarts绘制多层树图

Echarts绘制多层树图，如图所示

步骤如下：
1.将echarts的series中type改成“tree”
2.修改series中symbol

echarts官网有相似例子，移步看树形图
https://echarts.apache.org/examples/zh/index.html?theme=light#chart-type-tree

由于是多个子节点，并且要求全部显示出来，因此需要在series里加上expandAndCollapse属性( fasle:将折叠收起的子树展开，true:将子树折叠收起)

我的data数据：

 var data = {"name": "S001","children": [{"name": "H031","children": [{"name": "H045 0.0t","value": "1",},{"name": "H045 28.5t","children": [{"name": "H045 28.2t","children": [{"name": "C101 28.1t","children": [{"name": "C102 28.0t","children": [{"name": "C103 28.0t","children": [{"name": "C104 27.8t","children": [{"name": "C161 2.5t",},{"name": "C161 12.2t",},{"name": "C161 12.0t",},{"name": "C161 0.6t",//图片也可以放到数据里//"symbol": 'image://https://www.akailibrary.com/wp-content/uploads/2020/05/1589443043-3784896.jpg',}],}],}],}],}],}],},]}    ]};

option代码

     var option = {series: [{type: 'tree',            //树形图data: [data],          //将data数据传入进去label: {position: 'left',verticalAlign: 'middle',align: 'right',fontSize: 10},                       //文字样式orient: 'vertical',     //图形竖向显示layout:'default',symbol:'image://https://www.akailibrary.com/wp-content/uploads/2020/05/1589443043-3784896.jpg',    //自定义图片symbolSize:  [40, 40],    //图片大小 roam:false,              //鼠标可以缩放，拖拽图形expandAndCollapse: false,//无关的子树折叠收起width: "50%"              //组件宽度}]}

Echarts绘制多层树图相关推荐

Echarts绘制Tree树图的涟漪效果effectScatter
1. 问题描述 Echarts绘制图表是支持涟漪效果的,但是搜了材料,有地图.折线图.散点图等,不支持树图. 本文方法实现了一种可以任意Echarts图的涟漪效果 2. 效果展示将树图的一级节点全部 ...
Echarts绘制差异代谢产物分类与KEGG通路分类的旭日图
文章目录前言数据准备工作绘图 excel旭日图的绘制 ECharts旭日图的绘制 ECharts旭日图菜鸟编辑器修改后的旭日图附演示代码前言整理实验数据,进行可视化,旭日图有利于简洁明了 ...
hdc mfc 画扇形图_使用echarts绘制条形图和扇形图
使用echarts绘制条形图和扇形图简单举例说明下echarts如何绘制条形图和扇形图代码示例 echarts绘制条形图和扇形图 var mychart1=echarts.init(documen ...
技术图文：如何利用C# + Echarts 绘制「堆叠条形图」？
背景前几天,我们介绍了如何利用C# + Echarts 绘制 Bar Simple?,原以为把 Echarts 封装到这种程度就可以完成当前任务了. 可是,把软件原型提交给对方时,发现对方更希望& ...
python画图代码彩虹-echarts绘制彩虹图
echarts绘制彩虹图 1.开发环境 vue+echarts 2.电脑系统 windows10专业版 3.在使用echarts开发的过程中,我们可能需要绘制彩虹图,下面是我进行的总结,希望对你有所帮 ...
origin如何绘制双y轴曲线_Origin用矩阵绘制多层曲面映射图
点击上方关注点击下方点赞 [导读]怎样绘制多曲面映射图?1.矩阵数据的准备 1.1 XYYYY型数据我们在实验中得到一张Excel表格一列X表示电场强度,负载量不同的多列Y又分为Pm.Pr两组.那 ...
ECharts绘制饼图
ECharts绘制各种图表非常方便,首先去官网找到想要绘制的图表做参考 ,以下链接时官网示例 Examples - Apache EChartsECharts, a powerful, interac ...
vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
Echarts — 绘制省级地图
版本:vue@3.0.5 + echarts@5.1.2 本文将介绍如何使用 echarts 绘制一个省级地图(以江西省为例) 一.安装 echarts npm i echarts --save-de ...

Echarts绘制多层树图

Echarts绘制多层树图相关推荐

最新文章

热门文章