刚刚发现官网实例里边的数据其实在：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. （十三）SpringBoot之Spring-Data-Jpa（二）CRUD实现以及添加自定义方法

    一.jpa中添加自定义方法 http://blog.csdn.net/qq_23660243/article/details/43194465 二.案例 1.3 引入jpa依赖 <depende ...

  2. IQueryable vs. IEnumerable

    IQueryable<T> extends the IEnumerable<T> interface IEnumerable<T> is great for wor ...

  3. Ubuntu 14.04 用户如何安装深度音乐播放器和百度音乐插件

    播放本地音乐或者收听国外的音乐电台,Ubuntu 14.04 自带的音乐播放器 Rhythmbox 完全能够满足,但是如果你想有像酷狗那样的国内播放器就需要折腾一下,还好有深度音乐播放器,这是一款完全 ...

  4. GC案例

    FGC----jmap -histo:live导致 线上某服务的老年代配置了CMS,但却在gc.log发现连续Full GC的问题.JVM参数配置如下: -XX:+UseCMSInitiatingOc ...

  5. apidoc 工具的使用

    使用rest framerok时,需要写API接口文档,此时就需要用到 apidoc(个人觉得这个用的比较顺手) 需要安装nodejs,,, windows 下 1 然后验证是否安装成功  node ...

  6. springmvc，hibernate整合时候出现Cannot load JDBC driver class 'com.mysql.jdbc.Driver

    原因:不清楚是什么原因,哪位知道可以给我留言,不胜感激! 解决方法: 1.把mysql的驱动包放到你项目的WEB-INF目录下的lib目录中2.要mysql的驱动包放在tomcat/lib目录下

  7. Nginx 的关键组件的介绍

    本文章主要介绍Nginx本身功能,不依赖第三方的任何模块.介绍常用的组件功能:反向代理.负载均衡.Http服务器.正向代理 反向代理(Reverse Proxy): 什么是反向代理呢?本人最直接的理解 ...

  8. Djang drf：APIView源码分析

    Django REST framework 简介   在序列化与反序列化时,虽然操作的数据不尽相同,但是执行的过程却是相似的,也就是说这部分代码是可以复用简化编写的.        开发REST AP ...

  9. Linux 01 Liunx系统简介

    Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.它能运行主要的UNIX工具软件.应用程序和网络协议.它支持32位 ...

  10. 查看python和NumPy版本和安装路径

    记录查看Python和NumPy版本以及路径的几条命令 # 查看Python版本及路径 python -V python -c "import sys;print(sys.executabl ...