正文

轻松上手ECharts地图图表：10个实用案例，助你快速掌握数据可视化技巧

/0 浏览量
0507

案例一：中国省市区销售数据可视化

在商业分析中，展示中国各省市区销售数据是一种常见的需求。ECharts地图图表可以帮助我们直观地展示这些数据。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '中国省市区销售数据',
        subtext: '示例数据',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '销售数据',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: 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 = {
    title: {
        text: '全球疫情地图',
        subtext: '示例数据',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: function(params) {
            return params.name + '：' + params.value;
        }
    },
    visualMap: {
        min: 0,
        max: 10000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '确诊人数',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                // ... 全球各国疫情数据
            ]
        }
    ]
};

myChart.setOption(option);

案例三：城市交通流量分析

在交通管理领域，城市交通流量分析对于缓解交通拥堵具有重要意义。ECharts地图图表可以帮助我们直观地展示城市交通流量。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '城市交通流量分析',
        subtext: '示例数据',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 10000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '交通流量',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                // ... 各城市交通流量数据
            ]
        }
    ]
};

myChart.setOption(option);

案例四：全球人口密度分布

了解全球人口密度分布有助于我们更好地规划城市发展。ECharts地图图表可以直观地展示这一数据。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '全球人口密度分布',
        subtext: '示例数据',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '人口密度',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                // ... 全球各国人口密度数据
            ]
        }
    ]
};

myChart.setOption(option);

案例五：中国城市GDP排名

展示中国城市GDP排名，有助于我们了解各城市经济发展状况。ECharts地图图表可以直观地展示这一数据。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '中国城市GDP排名',
        subtext: '示例数据',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 30000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: 'GDP',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                // ... 各城市GDP数据
            ]
        }
    ]
};

myChart.setOption(option);

案例六：全球各国教育水平分布

了解全球各国教育水平分布，有助于我们更好地推动教育事业的发展。ECharts地图图表可以直观地展示这一数据。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '全球各国教育水平分布',
        subtext: '示例数据',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '教育水平',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                // ... 全球各国教育水平数据
            ]
        }
    ]
};

myChart.setOption(option);

案例七：中国城市空气质量排名

展示中国城市空气质量排名，有助于我们了解各城市空气质量状况。ECharts地图图表可以直观地展示这一数据。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '中国城市空气质量排名',
        subtext: '示例数据',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '空气质量',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                // ... 各城市空气质量数据
            ]
        }
    ]
};

myChart.setOption(option);

案例八：全球各国人均寿命分布

了解全球各国人均寿命分布，有助于我们关注全球人口健康问题。ECharts地图图表可以直观地展示这一数据。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '全球各国人均寿命分布',
        subtext: '示例数据',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 80,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '人均寿命',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                // ... 全球各国人均寿命数据
            ]
        }
    ]
};

myChart.setOption(option);

案例九：中国城市房价走势分析

展示中国城市房价走势，有助于我们了解各城市房地产市场状况。ECharts地图图表可以直观地展示这一数据。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '中国城市房价走势分析',
        subtext: '示例数据',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    visualMap: {
        min: 0,
        max: 30000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['北京', '上海', '广州', '深圳', '杭州', '南京', '武汉', '成都', '重庆', '天津'],
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '房价（元/平方米）',
            min: 0,
            max: 30000,
            interval: 5000,
            axisLabel: {
                formatter: '{value}'
            }
        }
    ],
    series: [
        {
            name: '房价走势',
            type: 'line',
            data: [
                // ... 各城市房价走势数据
            ]
        }
    ]
};

myChart.setOption(option);

案例十：全球各国GDP增长率分布

了解全球各国GDP增长率分布，有助于我们关注全球经济增长状况。ECharts地图图表可以直观地展示这一数据。

// 示例代码
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '全球各国GDP增长率分布',
        subtext: '示例数据',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}%'
    },
    visualMap: {
        min: 0,
        max: 10,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: 'GDP增长率',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                // ... 全球各国GDP增长率数据
            ]
        }
    ]
};

myChart.setOption(option);

通过以上10个实用案例，相信你已经对ECharts地图图表有了更深入的了解。在实际应用中，你可以根据自己的需求进行修改和调整，以达到最佳效果。祝你在数据可视化领域取得更多成就！

-- 展开阅读全文 --