141Echarts - 树图(From Top to Bottom Tree)

简介: 141Echarts - 树图(From Top to Bottom Tree)
效果图

源代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="dist/extension/dataTool.js"></script>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 1024px;height:768px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      var option;
      myChart.showLoading();
      $.get('data/flare.json', function(data) {
        myChart.hideLoading();
        myChart.setOption(option = {
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          series: [{
            type: 'tree',
            data: [data],
            left: '2%',
            right: '2%',
            top: '8%',
            bottom: '20%',
            symbol: 'emptyCircle',
            orient: 'vertical',
            expandAndCollapse: true,
            label: {
              normal: {
                position: 'top',
                rotate: -90,
                verticalAlign: 'middle',
                align: 'right',
                fontSize: 9
              }
            },
            leaves: {
              label: {
                normal: {
                  position: 'bottom',
                  rotate: -90,
                  verticalAlign: 'middle',
                  align: 'left'
                }
              }
            },
            animationDurationUpdate: 750
          }]
        });
      });
      //myChart.setOption(option);
    </script>
  </body>
</html>
目录
相关文章
|
6月前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
167 1
147Echarts - 矩形树图(Gradient Mapping)
147Echarts - 矩形树图(Gradient Mapping)
65 0
146Echarts - 矩形树图(Basic Treemap)
146Echarts - 矩形树图(Basic Treemap)
213 0
145Echarts - 矩形树图(Show Parent Labels)
145Echarts - 矩形树图(Show Parent Labels)
77 0
|
3月前
|
资源调度 Apache 容器
Vue3使用echarts树图(tree)
本文介绍了如何在 Vue2 项目中使用 Echarts 实现树图(tree)功能。通过按需引入 Echarts 组件和相关依赖,文章详细展示了如何创建一个可自定义配置的树图组件 `TreeChart.vue`,包括树图数据源、容器尺寸、主题色等属性。此外,还提供了在线预览效果及代码示例,帮助读者快速实现树图功能。适用于需要展示层次结构数据的场景。
134 1
Vue3使用echarts树图(tree)
|
3月前
|
资源调度 JavaScript Apache
Vue2使用echarts树图(tree)
这篇文章介绍了如何在Vue 3框架中集成echarts库来创建一个树状图(Tree Chart)组件,支持自定义数据和交互事件。
165 0
Vue2使用echarts树图(tree)
144Echarts - 矩形树图(How $3.7 Trillion is Spent)
144Echarts - 矩形树图(How $3.7 Trillion is Spent)
50 0
143Echarts - 矩形树图(ECharts Option Query)
143Echarts - 矩形树图(ECharts Option Query)
65 0
|
11月前
142Echarts - 矩形树图(Disk Usage)
142Echarts - 矩形树图(Disk Usage)
37 0
|
1月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
61 1

热门文章

最新文章

下一篇
无影云桌面