1. Echarts简介
Echarts是百度开源的一个数据可视化库，基于JavaScript语言编写，可以通过Echarts的API通过简单的配置实现数据可视化。它提供了丰富的图表类型和多种数据展示方式，可以广泛用于数据分析、大屏展示和可视化报表等应用场景。
接下来，我们将通过Echarts库来绘制一张街道与镇级地图，展现Echarts的强大功能。
2. 数据来源
在开始绘制地图之前，先确定数据的来源，这里我们使用了geojson.io提供的街道与镇级别的地图数据，数据格式为GeoJSON，可以通过代码引入。
代码如下：
option = {
title:{
text:'街道与镇级别地图',
subtext:'绘制地图示例'
},
tooltip:{
trigger:'item'
},
series:{
name:'行政区域',
type:'map',
map:'json 工具应用 - geojson - 区县json数据',
roam:true,
label:{
normal:{
show:true
},
emphasis:{
show:true
}
},
data:[
{name:'街道一',value:1},
{name:'街道二',value:2},
{name:'街道三',value:3},
{name:'街道四',value:4},
{name:'街道五',value:5},
{name:'街道六',value:6},
{name:'街道七',value:7},
{name:'街道八',value:8},
{name:'街道九',value:9},
{name:'街道十',value:10},
{name:'镇一',value:11},
{name:'镇二',value:12},
{name:'镇三',value:13},
{name:'镇四',value:14},
{name:'镇五',value:15},
{name:'镇六',value:16},
{name:'镇七',value:17},
{name:'镇八',value:18},
{name:'镇九',value:19},
{name:'镇十',value:20}
]
}
}
代码中，我们自定义了每个街道和镇的名称，以及对应的value值，这个value可以用来在地图上显示不同的颜色。
3. 地图样式设置
在绘制地图前，可以通过设置样式来调整地图的风格，包括背景颜色、边框颜色、文本颜色等。
代码如下：
option = {
backgroundColor:'#fff', //背景颜色
color:['#C4D6D6','#C3F6CC','#DCE6CE','#F9DDA5','#F6BBAF'], //颜色
textStyle:{ //文字样式
color:'#333'
},
tooltip:{
trigger:'item',
formatter:param=>{
if(param.seriesType=='map'){
let p = param.name + ' : ' + param.value;
return p;
}
return param.name;
}
},
geo:{ //地理坐标系组件
map:'json 工具应用 - geojson - 区县json数据',
label:{
emphasis:{
show:false
}
},
roam:true, //允许缩放和漫游
itemStyle:{ //地理坐标系组件样式
normal:{
areaColor:'#F4F1E6', //地图区域颜色
borderColor:'#B2B1B8' //边框颜色
},
emphasis:{
areaColor:'#F88376' //高亮显示颜色
}
}
},
series:{
name:'行政区域',
type:'map',
map:'json 工具应用 - geojson - 区县json数据',
roam:true,
label:{
normal:{
show:true
},
emphasis:{
show:true
}
},
data:[
{name:'街道一',value:1},
{name:'街道二',value:2},
{name:'街道三',value:3},
{name:'街道四',value:4},
{name:'街道五',value:5},
{name:'街道六',value:6},
{name:'街道七',value:7},
{name:'街道八',value:8},
{name:'街道九',value:9},
{name:'街道十',value:10},
{name:'镇一',value:11},
{name:'镇二',value:12},
{name:'镇三',value:13},
{name:'镇四',value:14},
{name:'镇五',value:15},
{name:'镇六',value:16},
{name:'镇七',value:17},
{name:'镇八',value:18},
{name:'镇九',value:19},
{name:'镇十',value:20}
]
}
}
代码中，我们设置了背景颜色为#fff，文本颜色为#333，边框颜色为#B2B1B8，同时设置了鼠标hover到地图的区域时，该区域会变成#F88376的颜色。
4. 地图标注设置
除了地图本身的样式之外，我们还可以在地图上添加标注，以更清晰的展示地图信息。
代码如下：
option = {
backgroundColor:'#fff',
color:['#C4D6D6','#C3F6CC','#DCE6CE','#F9DDA5','#F6BBAF'],
textStyle:{
color:'#333'
},
tooltip:{
trigger:'item',
formatter:param=>{
if(param.seriesType=='map'){
let p = param.name + ' : ' + param.value;
return p;
}
return param.name;
}
},
geo:{
map:'json 工具应用 - geojson - 区县json数据',
label:{
emphasis:{
show:false
}
},
roam:true,
itemStyle:{
normal:{
areaColor:'#F4F1E6',
borderColor:'#B2B1B8'
},
emphasis:{
areaColor:'#F88376'
}
}
},
series:[
{
name:'行政区域',
type:'map',
map:'json 工具应用 - geojson - 区县json数据',
roam:true,
label:{
normal:{
show:true
},
emphasis:{
show:true
}
},
data:[
{name:'街道一',value:1},
{name:'街道二',value:2},
{name:'街道三',value:3},
{name:'街道四',value:4},
{name:'街道五',value:5},
{name:'街道六',value:6},
{name:'街道七',value:7},
{name:'街道八',value:8},
{name:'街道九',value:9},
{name:'街道十',value:10},
{name:'镇一',value:11},
{name:'镇二',value:12},
{name:'镇三',value:13},
{name:'镇四',value:14},
{name:'镇五',value:15},
{name:'镇六',value:16},
{name:'镇七',value:17},
{name:'镇八',value:18},
{name:'镇九',value:19},
{name:'镇十',value:20}
]
},
{
type:'scatter',
coordinateSystem:'geo',
data:[
{name:'街道一',value:[116.109099,28.311707,1]},
{name:'街道二',value:[116.122249,28.292867,2]},
{name:'街道三',value:[116.105265,28.301263,3]},
{name:'街道四',value:[116.104414,28.322154,4]},
{name:'街道五',value:[116.121017,28.307013,5]},
{name:'街道六',value:[116.12632,28.32683,6]},
{name:'街道七',value:[116.138579,28.315478,7]},
{name:'街道八',value:[116.096636,28.323584,8]},
{name:'街道九',value:[116.112771,28.28461,9]},
{name:'街道十',value:[116.125013,28.279556,10]},
{name:'镇一',value:[116.060017,28.291886,11]},
{name:'镇二',value:[116.093019,28.262098,12]},
{name:'镇三',value:[116.063146,28.277334,13]},
{name:'镇四',value:[116.098068,28.256239,14]},
{name:'镇五',value:[116.130391,28.239387,15]},
{name:'镇六',value:[116.120984,28.31777,16]},
{name:'镇七',value:[116.11717,28.341329,17]},
{name:'镇八',value:[116.0853,28.356117,18]},
{name:'镇九',value:[116.067378,28.328562,19]},
{name:'镇十',value:[116.086895,28.287965,20]}
],
symbol:'image://https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png',
symbolSize:function(val){
return 30*val[2];
},
label:{
normal:{
formatter:'{b}',
position:'right',
show:false
},
emphasis:{
show:true
}
},
itemStyle:{
normal:{
color:'#F06C00'
}
}
}
]
}
代码中，我们首先定义了一个type为scatter的series，表示散点图，coordinatesystem为geo（地理坐标系）。
数据分别为name、value、symbol（这里使用了气象时报的太阳图标）、symbolSize（表示图标大小）等，其中symbolSize的大小与value有关，用简单的公式：30*val[2]。
最后，将这个series添加到series列表中，即可在地图上添加图标。
5. 总结
至此，我们完成了一张街道与镇级别地图的绘制，通过Echarts的API，我们可以实现非常复杂的数据可视化图表，同时调整样式和设置标注，可以使图表更清晰、更直观。
相信在实际项目中，可以根据需求来自定义自己想要的图表效果，让数据更好地展示和分析。