Echarts在线免费图表

 
            myChart.showLoading();

var data1 = {
    "name": "flare",
    "children": [{
        "name": "data",
        "children": [{
            "name": "converters",
            "children": [{
                "name": "Converters",
                "value": 721
            }, {
                "name": "DelimitedTextConverter",
                "value": 4294
            }]
        }, {
            "name": "DataUtil",
            "value": 3322
        }]
    }, {
        "name": "display",
        "children": [{
            "name": "DirtySprite",
            "value": 8833
        }, {
            "name": "LineSprite",
            "value": 1732
        }, {
            "name": "RectSprite",
            "value": 3623
        }]
    }, {
        "name": "flex",
        "children": [{
            "name": "FlareVis",
            "value": 4116
        }]
    }, {
        "name": "query",
        label:{
            normal:{
                show:true
            }
        },
        "category": "tree2",
        itemStyle:{
            normal:{
                show: false,
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [{
                        offset: 0, color: 'green' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'white' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                },
                borderColor:'blue',
                borderWidth:2,
                shadowColor: 'rgba(0, 0, 0, 1)',
                shadowBlur: 10
            },
            emphasis:{
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [{
                        offset: 0, color: 'green' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'white' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                }
            }
        },
        "children": [{
            "name": "AggregateExpression",
            "value": 1616
        }, {
            "name": "And",
            "value": 1027
        }, {
            "name": "Maximum",
            "value": 843
        }, {
            "name": "methods",
            "children": [{
                "name": "add",
                "value": 593 //，
             //   "color":123 
            }, {
                "name": "and",
                "value": 330
            }, {
                "name": "average",
                "value": 287
            }, {
                "name": "count",
                "value": 277
            }]
        }, {
            "name": "Minimum",
            "value": 843
        }, {
            "name": "Not",
            "value": 1554
        }, {
            "name": "Or",
            "value": 970
        }]
    }]
};

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',

        initialTreeDepth: -1,

        name: 'tree1',

        data: [data1],

        top: '5%',
        left: '7%',
        bottom: '2%',
        right: '10%',

        symbolSize: 10,

        label: {
            normal: {
                position: 'left',
                verticalAlign: 'middle',
                align: 'right',
                color:'black'
            }
        },
        
        leaves: {
            label: {
                normal: {
                    position: 'right',
                    verticalAlign: 'middle',
                    align: 'left',
                }
            },
            itemStyle:{
            normal:{
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [{
                        offset: 0, color: 'red' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'blue' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                }
            }
        },
        },

        expandAndCollapse: true,

        animationDuration: 550,
        animationDurationUpdate: 750

    }]
});