刚刚发现官网实例里边的数据其实在：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. 通俗化理解Spring3 IoC的原理和主要组件

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

  2. 奇妙的算法【11】LeetCode-专属算法面试题汇总

    这个是LeetCode上面的编程训练专项页面,地址:https://leetcode-cn.com/explore/interview/card/top-interview-quesitons-in- ...

  3. Mysql对查询结果添加序列号

    ; as rownum,* from table1 :=和=的区别? "=",只有在set和update时才和:=一样,赋值的作用,其它都是等于的作用.鉴于此,用变量实现行号时,必 ...

  4. 八、wepy代码规范

    变量与方法尽量使用驼峰式命名,并且注意避免使用$开头. 以$开头的标识符为WePY框架的内建属性和方法,可在JavaScript脚本中以this.的方式直接使用,具体请参考API文档. 小程序入口.页 ...

  5. eclipse复制工作空间配置步骤

    多个workspace,把每个workspace的设置共享,省去每次都重新配置一次. 总结一下,复制工作空间配置步骤如下: [最好是在新的workspace创建项目之前操作] 1 使用eclipse新 ...

  6. VS code C++代码没有自动提示

    用了一段时间的VS code,发现一直都没有代码提示,奇了个怪?可能是插件有问题,于是重装C/C++,clang...等插件.结果......没用,

  7. 如何对SAP Leonardo上的机器学习模型进行重新训练

    Jerry之前的两篇文章介绍了如何通过Restful API的方式,消费SAP Leonardo上预先训练好的机器学习模型: 如何在Web应用里消费SAP Leonardo的机器学习API 部署在SA ...

  8. macro 标签，和静态文件，以及templates

    1 模板 -Templates 1 什么是模板 模板,在Flask中就是允许响应给用户看的网页在模板中,允许包含“占位变量”来表示动态的内容 模板最终也会被解析成字符串再响应给客户端,这一过程通常称为 ...

  9. c# Format() 方法

  10. Windows工作原理

    Windows工作原理中心思想 Windows工作原理的中心思想就是“动态链接”概念.Windows自身带有一大套函数,应用程序就是通过调用这些函数来实现它的用户界面和在屏幕上显示文本与图形的.这些函 ...