正文

教你轻松绘制ECharts地图散点图：两种类型，实操技巧大公开

/0 浏览量
0517

在数据可视化领域，ECharts地图散点图是一种非常实用的图表类型，它能够直观地展示地理位置与数据之间的关系。今天，我们就来聊聊如何轻松绘制ECharts地图散点图，包括两种类型以及一些实用的实操技巧。

地图散点图类型

1. 普通散点图

普通散点图是最基础的地图散点图类型，它通过散点的大小、颜色、形状等属性来表示数据的数值。

2. 3D散点图

3D散点图在普通散点图的基础上增加了深度维度，使得数据展示更加立体和生动。

实操技巧

1. 选择合适的地图

在绘制地图散点图之前，首先要选择合适的地图。ECharts提供了丰富的地图数据，包括世界地图、中国地图、省份地图等。根据你的数据特点，选择最合适的地图。

2. 地图配置

在ECharts中，地图配置主要包括以下几个方面：

  • mapType：指定地图类型，如china、world等。
  • center：设置地图的中心点坐标。
  • zoom：设置地图的缩放比例。
  • roam：是否开启鼠标滚轮或拖拽缩放地图。

以下是一个简单的地图配置示例：

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

var option = {
    title: {
        text: '中国地图散点图'
    },
    tooltip: {
        trigger: 'item'
    },
    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: 'scatter',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46,39.92,50]},
                {name: '上海', value: [121.48,31.22,60]}
            ],
            symbolSize: function (val) {
                return val[2] / 10;
            },
            label: {
                normal: {
                    formatter: '{b}: {c}',
                    position: 'right',
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: 'rgba(120, 36, 50, 0.5)',
                    shadowOffsetY: 5,
                    label: {
                        show: true,
                        formatter: '{b}: {c}'
                    }
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            }
        }
    ]
};

myChart.setOption(option);

3. 散点图配置

散点图配置主要包括以下几个方面：

  • type：指定图表类型为scatter。
  • coordinateSystem：指定坐标系类型，这里使用geo。
  • data：散点数据，包括名称和值。
  • symbolSize：散点大小，可以是一个固定的值或函数。
  • label：散点标签配置。
  • itemStyle：散点样式配置。

4. 交互效果

为了提高地图散点图的可读性，可以添加一些交互效果，如点击散点显示详细信息、鼠标悬停显示标签等。

总结

通过以上介绍，相信你已经掌握了绘制ECharts地图散点图的基本技巧。在实际应用中，可以根据自己的需求调整地图配置、散点图配置以及交互效果，以达到最佳的展示效果。希望这篇文章能对你有所帮助！

-- 展开阅读全文 --