正文

轻松上手ECharts地图图表：10个实用案例，带你探索数据之美

/0 浏览量
0721

ECharts 地图图表是一种强大的可视化工具，能够将地理位置数据与统计数据结合起来，呈现出直观且富有吸引力的视觉效果。无论你是数据分析师、前端开发者还是对数据可视化感兴趣的用户，掌握 ECharts 地图图表的制作都是一项非常有用的技能。下面，我将通过10个实用案例，带你轻松上手ECharts地图图表的制作。

案例一：中国地图省份销量统计

主题句：通过中国地图，直观展示各省份的销量情况。

实现步骤：

  1. 准备中国地图数据。
  2. 使用 echarts.map 类型的图表。
  3. 将销量数据与地图省份进行关联。

代码示例：

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

var option = {
    title: {
        text: '中国地图省份销量统计'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '销量',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            show: true
        },
        data: [
            {name: '北京',value: Math.round(Math.random()*1000)},
            {name: '上海',value: Math.round(Math.random()*1000)},
            // ...其他省份数据
        ]
    }]
};

myChart.setOption(option);

案例二：全球热点城市温度分布

主题句：使用全球地图，展示不同城市的温度分布情况。

实现步骤：

  1. 准备全球地图数据。
  2. 使用 echarts.map 类型的图表。
  3. 将温度数据与地图城市进行关联。

代码示例：

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

var option = {
    title: {
        text: '全球热点城市温度分布'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: -50,
        max: 50,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '温度',
        type: 'map',
        mapType: 'world',
        roam: false,
        label: {
            show: true
        },
        data: [
            {name: 'New York',value: Math.round(Math.random() * 1000)},
            {name: 'Los Angeles',value: Math.round(Math.random() * 1000)},
            // ...其他城市数据
        ]
    }]
};

myChart.setOption(option);

案例三：城市交通流量实时监控

主题句：通过地图展示城市交通流量的实时变化。

实现步骤：

  1. 准备城市交通流量数据。
  2. 使用 echarts.map 类型的图表。
  3. 使用动态数据更新，实时展示流量变化。

代码示例：

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

var option = {
    title: {
        text: '城市交通流量实时监控'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '交通流量',
        type: 'map',
        mapType: 'city',
        roam: false,
        label: {
            show: true
        },
        data: [
            {name: '北京市',value: Math.round(Math.random() * 1000)},
            {name: '上海市',value: Math.round(Math.random() * 1000)},
            // ...其他城市数据
        ]
    }]
};

// 动态更新数据
setInterval(function () {
    option.series[0].data = option.series[0].data.map(function (item) {
        item.value = Math.round(Math.random() * 1000);
        return item;
    });
    myChart.setOption(option, true);
}, 1000);

myChart.setOption(option);

案例四：全球疫情分布图

主题句：使用全球地图，展示不同国家的疫情分布情况。

实现步骤：

  1. 准备全球疫情数据。
  2. 使用 echarts.map 类型的图表。
  3. 将疫情数据与地图国家进行关联。

代码示例：

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

var option = {
    title: {
        text: '全球疫情分布图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '疫情',
        type: 'map',
        mapType: 'world',
        roam: false,
        label: {
            show: true
        },
        data: [
            {name: '中国',value: Math.round(Math.random() * 1000)},
            {name: '美国',value: Math.round(Math.random() * 1000)},
            // ...其他国家数据
        ]
    }]
};

myChart.setOption(option);

案例五：中国城市人口密度分布

主题句：通过中国地图，展示不同城市的人口密度情况。

实现步骤：

  1. 准备中国城市人口密度数据。
  2. 使用 echarts.map 类型的图表。
  3. 将人口密度数据与地图城市进行关联。

代码示例：

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

var option = {
    title: {
        text: '中国城市人口密度分布'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 10000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '人口密度',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            show: true
        },
        data: [
            {name: '北京市',value: Math.round(Math.random() * 10000)},
            {name: '上海市',value: Math.round(Math.random() * 10000)},
            // ...其他城市数据
        ]
    }]
};

