如何用Echarts Graph提升網頁數據可視化效果

一、選取合適的圖表類型

Echarts Graph是一款基於數據鏈接關係的可視化組件，支持包括關係圖、樹圖、力導向圖、桑基圖等多種類型。在實際應用中，我們需要根據數據的特點和需求選取合適的圖表類型。

例如，當數據節點之間存在複雜的關係鏈條時，可以使用關係圖來展示數據之間的關係；而在需要展示數據流向時，可以使用桑基圖。在選取圖表類型時，我們需要充分考慮數據的特點和展示目的。

//示例代碼：生成力導向圖
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    title: {
        text: '力導向圖示例'
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series : [
        {
            type: 'graph',
            layout: 'force',
            symbolSize: 50,
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '節點1'},
                {name: '節點2'},
                {name: '節點3'},
                {name: '節點4'},
                {name: '節點5'}
            ],
            links: [
                {source: '節點1', target: '節點2'},
                {source: '節點1', target: '節點3'},
                {source: '節點2', target: '節點4'},
                {source: '節點3', target: '節點5'},
                {source: '節點4', target: '節點5'}
            ],
            emphasis: {
                lineStyle: {
                    width: 2.5
                }
            },
            force: {
                repulsion: 1000,
                edgeLength: 200
            }
        }
    ]
});

二、優化節點形狀和顏色

一般情況下，節點的形狀和顏色可以用來表示節點的重要程度或者屬性值。為了讓數據更加直觀易懂，我們可以通過節點的形狀、大小、顏色等屬性來展示數據的不同屬性。

例如，在展示地理位置分布時，可以將節點形狀設置成各省份的地圖輪廓，並通過節點大小、顏色來表示該省份的相關指標；在展示人物關係時，可以設置節點形狀為人物頭像，並通過節點的顏色和大小來表示人物的重要程度。

//示例代碼：優化節點形狀和顏色
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    title: {
        text: '節點形狀和顏色示例'
    },
    series: [
        {
            type: 'graph',
            layout: 'force',
            symbolSize: 50,
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '節點1', itemStyle: {color: '#c23531'}},
                {name: '節點2', itemStyle: {color: '#2f4554'}},
                {name: '節點3', itemStyle: {color: '#61a0a8'}},
                {name: '節點4', itemStyle: {color: '#d48265'}},
                {name: '節點5', itemStyle: {color: '#91c7ae'}}
            ],
            links: [
                {source: '節點1', target: '節點2'},
                {source: '節點1', target: '節點3'},
                {source: '節點2', target: '節點4'},
                {source: '節點3', target: '節點5'},
                {source: '節點4', target: '節點5'}
            ],
            emphasis: {
                lineStyle: {
                    width: 2.5
                }
            },
            force: {
                repulsion: 1000,
                edgeLength: 200
            }
        }
    ]
});

三、交互動畫效果

與靜態可視化相比，交互動畫可以使數據更加生動、直觀，提升用戶體驗。在Echarts Graph中，我們可以通過設置不同的動畫效果來增強交互。

例如，在節點聚焦時可以設置節點的大小、顏色變化；在切換布局時可以設置切換動畫等。

//示例代碼：添加交互動畫效果
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    title: {
        text: '交互動畫效果示例'
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series : [
        {
            type: 'graph',
            layout: 'force',
            symbolSize: 50,
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '節點1', itemStyle: {color: '#c23531'}},
                {name: '節點2', itemStyle: {color: '#2f4554'}},
                {name: '節點3', itemStyle: {color: '#61a0a8'}},
                {name: '節點4', itemStyle: {color: '#d48265'}},
                {name: '節點5', itemStyle: {color: '#91c7ae'}}
            ],
            links: [
                {source: '節點1', target: '節點2'},
                {source: '節點1', target: '節點3'},
                {source: '節點2', target: '節點4'},
                {source: '節點3', target: '節點5'},
                {source: '節點4', target: '節點5'}
            ],
            emphasis: {
                lineStyle: {
                    width: 2.5
                }
            },
            force: {
                repulsion: 1000,
                edgeLength: 200
            }
        }
    ]
});

//節點聚焦時大小變化動畫效果
chart.on('mouseover', function (params) {
    if (params.dataType === 'node') {
        chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: params.dataIndex
        });
        chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: params.dataIndex
        });
        chart.dispatchAction({
            type: 'emphasis',
            seriesIndex: 0,
            dataIndex: params.dataIndex
        });
    }
});

//切換布局時的動畫效果
chart.on('click', function () {
    chart.setOption({
        series: [{
            type: 'graph',
            layout: layout === 'force' ? 'circular' : 'force',
            force: {
                repulsion: 1000,
                edgeLength: 200
            }
        }]
    });
});

四、加入工具箱和數據篩選功能

在數據量較大時，我們可以通過添加工具箱來方便用戶進行數據篩選和查看。例如，在關係圖中，我們可以將篩選條件設置為節點的類型或屬性值，並通過工具箱來進行篩選。

//示例代碼：加入工具箱和數據篩選功能
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    title: {
        text: '工具箱和數據篩選示例'
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    toolbox: {
        feature: {
            dataView: {
                readOnly: false
            },
            restore: {},
            saveAsImage: {}
        }
    },
    series : [
        {
            type: 'graph',
            layout: 'force',
            symbolSize: 50,
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '節點1', itemStyle: {color: '#c23531'}, category: 1},
                {name: '節點2', itemStyle: {color: '#2f4554'}, category: 2},
                {name: '節點3', itemStyle: {color: '#61a0a8'}, category: 1},
                {name: '節點4', itemStyle: {color: '#d48265'}, category: 1},
                {name: '節點5', itemStyle: {color: '#91c7ae'}, category: 2}
            ],
            links: [
                {source: '節點1', target: '節點2'},
                {source: '節點1', target: '節點3'},
                {source: '節點2', target: '節點4'},
                {source: '節點3', target: '節點5'},
                {source: '節點4', target: '節點5'}
            ],
            categories: [
                {name: '數據類別1'},
                {name: '數據類別2'}
            ],
            emphasis: {
                lineStyle: {
                    width: 2.5
                }
            },
            force: {
                repulsion: 1000,
                edgeLength: 200
            }
        }
    ]
});

//添加篩選條件
chart.on('legendselectchanged', function (params) {
    var selected = params.selected;
    chart.setOption({
        series: [{
            data: data.filter(function (dataItem) {
                return selected[dataItem.category];
            })
        }]
    });
});