echart树图设置层级距离_echarts的树形结构图及参数
官网代码:
myChart.showLoading(); //显示Loading标志;
var myChart = echarts.init(document.getElementById('页面中div的id'));
$.get('data/asset/data/flare.json', function (data) {
myChart.hideLoading(); //得到数据后隐藏Loading标志
echarts.util.each(data.children, function (datum, index) {
index % 2 === 0 && (datum.collapsed = true);
}); //间隔展开子数据,animate,display,physics,scale,vis是展开的
myChart.setOption(option = {
tooltip: { //提示框组件
trigger: 'item', //触发类型,默认:item(数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用)。可选:'axis':坐标轴触发,主要在柱状图,折线图等会使用类目轴的 图表中使用。'none':什么都不触发。
triggerOn: 'mousemove' //提示框触发的条件,默认mousemove|click(鼠标点击和移动时触发)。可选mousemove:鼠标移动时,click:鼠标点击时,none:
},
series: [ //系列列表
{
type: 'tree', //树形结构
data: [data], //上面从flare.json中得到的数据
top: '1%', //距离上
left: '7%', //左
bottom: '1%', //下
right: '20%', //右的距离
symbolSize: 7, //标记的大小,就是那个小圆圈,默认7
label: { //每个节点所对应的标签的样式
normal: {
position: 'left', //标签的位置
verticalAlign: 'middle',//文字垂直对齐方式,默认自动。可选:top,middle,bottom
align: 'right', //文字水平对齐方式,默认自动。可选:top,center,bottom
fontSize: 9 //标签文字大小
}
},
leaves: { //叶子节点的特殊配置,如上面的树图示例中,叶子节点和非叶子节点的标签位置不同
label: {
normal: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
}
},
expandAndCollapse: true, //子树折叠和展开的交互,默认打开
animationDuration: 550, //初始动画的时长,支持回调函数,默认1000
animationDurationUpdate: 750//数据更新动画的时长,默认300
}
]
});
});
可以看到每一层都是以name,children的形式
附上一段我自己写的代码得到的结果,数据少一点看起来更清晰:
https://www.easy-mock.com/mock/5d11d32c679aaa1a2f412f0a/example/data
自己写来用的js代码,该树状图垂直模式:
myChart.setOption(option = {
tooltip: {
// show:'true',//默认:true;是否显示提示框组件,包括提示框浮层和 axisPointer。
trigger: 'item',//默认:item;触发类型。item:数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。'axis':坐标轴触发,主要在柱状图,折线图等会使用类目轴 的图表中使用。'none':什么都不触发。
triggerOn: 'mousemove'
},
series:[
{
type: 'tree',
data: [data],
left: '2%',
right: '2%',
top: '15%',
bottom: '10%',
symbol: 'emptyCircle',
orient: 'vertical',
expandAndCollapse: true,//默认:true;子树折叠和展开的交互,默认打开 。
initialTreeDepth:2,//默认:2,树图初始展开的层级(深度)。根节点是第 0 层,然后是第 1 层、第 2 层,... ,直到叶子节点
label: {
normal: {
position: 'top',//标签的位置。
rotate: -90,//标签旋转。从 -90 度到 90 度。正值是逆时针。
verticalAlign: 'middle',//文字垂直对齐方式,默认自动。
align: 'right',//文字水平对齐方式,默认自动。
fontSize: 12,//文字的字体大小
}
},
leaves: {
label: {
normal: {
position: 'bottom',
rotate: -90,
verticalAlign: 'middle',
align: 'left',
fontSize: 8,//文字的字体大小
}
}
},
animationDurationUpdate: 750
}
]
});
再列出一些我觉得可能会用到的参数,方便以后使用:
series(系列列表)
1,layout:树图的布局,有 正交 和 径向 两种(正交就是水平或垂直;径向就是以根节点为原点,每一层为一环)
2,orient:树图中 正交布局 的方向
3,symbol:标记的图形(默认:emptyCricle)
4,initialTreeDepth:树图初始展开的层级(深度)(默认:2)
5,itemStyle:树图中每个节点的样式
6,label:每个节点所对应的文本标签的样式
7,rich:自定义富文本样式,在标签中做出非常丰富的效果。
8,leaves:叶子节点的特殊配置
9,emphasis:树图中个图形和标签高亮的样式
10,data:数据格式是树状结构
11,lineStyle:定义树图边的样式
echart树图设置层级距离_echarts的树形结构图及参数相关推荐
- echart树图设置层级距离_Echarts - 树图实现四个层级
我相信很多人和我一样,制作echats图标时,都会先去demo官网找相同的或者近似的效果,然后再此基础上改进成我们想要的那个. 但是近期混迹某微信群时,我看到一个群友抛出问题说,echarts画树状图 ...
- echart树图设置层级距离_echarts2 tree树图自定义显示缩放大小、位置
<> 看到网上关于echarts tree的资料有点少,做项目恰巧遇到这个,把一些获得分享给大家. 从echarts.官方API中我们似乎只能定义根节点的位置,并不能指定树图整体的大小以及 ...
- echarts中的树形结构图(参数分析)
先上echarts官网示例图,可以点开链接查看,这里先上一张截图,以及官网代码 官网代码: myChart.showLoading(); //显示Loading标志: var myChart = ec ...
- html语言中行距如何设定,html怎么设置行间距离
html怎么设置行间距离 在html中很多人知道如何调解网站的行距,因为默认的行距给人的视觉是非常紧凑的',文章多了就造成不容易阅读.那么,html怎么设置行间距离?下面就由小编给大家介绍介绍吧,希望 ...
- 【数据处理】Python,matplotlib 如何画柱状图?如何画各种类型的柱状图?柱子宽度设置;设置X轴刻度用label显示;设置柱子距离x轴的高度;设置柱体颜色;设置柱体描边;并列、多条柱状图
Base python matlibplot库-- 一.主要参数介绍: bar(left, height, width=0.8, bottom=None, **kwargs) left为和分类数量一致 ...
- 三菱FX5U,机床X轴Y轴工作台定位控制程序 全部使用两轴直线插补 有自动定位,手动定位!手动控制有,点动一次按钮每次走设置的距离
三菱FX5U,机床X轴Y轴工作台定位控制程序!使用三菱J4-A系列伺服驱动器绝对位置系统,程序大小27000多步 1.本程序最多可做20个定位工序,全部使用两轴直线插补! 2.有自动定位,手动定位!手 ...
- android 如何实现多级树形结构图(至少5级)
============问题描述============ 现在遇到一个难题,项目中要用到多级树形结构图,可是不知道怎么实现.谁有源码最好! ============解决方案1============ ...
- uboot环境变量(设置bootargs向linux内核传递正确的参数)
http://blog.csdn.net/workhorse/article/details/7071428 这是我uboot的环境变量设置,在该设置下可以运行initram内核(从内存下载到nand ...
- Allegro PCB Design GXL (legacy) - 新建绘图(PCB),设置单位、坐标、栅格间距等参数
文章目录 新建绘图(PCB) 设置单位.坐标.栅格间距等参数 设置栅格颜色 新建绘图(PCB) 选择菜单 File > New- 新建 PCB,在 New Drawing 中: 点击 Brows ...
最新文章
- Linux下使用diff和patch制作及打补丁(已经实践可行!)
- 【学习笔记】17、函数(Function)的定义和调用
- 方法 手写promise_高级前端养成37js专精06之手写promise(上)
- matlab的一些关于块分类的函数~~~
- php 发送图片,利用PHP输入流发送图片
- java类的主体是_java入门知识
- ActiveMQ(14):Destination(目的地)高级特性
- IPv6带给互联网的新契机
- 五十九、备战蓝桥杯 - Java算法 (基础练习一)
- 一个正经的前端学习 开源 仓库(每日更新)-698道知识点
- 笔记-软考高项-错题笔记汇总3
- 天呐,经常用的sudo居然有漏洞?
- 【一步步学OpenGL 24】 -《阴影图技术2》
- 【学习笔记】数据结构之单链表(先进先出、先进后出)
- 【洛谷P3386】【模板】二分图匹配【网络流】
- PYGAME - Event 事件
- c++ 中对vector的使用方法
- CodeForces - 985E(Pencils and Boxes)
- 谷歌收购 ReCaptcha 2009
- 用Python实现Le'vy flight