1. 程式人生 > >基於 Echarts實現簡單網路拓撲

基於 Echarts實現簡單網路拓撲

基於 Echarts實現簡單網路拓撲實現

option = {
    title: {
        text: '簡單網路拓撲'
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series : [
        {
            type: 'graph',
            layout: 'none',
            symbolSize: 50,
            roam: true,
            label:
{ normal: { show: true } }, edgeSymbol: ['circle', 'arrow'], edgeSymbolSize: [4, 10], edgeLabel: { normal: { textStyle: { fontSize: 20 }
} }, data: [{ name: '伺服器1', x: 100, y: 100 }, { name: '伺服器2', x: 220, y: 310 }, { name: '路由器', x: 100, y:
200 }, { name: '伺服器4', x: 10, y: 300 }], // links: [], links: [{ source: '路由器', target: '伺服器1' }, { source: '路由器', target: '伺服器2' }, { source: '路由器', target: '伺服器4' }], lineStyle: { normal: { opacity: 0.9, width: 2, curveness: 0 } } } ] };