myChart.setOption(option);

案例六：全球GDP分布图

主题句：使用全球地图，展示不同国家的GDP分布情况。

实现步骤：

  1. 准备全球GDP数据。
  2. 使用 echarts.map 类型的图表。
  3. 将GDP数据与地图国家进行关联。

代码示例：

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

var option = {
    title: {
        text: '全球GDP分布图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: 'GDP',
        type: 'map',
        mapType: 'world',
        roam: false,
        label: {
            show: true
        },
        data: [
            {name: '中国',value: Math.round(Math.random() * 1000000)},
            {name: '美国',value: Math.round(Math.random() * 1000000)},
            // ...其他国家数据
        ]
    }]
};

myChart.setOption(option);

案例七：城市空气质量指数实时监控

主题句：通过地图展示城市空气质量指数的实时变化。

实现步骤：

  1. 准备城市空气质量指数数据。
  2. 使用 echarts.map 类型的图表。
  3. 使用动态数据更新，实时展示空气质量指数变化。

代码示例：

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

var option = {
    title: {
        text: '城市空气质量指数实时监控'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '空气质量指数',
        type: 'map',
        mapType: 'city',
        roam: false,
        label: {
            show: true
        },
        data: [
            {name: '北京市',value: Math.round(Math.random() * 500)},
            {name: '上海市',value: Math.round(Math.random() * 500)},
            // ...其他城市数据
        ]
    }]
};

// 动态更新数据
setInterval(function () {
    option.series[0].data = option.series[0].data.map(function (item) {
        item.value = Math.round(Math.random() * 500);
        return item;
    });
    myChart.setOption(option, true);
}, 1000);

myChart.setOption(option);

案例八：全球地震分布图

主题句：使用全球地图，展示不同地区的地震分布情况。

实现步骤：

  1. 准备全球地震数据。
  2. 使用 echarts.map 类型的图表。
  3. 将地震数据与地图地区进行关联。

代码示例：

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

var option = {
    title: {
        text: '全球地震分布图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 10,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '地震',
        type: 'map',
        mapType: 'world',
        roam: false,
        label: {
            show: true
        },
        data: [
            {name: '中国',value: Math.round(Math.random() * 10)},
            {name: '美国',value: Math.round(Math.random() * 10)},
            // ...其他地区数据
        ]
    }]
};

myChart.setOption(option);

案例九：城市降雨量分布图

主题句：通过中国地图，展示不同城市的降雨量分布情况。

实现步骤：

  1. 准备中国城市降雨量数据。
  2. 使用 echarts.map 类型的图表。
  3. 将降雨量数据与地图城市进行关联。

代码示例：

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

var option = {
    title: {
        text: '城市降雨量分布图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 200,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '降雨量',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            show: true
        },
        data: [
            {name: '北京市',value: Math.round(Math.random() * 200)},
            {name: '上海市',value: Math.round(Math.random() * 200)},
            // ...其他城市数据
        ]
    }]
};

myChart.setOption(option);

案例十：全球冰川融化速度分布图

主题句：使用全球地图，展示不同地区的冰川融化速度分布情况。

实现步骤：

  1. 准备全球冰川融化速度数据。
  2. 使用 echarts.map 类型的图表。
  3. 将冰川融化速度数据与地图地区进行关联。

代码示例：

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

var option = {
    title: {
        text: '全球冰川融化速度分布图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 10,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '冰川融化速度',
        type: 'map',
        mapType: 'world',
        roam: false,
        label: {
            show: true
        },
        data: [
            {name: '中国',value: Math.round(Math.random() * 10)},
            {name: '美国',value: Math.round(Math.random() * 10)},
            // ...其他地区数据
        ]
    }]
};

myChart.setOption(option);

通过以上10个实用案例，相信你已经对ECharts地图图表的制作有了初步的了解。在实际应用中，你可以根据需要调整地图类型、数据来源和视觉效果，以创造出更加丰富和个性化的数据可视化作品。

-- 展开阅读全文 --