Echarts在线免费图表

 
            myChart.showLoading();

var data2 = {
    "name": "flare",
    "children": [{
            "name": "flex",
            "children": [{
                "name": "FlareVis",
                "value": 4116
            }]
        },
        {
            "name": "scale",
            "children": [{
                    "name": "IScaleMap",
                    "value": 2105
                },
                {
                    "name": "LinearScale",
                    "value": 1316
                },
                {
                    "name": "LogScale",
                    "value": 3151
                },
                {
                    "name": "OrdinalScale",
                    "value": 3770
                },
                {
                    "name": "QuantileScale",
                    "value": 2435
                },
                {
                    "name": "QuantitativeScale",
                    "value": 4839
                },
                {
                    "name": "RootScale",
                    "value": 1756
                },
                {
                    "name": "Scale",
                    "value": 4268
                },
                {
                    "name": "ScaleType",
                    "value": 1821
                },
                {
                    "name": "TimeScale",
                    "value": 5833
                }
            ]
        },
        {
            "name": "display",
            "children": [{
                "name": "DirtySprite",
                "value": 8833
            }]
        }
    ]
};

myChart.hideLoading();

myChart.setOption(option = {
    tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
    },
    legend: {
        top: '2%',
        left: '3%',
        orient: 'vertical',
        data: [{
                name: 'tree1',
                icon: 'rectangle'
            },
            {
                name: 'tree2',
                icon: 'rectangle'
            }
        ],
        borderColor: '#c23531'
    },
    series: [
        {
            type: 'tree',
            name: 'tree2',
            data: [data2],
            top: '20%',
            left: '60%',
            bottom: '22%',
            right: '18%',

            symbolSize: 7,

            label: {
                normal: {
                    position: 'left',
                    verticalAlign: 'middle',
                    align: 'right'
                }
            },

            leaves: {
                label: {
                    normal: {
                        position: 'right',
                        verticalAlign: 'middle',
                        align: 'left'
                    }
                }
            },

            expandAndCollapse: true,

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