【数据可视化】项目分布地图设计之增加项目数量标识

素颜马尾好姑娘i 2022-12-03 01:32 173阅读 0赞

## 上文效果 ##

上文[【数据可视化】项目分布地图设计之修改地图样式（点击可查看原文）][Link 1] 中，我们实现了陕西省地图上鼠标悬停显示数据的效果，在接下来的步骤中，我们将继续调整地图的样式，在每个地市增加一个显示项目数量多少的气泡，来直观的比较每个地市项目数量。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70_pic_center]

## 本节目标 ##

1.  每个地市增加一个显示项目数量多少的气泡，来直观的比较每个地市项目数量（symbolSize）

## 实现步骤 ##

基于[上文代码（点击查看）][Link 1]，实现功能

### 1. 每个地市增加一个显示项目数量多少的气泡，来直观的比较每个地市项目数量 ###

1.  我们之前创建了一个陕西省城市的数组。

var shanxiCity = [{"cp":[108.948024,34.263161],"name":"西安市"},
                            {"cp":[108.979608,34.916582],"name":"铜川市"},
                            {"cp":[107.14487,34.369315],"name":"宝鸡市"},
                            {"cp":[108.705117,34.333439],"name":"咸阳市"},
                            {"cp":[109.502882,34.499381],"name":"渭南市"},
                            {"cp":[109.49081,36.596537],"name":"延安市"},
                            {"cp":[107.028621,33.077668],"name":"汉中市"},
                            {"cp":[109.741193,38.290162],"name":"榆林市"},
                            {"cp":[109.029273,32.6903],"name":"安康市"},
                            {"cp":[109.939776,33.868319],"name":"商洛市"}]

1.  遍历数组，创建一个地图上项目分布的数据（含经纬度坐标）

> series中的coordinateSystem必须设置为 geo，即采用的坐标系统参考与geo中定义的地图保持一致；geo方式也只适用于面状地图数据，对点和线要素数据无效！

//创建一个散点数组，用于保存经纬度坐标以及项目数量，从而在地图上显示地市项目数量
            var cityProjData = [];
            //将城市数据整理到地图数据中
            shanxiCity.forEach(function(v) {
                // 地区名称
                var name = v.name;
                data.push({
                    name: name,
                    value: Math.round(Math.random() * 10 + 10)
                })
                cityProjData.push({
                    name: name,
                    value: v.cp.concat(Math.round(Math.random() * 10 + 10))//将坐标数组和项目数量组合到一个数组中
                })
            });

1.  在series中增加一个点的系列，类型可以选气球，圆形，很多。然后将我们呢拼好的数据加入到这个新增系列的data中

> symbol可选配置项：‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’  
> 当然，用了一圈，我发现最合适做这个功能的，还是pin和circle，但是circle有重叠。需要把城市的坐标调整一下。为了简单，这里就用pin了

{
                        name: '点',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: 'pin', //气泡 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
                        symbolSize: function (data) {
                            return data[2]*3;
                        },
                        emphasis: {
                            label: {
                                show: true,
                                formatter: function (param) {
                                    return param.data.value[2];
                                },
                                position: 'top'
                            }
                        },
                        itemStyle: {
                            shadowBlur: 10,
                            shadowColor: 'rgba(25, 100, 150, 0.5)',
                            shadowOffsetY: 5,
                            color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                                offset: 0,
                                color: 'rgb(129, 227, 238)'
                            }, {
                                offset: 1,
                                color: 'rgb(25, 183, 207)'
                            }])
                        },
                        zlevel: 6,
                        data: cityProjData,
                    }

1.  效果如下图所示，这里我们发现有个问题，当你鼠标悬停在地市区域上时，显示的是项目数，当你悬停到小气球上时，显示的是项目数：经度，维度，项目数。我们需要调整toolTip，让其根据不同的数据源，进行判断，从而实现数据显示的统一性  
    病症原因：两个series的数据不一样  
    ![在这里插入图片描述][20200901104216843.png_pic_center]

tooltip: {
 trigger: 'item',
 formatter: function(params) {
 var toolTiphtml = ''
 toolTiphtml += params.name+': '
 if(params.value.length>1) {
 toolTiphtml+='项目数：'+params.value[2]+" " 
 }else {
 toolTiphtml+='项目数：'+params.value+" "
 }
 return toolTiphtml;
 }
 },

1.  全部代码如下所示

## 实现效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70_pic_center 1]

[Link 1]: https://blog.csdn.net/xuexiiphone/article/details/108322993
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/60a8c98e2f334cb4a730790c64312c3d.png
[20200901104216843.png_pic_center]: /images/20221123/ba6f479b8d79463ea4b7f1bcfa56778b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/913935918da24fdba5d03f815c0f6373.png