贸易关系 - 可视化国家之间的国际贸易流

国际贸易关系网络

功能概述

本示例可视化国家之间的国际贸易关系。节点代表国家，按 GDP 或贸易量调整大小，连接显示进出口关系。线条粗细和箭头方向指示贸易量和流动方向。

核心特性实现

国家节点样式

const createCountryNode = (country: Country) => ({
    id: country.code,
    text: country.name,
    width: Math.sqrt(country.gdp) / 1000,
    height: Math.sqrt(country.gdp) / 1000,
    color: getRegionColor(country.region),
    data: { gdp: country.gdp, region: country.region }
});

贸易流连线

const createTradeLine = (trade: TradeRelationship) => {
    const volume = trade.exportVolume + trade.importVolume;
    const lineWidth = Math.log(volume) / 10;

    return {
        from: trade.exporter,
        to: trade.importer,
        text: `$${(volume / 1e9).toFixed(1)}B`,
        lineWidth: lineWidth,
        color: trade.surplus > 0 ? '#4CAF50' : '#f44336'
    };
};

区域分组

const groupByRegion = () => {
    const regions = ['North America', 'Europe', 'Asia', 'South America', 'Africa'];

    regions.forEach(region => {
        const countries = graphInstance.getNodes().filter(n => n.data.region === region);
        // 对分组的节点应用区域布局
    });
};

创意使用场景

经济分析：了解全球贸易模式和依赖关系。

政策规划：可视化贸易协定的影响。

市场研究：识别出口/进口机会。

供应链映射：追踪国际供应链。

教育：互动式教授全球经济学。