案例学习

 前端   小卒子   2024-10-13 13:09   64
  从零开始学习ECharts

使用 ECharts 实现高级图表应用：迁徙图、气象图、流向图

ECharts 是一个强大的数据可视化框架，支持丰富的图表类型，适用于多种复杂场景。在这篇博客中，我们将详细介绍如何使用 ECharts 实现一些高级图表应用，如迁徙图、气象图和流向图。这些图表在展示地理数据、流向数据和气象数据时非常实用，能够帮助用户直观地理解复杂的数据信息。我们将详细说明其使用方法，并提供多个代码示例，涵盖所有相关属性及方法。

一、迁徙图（Migration Map）

迁徙图用于展示不同地点之间的人员、物流等数据的迁移或流动情况。它能够直观地显示出从某个地点到其他地点的数据流向。

1. 示例：展示城市之间的迁移流动

我们使用 ECharts 的 geo 地理坐标系与 lines 系列来实现迁徙图。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>迁徙图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="migrationChart" style="width: 100%; height: 600px;"></div>
    <script>
        var migrationChart = echarts.init(document.getElementById('migrationChart'));

        var data = [
            [{name: '北京'}, {name: '上海', value: 95}],
            [{name: '北京'}, {name: '广州', value: 90}],
            [{name: '北京'}, {name: '深圳', value: 80}],
            [{name: '北京'}, {name: '杭州', value: 70}],
            [{name: '北京'}, {name: '南京', value: 60}]
        ];

        var geoCoordMap = {
            '北京': [116.4551, 40.2539],
            '上海': [121.4648, 31.2891],
            '广州': [113.5107, 23.2196],
            '深圳': [114.5435, 22.5439],
            '杭州': [119.5313, 29.8773],
            '南京': [118.8062, 31.9208]
        };

        function convertData(data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var fromCoord = geoCoordMap[data[i][0].name];
                var toCoord = geoCoordMap[data[i][1].name];
                if (fromCoord && toCoord) {
                    res.push({
                        fromName: data[i][0].name,
                        toName: data[i][1].name,
                        coords: [fromCoord, toCoord]
                    });
                }
            }
            return res;
        }

        var option = {
            title: {
                text: '迁徙图 - 北京到其他城市',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    if (params.seriesType === "lines") {
                        return params.data.fromName + " -> " + params.data.toName + " : " + params.data.value;
                    }
                }
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#404a59'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: [
                {
                    name: '迁徙路线',
                    type: 'lines',
                    coordinateSystem: 'geo',
                    zlevel: 1,
                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0.7,
                        color: '#fff',
                        symbolSize: 3
                    },
                    lineStyle: {
                        normal: {
                            color: '#a6c84c',
                            width: 0,
                            curveness: 0.2
                        }
                    },
                    data: convertData(data)
                },
                {
                    name: '迁徙路线',
                    type: 'lines',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0,
                        symbol: 'arrow',
                        symbolSize: 10
                    },
                    lineStyle: {
                        normal: {
                            color: '#a6c84c',
                            width: 1,
                            opacity: 0.6,
                            curveness: 0.2
                        }
                    },
                    data: convertData(data)
                }
            ]
        };

        migrationChart.setOption(option);
    </script>
</body>
</html>

说明

  • geo：使用地理坐标系绘制中国地图。
  • series (lines)：定义了迁徙路线的图表类型，effect 属性用于展示迁徙路径上的流动效果。
  • convertData：将数据转换为迁徙路径的格式，展示从一个城市到另一个城市的流向。

2. 配置说明

  • effect.show：是否展示迁徙的流动效果。
  • lineStyle.curveness：迁徙路径的曲度，值越大曲线越弯曲。
  • coordinateSystem：指定使用地理坐标系。

二、气象图（Weather Map）

气象图用于展示不同地区的天气、气温、降雨量等气象数据。我们可以通过结合 geo 地理坐标系与 scatter 系列绘制出展示不同城市气温的图表。

1. 示例：展示城市气温

var weatherChart = echarts.init(document.getElementById('weatherChart'));

var weatherData = [
    {name: '北京', value: [116.4551, 40.2539, 30]}, // [经度, 纬度, 温度]
    {name: '上海', value: [121.4648, 31.2891, 35]},
    {name: '广州', value: [113.5107, 23.2196, 28]},
    {name: '深圳', value: [114.5435, 22.5439, 27]}
];

var option = {
    title: {
        text: '全国城市气温分布图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return params.name + ' : ' + params.value[2] + '℃';
        }
    },
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#404a59'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '城市气温',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: function (val) {
                return val[2] / 2; // 根据温度控制气泡大小
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#ddb926'
                }
            },
            data: weatherData
        }
    ]
};

weatherChart.setOption(option);

说明

  • scatter：scatter 系列用于在地图上显示城市的气温数据。
  • symbolSize：根据温度大小调整气泡的大小，温度越高气泡越大。

三、流向图（Flow Map）

流向图用于展示某一维度的数据流动趋势，比如物流或水流的方向和量。我们通过 geo 系列和 lines 系列来实现流向的展示。

1. 示例：物流流向图

var flowChart = echarts.init(document.getElementById('flowChart'));

var flowData = [
    [{name: '北京'}, {name: '上海', value: 150}],
    [{name: '广州'}, {name: '深圳', value: 100}],
    [{name: '南京'}, {name: '杭州', value: 120}]
];

var option = {
    title: {
        text: '物流流向图',
        left: 'center'
    },
    geo: {
        map: 'china',
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#a6c84c',
                borderColor: '#111'
            }
        }
    },
    series: [
        {
            type: 'lines',
            coordinateSystem: 'geo',
            zlevel: 2,
            effect: {
                show: true,
                period: 6,
                trailLength: 0,
                symbol

: 'arrow',
                symbolSize: 15
            },
            lineStyle: {
                normal: {
                    color: '#a6c84c',
                    width: 2,
                    opacity: 0.6,
                    curveness: 0.2
                }
            },
            data: convertData(flowData)
        }
    ]
};

flowChart.setOption(option);

说明

  • lines：lines 系列展示物流流向，使用 effect.symbol 定义流动的效果。

结语

通过这些高级图表类型，ECharts 为我们提供了一个强大的数据可视化工具。无论是迁徙图、气象图，还是流向图，它们都能够在复杂数据的展示中发挥重要作用。