刚刚发现官网实例里边的数据其实在：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之freeMarker基本使用

    一.案例 1.1 pom.xml <dependencies> <!-- 除去logback支持 --> <dependency> <groupId>o ...

  2. 通俗化理解Spring3 IoC的原理和主要组件

      ♣什么是IoC? ♣通俗化理解IoC原理 ♣IoC好处 ♣工厂模式 ♣IoC的主要组件 ♣IoC的应用实例 ♣附:实例代码 1.什么是IoC(控制反转)? Spring3框架的核心是实现控制反转( ...

  3. Nginx与负载均衡

    Nginx,首先是一款轻量级的Web服务器,其特点是占有内存少,并发能力强,大厂用户有:百度.新浪.网易.腾讯等.其次,它是一款反向代理服务器:第三,它还是一款电子邮件(IMAP/POP3)代理服务器 ...

  4. [转载]JDK、SDK、J2EE、J2SE、J2ME的区别

    [转载]JDK.SDK.J2EE.J2SE.J2ME的区别 来源: https://www.cnblogs.com/liangyihui/p/5905875.html Java的名词真的是多啊 JDK ...

  5. Python考试_第三次

    - python 全栈11期月考题 一 基础知识:(70分) 1.文件操作有哪些模式?请简述各模式的作用(2分) 2.详细说明tuple.list.dict的用法,以及它们的特点(3分) 3.解释生成 ...

  6. 为什么领域模型对于架构师如此重要？ https://blog.csdn.net/qq_40741855/article/details/84835212

    为什么领域模型对于架构师如此重要? https://blog.csdn.net/qq_40741855/article/details/84835212 2018年12月05日 14:30:19 绝圣 ...

  7. 一个简单的window.onscroll实例

    鉴于better-scroll实现这个效果很复杂,想用最原生的效果来实现吸顶效果 一个简单的window.onscroll实例,可以应用于移动端 demo 一个简单的window.onscroll实例 ...

  8. MySQL5.7.28免安装版配置

    下载 安装配置 问题及解决方案 一.下载 找到你要的版本点击“looking for the latest GA version?”切换,我这个安装的是5.7.28,然后往下拉: 找到免安装的压缩包: ...

  9. CPU的基本组成

    1.CPU是用来运算的(加法运算.乘法运算.逻辑运算(与.或.非)等) 2.运算操作涉及到数据输入(input).处理.数据输出(output).A和B是输入数据,加法运算时处理.C是输出数据. 3. ...

  10. vue学习（6）-路由（导入包；创建子组件；创建路由对象）传参，子路由，多个组件

    后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源 前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换(不会刷新页 ...