刚刚发现官网实例里边的数据其实在：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. （五）Redis之List

    一.List常用命令 两端添加 两端弹出 1.2. 两端添加和两端弹出 package myRedis01; import java.util.HashMap; import java.util.Li ...

  2. Spring Boot Redis 分布式缓存的使用

    一.pom 依赖 <!-- 分布式缓存 --> <dependency> <groupId>org.springframework.boot</groupId ...

  3. 在论坛中出现的比较难的sql问题：3(row_number函数 分组查询)

    原文:在论坛中出现的比较难的sql问题:3(row_number函数 分组查询) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所 ...

  4. SqlServer 多服务器管理配置报错：Ensure the agent startup account for 'x.x.x.x' has rights to login as target server, Access is denied.

    SQL Server 2012配置多服务器管理时,SSMS设置一直报错,配置失败: 解决方法: 1. 为SQL Server Agent单独创建一个账号,主服务器和目标服务器都创建一样的账号 2. 把 ...

  5. 笔记 - C#从头开始构建编译器 - 3

    视频与PR:https://github.com/terrajobst/minsk/blob/master/docs/episode-03.md 作者是 Immo Landwerth(https:// ...

  6. 表空间 oracle

    --create table create table table_name ( column1 varchar2(20) not null, column2 number(8) not null, ...

  7. 常用shell命令积累

    把学习工作中见到的shell命令积累下来 创建文件夹 mkdir 创建文件 touch 发送get请求 curl xxxxx 发送post请求 curl -d xxxxx

  8. Mediawiki 子页链接无效的问题

    添加下面的配置到 LocalSettings.php 中即可: # Enable subpages in the main namespace $wgNamespacesWithSubpages[NS ...

  9. impdp时报错ORA-39083&ORA-01917

    转自:http://www.codes51.com/article/detail_146662.html impdp时报错ORA-39083&ORA-01917ORA-39083: 对象类型 ...

  10. 【导出导入】IMPDP table_exists_action 参数的应用

    转自:https://yq.aliyun.com/articles/29337 当使用IMPDP完成数据库导入时,如遇到表已存在时,Oracle提供给我们如下四种处理方式:a.忽略(SKIP,默认行为 ...