新手必看！轻松上手echarts地图图表，30个实用案例教学，可视化数据不再难

ECharts 是一款功能强大的开源 JavaScript 图表库，它可以帮助我们轻松地将数据通过图表的形式展示出来。其中，地图图表是 ECharts 中一个非常有用的功能，可以帮助我们展示地理位置相关的数据。对于新手来说，掌握 ECharts 地图图表的制作并不难，本文将为你提供 30 个实用案例，让你轻松上手。

1. 基础地图图表

1.1 地图初始化

首先，我们需要引入 ECharts 和地图数据。以下是一个简单的地图初始化示例：

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

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图'
    },
    tooltip: {},
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['销量']
    },
    visualMap: {
        min: 0,
        max: 1000,
        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: 590},
                {name: '天津',value: 530},
                // ... 其他省份数据
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

1.2 地图样式调整

在实际应用中，我们可能需要对地图的样式进行调整，例如调整地图的颜色、字体等。以下是一个调整地图样式的示例：

series: [
    {
        name: '销量',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            normal: {
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },
            emphasis: {
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        },
        data:[
            {name: '北京',value: 590},
            {name: '天津',value: 530},
            // ... 其他省份数据
        ]
    }
]

2. 高级地图图表

2.1 动态地图

动态地图可以展示数据随时间变化的趋势。以下是一个动态地图的示例：

”`javascript var option = {

title: {
    text: '动态地图'
},
tooltip: {},
legend: {
    orient: 'vertical',
    left: 'left',
    data:['销量']
},
visualMap: {
    min: 0,
    max: 1000,
    left: 'left',
    top: 'bottom',
    text: ['高','低'],
    calculable: true
},
series: [
    {
        name: '销量',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            normal: {
                show: true
            },
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        },
        data:[
            {name: '北京',value: 590},
            {name: '天津',value: 530},
            // ... 其他省份数据
        ]
    }
]

};

// 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);

// 动态更新数据 setInterval(function () {

option.series[0].data = [
    {name: '北京',value: Math.round(Math.random() * 1000)},
    {name: '天津',value: Math.round(Math.random() * 1000)},
    // ... 其他省份数据
];