Echart-无需json文件的树状图(源码)超级简单,小白的福音
源码:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/jsonTool.js"></script>
</head>
<body style="height: 600px; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
myChart.showLoading();
var data=
{
"name": "flare",
"children": [
{
"name": "analytics",
"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}
]
}
]
}
]
}; myChart.hideLoading(); myChart.setOption(option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree', data: [data], top: '1%',
left: '7%',
bottom: '1%',
right: '20%', symbolSize: 7, label: {
normal: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 9
}
}, leaves: {
label: {
normal: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
}
}, expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
}); if (option && typeof option === "object") {
var startTime = +new Date();
myChart.setOption(option, true);
var endTime = +new Date();
var updateTime = endTime - startTime;
console.log("Time used:", updateTime);
}
</script>
</body>
</html>
Echart-无需json文件的树状图(源码)超级简单,小白的福音的更多相关文章
- Echarts-树状图(源码 含flare.json)
刚刚发现官网实例里边的数据其实在:https://www.echartsjs.com/data/asset/data/flare.json 源码: html: <!DOCTYPE html> ...
- ztree 文件夹类型的 树状图
未套程序的源代码: 链接:http://pan.baidu.com/s/1nuHbxhf 密码:4aw2 已套程序的源代码: css样式: /*发布邮件 选择领导弹窗*/ .xuandao{ disp ...
- D3.js系列——布局:弦图和集群图/树状图
一.弦图 1.弦图是什么 弦图(Chord),主要用于表示两个节点之间的联系的图表.两点之间的连线,表示谁和谁具有联系. 2.数据 初始数据为: var city_name = [ "北京& ...
- 用D3.js画树状图
做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...
- 使用ECharts绘制网址径向树状图
an.rustfisher.com有很多内容,很多页面.如果用一个树状图把所有页面展示出来会是什么效果? 第一时间想到了ECharts. 最后效果: https://an.rustfisher.com ...
- D3树状图给指定特性的边特别显示颜色
D3作为前端图形显示的利器,功能之强,对底层技术细节要求相对比较多. 有一点,就是要理解其基本的数据和节点的匹配规则架构,即enter,update和exit原理,我前面的D3基础篇中有介绍过,不明白 ...
- D3树状图异步按需加载数据
D3.js这个绘图工具,功能强大不必多说,完全一个Data Driven Document的绘图工具,用户可以按照自己的数据以及希望实现的图形,随心所欲的绘图. 图形绘制,D3默认采用的是异步加载,但 ...
- ArcGIS教程:树状图
摘要 构造可显示特征文件里连续合并类之间的属性距离的树示意图(树状图). 使用方法 · 输入特征文件必须採用预定的特征文件格式. 特征文件可使用 Iso 聚类或创建特征工具来创建.该文件必须至少包括两 ...
- bzoj 4871: [Shoi2017]摧毁“树状图”
4871: [Shoi2017]摧毁“树状图” Time Limit: 25 Sec Memory Limit: 512 MBSubmit: 53 Solved: 9[Submit][Status ...
随机推荐
- 使用Feign通过服务名调用服务,找不到服务
fegineureka 报错环境: eureka注册中心在远程服务器上 本地服务注册到远程的eureka注册中心 本地服务通过Fegin组件+服务名调用服务 报错时,注册中心的情况: Applicat ...
- 【转载】 C#中日期类型DateTime的日期加减操作
在C#开发过程中,DateTime数据类型用于表示日期类型,可以通过DateTime.Now获取当前服务器时间,同时日期也可以像数字一样进行加减操作,如AddDay方法可以对日期进行加减几天的操作,A ...
- HTML5页面介绍
1.<!DOCTYPE html> 文档声明:用于告诉浏览器使用html哪个版本的标准解析页面,此写法代表使用html5的标准去解析 2.<html> 根标签, ...
- lumen中安装及使用redis作为cache
1.安装redis模块在compose.json的require中添加 "predis/predis": "*","illuminate/redi ...
- linux 安装mysql(rpm文件安装)
三 卸载旧版本的MySql (没有的话,则跳过此步骤) 1.查看旧版本MySql rpm -qa | grep mysql 将会列出旧版本MySql的组件列表,如: ...
- 浅谈sqoop
1.sqoop的概述a.sqoop 是一款工具,是appche 旗下的一款工具,主要是负责 hadoop与RDBMS之间的数据迁移,即从hadoop 文件系统 导出数据到RDBMS,从RDBMS导入数 ...
- seo域名选择
1-1第一选域名: 1,简单好记,有意义. 2,后缀首选com 其次cn 1-2购买域名网站有 1,阿里云 2,godaddy 3 ,景安 购买是可以在这三个域名平台都看看价格有些不一样.(可以省钱) ...
- php 图片与base64互转
header('Content-type:text/html;charset=utf-8'); //读取图片文件,转换成base64编码格式 $image_file = '1.png'; $image ...
- nginx配置文件详解【nginx.conf】
#基本配置: #user nobody;#配置worker进程运行用户worker_processes 1;#配置工作进程数目,根据硬件调整.通常等于CPU数量或者2倍于CPU数量 比如四核电脑(可以 ...
- 2. 软件有很多种,也有各种分类办法: ShrinkWrap (在包装盒子里面的软件,软件在CD/DVD上); Web APP (基于网页的软件); Internal Software (企业或学校或某组织内部的软件); Games (游戏); Mobile Apps (手机应用); Operating Systems (操作系统); Tools
选取对你最相关的一类软件, 请回答:(web app) 1) 此类软件是什么时候开始出现的, 这些软件是怎么说服你(陌生人)成为他们的用户的? 他们的目标都是盈利么? 他们的目标都是赚取用户 ...