echarts 基础树图

下定决心，好好过一天 ~

var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

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

myChart.showLoading(); //显示加载
$.get(ROOT_PATH + '/data/asset/data/flare.json', function (data) {
    myChart.hideLoading();

    data.children.forEach(function (datum, index) {
        index % 2 === 0 && (datum.collapsed = true); //选择展示于不展示
    });

    myChart.setOption(option = {
        tooltip: {
            trigger: 'item', //数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
            triggerOn: 'mousemove' //鼠标移动时触发，还有click等等时触发
        },
        series: [
            {
                type: 'tree', //树图
                data: [data], //采用类似json格式的类型表示
                top: '1%',
                left: '7%',
                bottom: '1%',
                right: '20%',
                symbolSize: 7, //标志的大小
                label: { //树图的标签就是那个点
                    position: 'left',
                    verticalAlign: 'middle', //文字垂直对齐方式
                    align: 'right', //文字水平对齐方式
                    fontSize: 9
                },

                leaves: { //叶子节点的特殊设置
                    label: {
                        position: 'right',
                        verticalAlign: 'middle',
                        align: 'left'
                    }
                },

                emphasis: {
                    focus: 'descendant' //聚焦所有子孙节点
                },

                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
    });
});

option && myChart.setOption(option);

数据类型：