正文

新手必看！轻松上手echarts地图图表，10个实用案例教你绘制中国地图

/0 浏览量
0623

ECharts 是一个使用 JavaScript 实现的开源可视化库，它能够帮助开发者轻松地创建交互式图表。其中，地图图表是 ECharts 中非常受欢迎的一个功能，因为它可以直观地展示地理信息。对于新手来说，绘制地图图表可能有些挑战，但不用担心，本文将为你提供10个实用案例，帮助你轻松上手 ECharts 地图图表，特别是绘制中国地图。

1. 基础中国地图绘制

首先，你需要引入 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: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: Math.round(Math.random() * 1000)
        }]
    }]
};

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

2. 地图区域高亮

在地图上高亮显示特定区域，可以通过设置 selectedMode 属性来实现：

series: [{
    name: '中国',
    type: 'map',
    mapType: 'china',
    label: {
        show: true
    },
    selectedMode: 'single',
    data: [{
        name: '北京',
        selected: true
    }]
}]

3. 地图点击事件

为地图添加点击事件，可以通过监听 click 事件来实现：

myChart.on('click', function (params) {
    console.log(params.name);
});

4. 地图缩放与平移

ECharts 地图支持缩放和平移功能。你可以通过设置 roam 属性来启用这些功能：

series: [{
    name: '中国',
    type: 'map',
    mapType: 'china',
    label: {
        show: true
    },
    roam: true
}]

5. 地图自定义样式

你可以自定义地图的样式，例如颜色、边框等：

series: [{
    name: '中国',
    type: 'map',
    mapType: 'china',
    label: {
        show: true,
        color: '#fff'
    },
    itemStyle: {
        areaColor: '#323c48',
        borderColor: '#111'
    },
    data: [{
        name: '北京',
        value: Math.round(Math.random() * 1000)
    }]
}]

6. 地图添加热力图

在地图上添加热力图，可以展示数据的密集程度：

series: [{
    name: '中国',
    type: 'map',
    mapType: 'china',
    label: {
        show: true
    },
    data: [{
        name: '北京',
        value: Math.round(Math.random() * 1000)
    }],
    emphasis: {
        label: {
            show: true
        }
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    }
}]

7. 地图添加折线图

在地图上添加折线图，可以展示数据的趋势：

series: [{
    name: '中国',
    type: 'map',
    mapType: 'china',
    label: {
        show: true
    },
    data: [{
        name: '北京',
        value: Math.round(Math.random() * 1000)
    }],
    markLine: {
        silent: false,
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)}
        ]
    }
}]

8. 地图添加散点图

在地图上添加散点图，可以展示数据的具体位置：

series: [{
    name: '中国',
    type: 'map',
    mapType: 'china',
    label: {
        show: true
    },
    data: [{
        name: '北京',
        value: Math.round(Math.random() * 1000)
    }],
    markPoint: {
        symbol: 'pin',
        symbolSize: 50,
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)}
        ]
    }
}]

9. 地图添加柱状图

在地图上添加柱状图，可以展示数据的对比：

series: [{
    name: '中国',
    type: 'map',
    mapType: 'china',
    label: {
        show: true
    },
    data: [{
        name: '北京',
        value: Math.round(Math.random() * 1000)
    }],
    markBar: {
        symbol: 'pin',
        symbolSize: 50,
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)}
        ]
    }
}]

10. 地图添加自定义元素

在地图上添加自定义元素，可以展示更丰富的信息：

series: [{
    name: '中国',
    type: 'map',
    mapType: 'china',
    label: {
        show: true
    },
    data: [{
        name: '北京',
        value: Math.round(Math.random() * 1000)
    }],
    markPoint: {
        symbol: 'pin',
        symbolSize: 50,
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)}
        ],
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    formatter: '{b}: {c}'
                }
            }
        }
    }
}]

通过以上10个实用案例，相信你已经对 ECharts 地图图表有了更深入的了解。在实际应用中，你可以根据自己的需求，灵活运用这些案例，绘制出各种精美的地图图表。祝你在 ECharts 的世界里探索出一片新天地！

-- 展开阅读全文 --