正文

轻松上手echarts地图图表：10个实用案例教你轻松绘制地理信息可视化

/0 浏览量
1009

ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以帮助我们轻松地将数据转换为可视化的图表。其中，地图图表作为 ECharts 的一个重要组成部分，能够帮助我们直观地展示地理信息。下面，我将通过10个实用案例，手把手教你如何轻松绘制 ECharts 地图图表。

案例一：中国地图基础展示

首先，我们需要引入 ECharts 和对应的地图数据。以下是一个简单的中国地图展示案例：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '中国地图基础展示'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'china',
            roam: true,
            data: [
                {name: '广东', value: Math.round(Math.random() * 1000)},
                {name: '北京', value: Math.round(Math.random() * 1000)},
                // ... 其他省份数据
            ]
        }
    ]
};

myChart.setOption(option);

案例二：世界地图基础展示

与案例一类似，这里展示如何使用世界地图数据：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入世界地图数据
require('echarts/map/js/world');

var myChart = echarts.init(document.getElementById('main'));

var option = {
    // ... 其他配置项
    geo: {
        map: 'world',
        roam: true,
        // ... 其他配置项
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'world',
            roam: true,
            data: [
                {name: '中国', value: Math.round(Math.random() * 1000)},
                {name: '美国', value: Math.round(Math.random() * 1000)},
                // ... 其他国家数据
            ]
        }
    ]
};

myChart.setOption(option);

案例三：中国地图热力图

热力图可以直观地展示不同区域的数值差异。以下是一个中国地图热力图的案例：

// ... 引入 ECharts 和中国地图数据

var myChart = echarts.init(document.getElementById('main'));

var option = {
    // ... 其他配置项
    series: [
        {
            name: '数据',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: [
                {name: '广东', value: [113.32446, 23.10229, Math.round(Math.random() * 1000)]},
                {name: '北京', value: [116.397128, 39.90923, Math.round(Math.random() * 1000)]},
                // ... 其他省份数据
            ]
        }
    ]
};

myChart.setOption(option);

案例四：省市区联动地图

在实际应用中，我们可能需要展示省市区联动的地图。以下是一个简单的案例：

// ... 引入 ECharts 和中国地图数据

var myChart = echarts.init(document.getElementById('main'));

var option = {
    // ... 其他配置项
    geo: {
        map: 'china',
        zoom: 1.2,
        // ... 其他配置项
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'china',
            zoom: 1.2,
            data: [
                {name: '广东省', value: Math.round(Math.random() * 1000)},
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                // ... 其他省份数据
            ]
        }
    ]
};

myChart.setOption(option);

案例五：地图上的折线图

在地图上绘制折线图，可以展示不同地区的变化趋势。以下是一个案例：

// ... 引入 ECharts 和中国地图数据

var myChart = echarts.init(document.getElementById('main'));

var option = {
    // ... 其他配置项
    geo: {
        map: 'china',
        // ... 其他配置项
    },
    series: [
        {
            name: '数据',
            type: 'lines',
            coordinateSystem: 'geo',
            data: [
                {name: '广东', value: [113.32446, 23.10229]},
                {name: '北京', value: [116.397128, 39.90923]},
                // ... 其他省份数据
            ],
            lineStyle: {
                color: '#f00',
                width: 2,
                opacity: 0.6,
                curveness: 0.2
            }
        },
        {
            name: '数据',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: [
                {name: '广东', value: [113.32446, 23.10229]},
                {name: '北京', value: [116.397128, 39.90923]},
                // ... 其他省份数据
            ],
            rippleEffect: {
                brushType: 'stroke'
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            symbolSize: 10,
            showEffectOn: 'render',
            hoverAnimation: true,
            itemStyle: {
                color: '#f00',
                shadowBlur: 10,
                shadowColor: '#333'
            }
        }
    ]
};

myChart.setOption(option);

案例六：地图上的散点图

散点图可以展示不同地区的数据分布。以下是一个案例：

// ... 引入 ECharts 和中国地图数据

var myChart = echarts.init(document.getElementById('main'));

var option = {
    // ... 其他配置项
    geo: {
        map: 'china',
        // ... 其他配置项
    },
    series: [
        {
            name: '数据',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [
                {name: '广东', value: [113.32446, 23.10229]},
                {name: '北京', value: [116.397128, 39.90923]},
                // ... 其他省份数据
            ],
            symbolSize: 10,
            itemStyle: {
                color: '#f00',
                shadowBlur: 10,
                shadowColor: '#333'
            }
        }
    ]
};

myChart.setOption(option);

案例七：地图上的饼图

饼图可以展示不同地区的占比情况。以下是一个案例：

// ... 引入 ECharts 和中国地图数据

var myChart = echarts.init(document.getElementById('main'));

var option = {
    // ... 其他配置项
    geo: {
        map: 'china',
        // ... 其他配置项
    },
    series: [
        {
            name: '数据',
            type: 'pie',
            coordinateSystem: 'geo',
            data: [
                {name: '广东', value: Math.round(Math.random() * 1000)},
                {name: '北京', value: Math.round(Math.random() * 1000)},
                // ... 其他省份数据
            ],
            radius: ['30%', '50%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

myChart.setOption(option);

案例八：地图上的柱状图

柱状图可以展示不同地区的数据对比。以下是一个案例：

// ... 引入 ECharts 和中国地图数据

var myChart = echarts.init(document.getElementById('main'));

var option = {
    // ... 其他配置项
    geo: {
        map: 'china',
        // ... 其他配置项
    },
    series: [
        {
            name: '数据',
            type: 'bar',
            coordinateSystem: 'geo',
            data: [
                {name: '广东', value: Math.round(Math.random() * 1000)},
                {name: '北京', value: Math.round(Math.random() * 1000)},
                // ... 其他省份数据
            ],
            itemStyle: {
                color: '#f00'
            }
        }
    ]
};

myChart.setOption(option);

案例九：地图上的折线-柱状混合图

在实际应用中，我们可能需要将折线图和柱状图结合使用。以下是一个案例：

// ... 引入 ECharts 和中国地图数据

var myChart = echarts.init(document.getElementById('main'));

var option = {
    // ... 其他配置项
    geo: {
        map: 'china',
        // ... 其他配置项
    },
    series: [
        {
            name: '数据',
            type: 'lines',
            coordinateSystem: 'geo',
            data: [
                // ... 折线图数据
            ],
            // ... 折线图样式配置
        },
        {
            name: '数据',
            type: 'bar',
            coordinateSystem: 'geo',
            data: [
                // ... 柱状图数据
            ],
            // ... 柱状图样式配置
        }
    ]
};

myChart.setOption(option);

案例十：自定义地图样式

在实际应用中，我们可能需要自定义地图样式，以满足特定的需求。以下是一个案例：

// ... 引入 ECharts 和中国地图数据

var myChart = echarts.init(document.getElementById('main'));

var option = {
    // ... 其他配置项
    geo: {
        map: 'china',
        // ... 其他配置项
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'china',
            // ... 地图样式配置
        }
    ]
};

myChart.setOption(option);

通过以上10个案例，相信你已经对 ECharts 地图图表有了更深入的了解。在实际应用中，你可以根据自己的需求，灵活运用这些案例，绘制出符合要求的地图图表。祝你在可视化领域取得更好的成绩！

-- 展开阅读全文 --