数据可视化项目分布地图设计之增加项目数量标识
Posted 小魏的马仔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了数据可视化项目分布地图设计之增加项目数量标识相关的知识，希望对你有一定的参考价值。
上文效果
上文【数据可视化】项目分布地图设计之修改地图样式（点击可查看原文） 中，我们实现了陕西省地图上鼠标悬停显示数据的效果，在接下来的步骤中，我们将继续调整地图的样式，在每个地市增加一个显示项目数量多少的气泡，来直观的比较每个地市项目数量。
本节目标
- 每个地市增加一个显示项目数量多少的气泡，来直观的比较每个地市项目数量（symbolSize）
实现步骤
基于上文代码（点击查看），实现功能
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":"商洛市"]
- 遍历数组，创建一个地图上项目分布的数据（含经纬度坐标）
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))//将坐标数组和项目数量组合到一个数组中
)
);
- 在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,
- 效果如下图所示，这里我们发现有个问题，当你鼠标悬停在地市区域上时，显示的是项目数，当你悬停到小气球上时，显示的是项目数：经度，维度，项目数。我们需要调整toolTip，让其根据不同的数据源，进行判断，从而实现数据显示的统一性
病症原因：两个series的数据不一样
tooltip:
trigger: 'item',
formatter: function(params)
var toolTiphtml = ''
toolTiphtml += params.name+':<br>'
if(params.value.length>1)
toolTiphtml+='项目数：'+params.value[2]+"<br>"
else
toolTiphtml+='项目数：'+params.value+"<br>"
return toolTiphtml;
,
- 全部代码如下所示
function echart_map()
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_map'));
var mapName = '陕西'
//地图数据（用于鼠标悬停显示的数据源）
var data = []
//创建一个散点数组，用于保存经纬度坐标以及项目数量，从而在地图上显示地市项目数量
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))//将坐标数组和项目数量组合到一个数组中
)
);
option =
tooltip:
trigger: 'item',
formatter: function(params)
var toolTiphtml = ''
toolTiphtml += params.name+':<br>'
if(params.value.length>1)
toolTiphtml+='项目数：'+params.value[2]+"<br>"
else
toolTiphtml+='项目数：'+params.value+"<br>"
return toolTiphtml;
,
geo:
show: true,
map: mapName,
label:
normal:
show: true
,
emphasis:
show: true,
,
roam: false,
itemStyle:
normal:
areaColor: '#fff',
borderColor: '#3B5077',
,
emphasis:
areaColor: '#2B91B7',
,
series: [
type: 'map',
map: mapName,
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label:
normal:
show: true
,
emphasis:
show: false,
textStyle:
color: '#fff'
,
roam: true,
itemStyle:
normal:
areaColor: '#031525',
borderColor: '#0227ad',
,
emphasis:
areaColor: '#2B91B7'
,
animation: false,
data: data
,
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,
]
;
myChart.setOption(option);
实现效果
以上是关于数据可视化项目分布地图设计之增加项目数量标识的主要内容，如果未能解决你的问题，请参考以下文章