echarts的树状结构图学习1

   一、学习自上而下的树状结构图

             

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

var option = {
    tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
    },
    series:[
        {
            type: 'tree',
            data: [{
                    "name": "弃光电量 210万  1.98%",
                    "children": [
                        {
                            "name": "限电电量 110万 0.98%",
                            "children": [
                                {"name": "可惜"},
                                {"name": "哈哈"}
                            ]
                        },
                        {
                            "name": "故障电量 100万 1.00%",
                            "children": [
                                {"name": "本期", "value": 8833},
                                {"name": "同期", "value": 1732}
                            ]
                        }
                    ]
                }],
            left: '2%',
            right: '2%',
            top: '8%',
            bottom: '20%',
            orient: 'vertical',
            symbolSize: 15,
            edgeShape: 'polyline',
            expandAndCollapse: true,
            initialTreeDepth: 3,
            lineStyle: {
                width: 5
            },
            itemStyle:{
                backgroundColor: '#dddd'
            },
            label: {
                backgroundColor: '#fff',
                position: 'bottom',
                verticalAlign: 'middle',
                align: 'top',
                fontSize: 30
            },
            leaves: {
                label: {
                    position: 'top',
                    verticalAlign: 'bottom',
                    orient: 'horizontal',
                    align: 'left'
                }
            },
            emphasis: {
                focus: 'descendant'
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
        }
    ]
};

option && myChart.setOption(option);

二、具体的样式总结，此处转载

     https://www.cnblogs.com/wasbg/p/11269636.html

series（系列列表）

1，layout：树图的布局，有 正交 和 径向 两种（正交就是水平或垂直；径向就是以根节点为原点，每一层为一环）

2，orient：树图中 正交布局 的方向

3，symbol：标记的图形（默认：emptyCricle）

4，initialTreeDepth：树图初始展开的层级（深度）（默认：2）

5，itemStyle：树图中每个节点的样式

6，label：每个节点所对应的文本标签的样式

7，rich：自定义富文本样式，在标签中做出非常丰富的效果。

8，leaves：叶子节点的特殊配置

9，emphasis：树图中个图形和标签高亮的样式

10，data：数据格式是树状结构

11，lineStyle：定义树图边的样式

 备注：echarts树形图，分支过多，页面放不下，高度自适应方法 。

具体见地址：https://www.cnblogs.com/wasbg/p/11278539.html（个人没试过，大家可以试试。）