刚刚发现官网实例里边的数据其实在：https://www.echartsjs.com/data/asset/data/flare.json

源码：

html:

 <!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();

     $.get('data/flare.json', function (data) {

         myChart.hideLoading();

         myChart.setOption(option = {

             tooltip: {

                 trigger: 'item',

                 triggerOn: 'mousemove'

             },

             series: [

                 {

                     type: 'tree',

                     data: [data],

                     top: '18%',

                     bottom: '14%',

                     layout: 'radial',

                     symbol: 'emptyCircle',

                     symbolSize: 7,

                     initialTreeDepth: 3,

                     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>

效果图

Echarts-树状图(源码 含flare.json)的更多相关文章

  1. vue +echarts树状图

    <template> <div :class="className" :id="id" :style="{height:height ...

  2. 使用ECharts绘制网址径向树状图

    an.rustfisher.com有很多内容,很多页面.如果用一个树状图把所有页面展示出来会是什么效果? 第一时间想到了ECharts. 最后效果: https://an.rustfisher.com ...

  3. Highcharts 树状图(Treemap)

    Highcharts 树状图(Treemap) 树状图 series 配置 设置 series 的 type 属性为 treemap ,series.type 描述了数据列类型.默认值为 " ...

  4. 用D3.js画树状图

    做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...

  5. Android一个炫酷的树状图组织架构图开源控件实现过程

    Android一个炫酷的树状图组织架构图开源控件 文章目录 [1 简介] [2 效果展示] [3 使用步骤] [4 实现基本布局流程] [5 实现自由放缩及拖动] [6 实现添加删除及节点动画] [7 ...

  6. D3树状图给指定特性的边特别显示颜色

    D3作为前端图形显示的利器,功能之强,对底层技术细节要求相对比较多. 有一点,就是要理解其基本的数据和节点的匹配规则架构,即enter,update和exit原理,我前面的D3基础篇中有介绍过,不明白 ...

  7. D3树状图异步按需加载数据

    D3.js这个绘图工具,功能强大不必多说,完全一个Data Driven Document的绘图工具,用户可以按照自己的数据以及希望实现的图形,随心所欲的绘图. 图形绘制,D3默认采用的是异步加载,但 ...

  8. SqlServer-无限递归树状图结构设计和查询

    在现实生活中,公司的部门设计会涉及到很多子部门,然后子部门下面又存在子部门,形成类似判断的树状结构,比如说评论楼中楼的评论树状图,职位管理的树状图结构等等,实现类似的树状图数据结构是在开发中经常出现的 ...

  9. Android开源图表之树状图和饼状图的官方示例的整理

    最近由于工作需要,所以就在github上搜了下关于chart的三方框架 官方地址https://github.com/PhilJay/MPAndroidChart 由于工作需要我这里整理了一份Ecli ...

随机推荐

  1. 北京大学1001ACM——高精度类型题总结

    题目描述: ExponentiationTime Limit: 500MS   Memory Limit: 10000KTotal Submissions: 80517   Accepted: 190 ...

  2. MarkDown 语法记录

    Markdown是一种纯文本格式的标记语言.通过简单的标记语法,它可以使普通文本内容具有一定的格式. 为啥要用 MarkDown 呢? 优点 1.因为是纯文本,所以只要支持Markdown的地方都能获 ...

  3. ELK日志分析系统的搭建

    一.ELK简介 ELK是Elasticsearch.Logstash.Kibana的简称,这三者是核心组件. Elasticsearch是数据存储.搜索.分析引擎,功能非常强大:Logstash是日志 ...

  4. PHP函数问题

    有时候,运行nginx和PHP CGI(PHP FPM)web服务的Linux服务器,突然系统负载上升,用top命令查看,很多phpcgi进程的CPU利用率接近100%后来通过跟踪发现,这种情况与PH ...

  5. JavaScript监听回车事件

    记录一下,兼容性也考虑到了,原文地址:JavaScript 监听回车事件 JS监听某个输入框 //回车事件绑定 $('#search_input').bind('keyup', function(ev ...

  6. jQuery效果函数

    jQuery有很我的效果可以实现,比如说淡入淡出的效果:<html>    <head>        <style>            #box{width: ...

  7. vue 有条件加载组件 执行某方法后再渲染组件

    <component :is="currentCom"></component>   import Grid from './component/grid' ...

  8. Java集合--ArrayList,LinkedList性能分析

    转载请注明出处:http://www.cnblogs.com/skywang12345/p/3308900.html 第1部分 List概括 先回顾一下List的框架图 (01) List 是一个接口 ...

  9. Java中程序初始化的顺序

    1,在一个类的内部(不考虑它是另一个类的派生类):很多人认为,类的成员变量是在构造方法调用之后再初始化的,先不考虑这种观点的正确性,先看一下下面的代码: class Test01...{ public ...

  10. 转 java 中int String类型转换

    转自licoolxue https://blog.csdn.net/licoolxue/article/details/1533364 int -> String int i=12345;Str ...