echart地图

【地图底图 渲染】
geo: [{
map: 'china',
// selectedMode:true,//允许选中多个 省份
roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
aspectScale: 0.75,
zoom: 1.20,
label: {
normal: {
show: true,//显示省份标签
fontSize:32,
textStyle: {
color: '#fff'//省份标签字体颜色
}
},
emphasis: { // 对应的鼠标悬浮效果
show: true,
textStyle: {
color: "#333"
}
}
},
itemStyle: {
normal: {
borderWidth: 1,//区域边框宽度
areaColor: "#172b6a",//区域颜色
borderColor: '#1674d2',//区域边框颜色
},
emphasis: {
borderWidth: 1,
borderColor: '#2a449a',
areaColor: "#FEB000",//省份块颜色
// shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}],
【地图 根据数据 改变省份颜色】
geo: [{
map: 'china',
// selectedMode:true,//允许选中多个 省份
roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
aspectScale: 0.75,
zoom: 1.20,
label: {
normal: {
show: true,//显示省份标签
fontSize:32,
textStyle: {
color: '#fff'//省份标签字体颜色
}
},
emphasis: { // 对应的鼠标悬浮效果
show: true,
textStyle: {
color: "#333"
}
}
},
itemStyle: {
normal: {
borderWidth: 1,//区域边框宽度
areaColor: "#172b6a",//区域颜色
borderColor: '#1674d2',//区域边框颜色
},
emphasis: {
borderWidth: 1,
borderColor: '#2a449a',
areaColor: "#FEB000",//省份块颜色
// shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}],
【地图添加 流动线 series】
{
name: "天拓",
type: 'lines',
coordinateSystem: 'geo',//bmap geo 注意此处的geo是上面geo的配置
zlevel: 1,
center: [106.01, 36.82],//视觉中心点
aspectScale:"0.7",//缩放
effect: {
show: true,
period: 6,
trailLength: 0,
// symbol: planePath,
symbolSize: 6
},
lineStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFFFA8' // 出发
}, {
offset: 1,
color: '#58B3CC' // 结束 颜色
}], false),
width: 1.5,
opacity: 0.4,
curveness: 0.2
}
},
data: convertData(BJData),
map: 'china' //使用
}
【地图添加 叠加地图 改变底色 series】
{
name: '天拓',
zleve:2,
type: 'map',
// mapType: 'china',
map: 'china', //使用
coordinateSystem:"geo",
center: [104.21, 36],//视觉中心点
aspectScale:"0.72",//缩放
mapLocation: {
// x: '240',
// y: 'center',
height: '84%'
},
//hoverable: false,
roam: false,
itemStyle:{
normal:{
label:{show:true},
areaColor:"rgba(0,0,0,0.3)"//因为只用到数据渲染块 所以透明
},
emphasis:{label:{show:false}},
},
data:[{name:"河南",value:5}],//河南设置value5 数据渲染河南
},
【option】
// dataRange:{//渲染逻辑 为5时高亮
// show:false,
// x: 'left',
// y: 'bottom',
// splitList: [
// {start: 5, end: 5, color: 'red'},//当值为5时，区域背景
// ],
// },