Echarts-树状图(源码 含flare.json)
时间:2019-11-14
本文章向大家介绍Echarts-树状图(源码 含flare.json),主要包括Echarts-树状图(源码 含flare.json)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
刚刚发现官网实例里边的数据其实在:https://www.echartsjs.com/data/asset/data/flare.json
源码:
html:
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <script type="text/javascript" src="js/echarts.js"></script> 5 <script type="text/javascript" src="js/jquery-3.3.1.js"></script> 6 <script type="text/javascript" src="js/jsonTool.js"></script> 7 </head> 8 <body style="height: 600px; margin: 0"> 9 <div id="container" style="height: 100%"></div> 10 <script type="text/javascript"> 11 var dom = document.getElementById("container"); 12 var myChart = echarts.init(dom); 13 var app = {}; 14 option = null; 15 myChart.showLoading(); 16 $.get('data/flare.json', function (data) { 17 myChart.hideLoading(); 18 19 myChart.setOption(option = { 20 tooltip: { 21 trigger: 'item', 22 triggerOn: 'mousemove' 23 }, 24 series: [ 25 { 26 type: 'tree', 27 28 data: [data], 29 30 top: '18%', 31 bottom: '14%', 32 33 layout: 'radial', 34 35 symbol: 'emptyCircle', 36 37 symbolSize: 7, 38 39 initialTreeDepth: 3, 40 41 animationDurationUpdate: 750 42 43 } 44 ] 45 }); 46 }); 47 if (option && typeof option === "object") { 48 var startTime = +new Date(); 49 myChart.setOption(option, true); 50 var endTime = +new Date(); 51 var updateTime = endTime - startTime; 52 console.log("Time used:", updateTime); 53 } 54 </script> 55 </body> 56 </html>
效果图
原文地址:https://www.cnblogs.com/smartisn/p/11858441.html
- Basic Calculator 基本计算器-Leetcode
- python yield函数深入浅出理解
- 十分钟搞定 Tensorflow 服务
- datapump跨平台升级迁移的总结 (r8笔记第77天)
- Java中isAssignableFrom()方法与instanceof()方法用法
- 与Ajax同样重要的jQuery(1)
- Java中Class类详解、用法及泛化
- python 函数编程的位置参数、默认参数、关键字参数以及函数的递归
- Java子类的父类和要实现的接口有相同的方法/函数会冲突吗
- Java关键字 Finally执行与break, continue, return等关键字的关系
- #if 和#ifdef的区别
- python高阶函数:map(f,[list]),reduce(f,[list],可选初始值),
- 深入探讨 Java 类加载器
- 斐波那契查找原理详解与实现
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 「Workshop」第十三期:统计检验与多重矫正
- Linux内核参数调优
- 扒掉“缓冲区溢出”的底裤
- MySQL not exists 真的不走索引么?
- 「R」使用 tinyscholar 展示个人谷歌学术档案
- GC调优到底是什么
- VBA编写Ribbon Custom UI编辑器06——读取xml
- centos安装kubectl和minikube工具
- 性能测试必备命令(4)- pstree
- 你必须熟练使用的10条 Python 技巧
- 四叉树在碰撞检测中的应用
- 一些Redis很实用的工作技巧
- 设计模式(Design Patterns)Java版
- 一个PHP高性能、多并发、restful的工具库(基于multi_curl)
- Spring框架的设计模式