一、echart中国地图高亮
在echart中国地图中，我们可以非常轻松地实现对某个区域的高亮展示，只需利用echarts提供的API，即可设定相关的高亮属性：
// 设定一个区域的高亮展示
myChart.setOption({
series: [{
type: 'map',
map: 'china',
emphasis: {
itemStyle: {
areaColor: '#F3B329'
}
},
label: {
show: true
},
data: []
}]
});
上述代码中，我们将中国地图设置为主视图，然后用emphasis:itemStyle对象设定了该视图的高亮颜色，其它属性可以查阅echarts的文档，以便进行合理的配置和实现。
二、echart中国地图背景渐变
echart为用户提供了丰富的可视化方案，其中一个实用的特性便是支持为地图背景配置渐变的效果。我们只需稍加修改主题色值即可实现：
// 背景色渐变处理
myChart.setOption({
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#113681' // 0% 处的颜色
}, {
offset: 1, color: '#1979D2' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
series: [{ ... }]
});
通过为属性backgroundColor设定一个linear对象，即可实现对地图背景色的线性渐变处理，具有极强的视觉冲击力。
三、echart中国地图图例
同时，echart也支持可自定义的地图图例，如按照百分比颜色展示不同数据的区域：
// 设置echart图例
myChart.setOption({
visualMap: {
min: 0,
max: 100,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
inRange: {
color: ['#B5C2CF', '#022B69']
}
},
series: [{ ... }]
});
如上方代码所进行的操作，在echarts中常用属性visualMap中，我们可以设置visualMap.inRange.color的颜色，以及相关的最大和最小值等内容，快速对地图展示效果进行配置和调整。
四、echart中国地图颠倒
在某些应用场景中，我们需要对中国地图进行颠倒后的展示，此时也可以使用echart的相关API来轻松实现：
// 中国地图颠倒
myChart.setOption({
geo: {
map: 'china',
top: '10%',
bottom: '15%',
left: '30%',
right: '30%',
roam: true,
scaleLimit: {
min: 1,
max: 2
},
inverse: true,
label: {
normal: {
show: true,
textStyle: {
color: '#ddd'
}
}
},
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(128, 217, 248, 1)',
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
}
},
series: [{ ... }]
});
以上代码中，我们将geo对象相关的参数进行设置实现中国地图的颠倒显示，如将top、bottom、left和right等坐标系参数进行合理配置，从而达到特定效果。
五、echart中国地图icon
echart也支持在地图中插入自定义的icon图标，以方便用户对地图数据的展示和处理：
// 中国地图自定义icon
myChart.setOption({
geo: {
map: 'china',
label: {
normal: {
show: true,
textStyle: {
color: 'rgba(0,0,0,0.4)'
}
}
},
roam: true,
itemStyle: {
normal: {
borderWidth: 0.5,
borderColor: 'rgba(0, 0, 0, 0.2)'
}
},
// 插入自定义icon
regions: [{
name: '南海诸岛',
value: 0,
itemStyle: {
normal: {
opacity: 0,
label: {
show: false
}
}
},
// 自定义icon
geoCoord: {
'南海诸岛': [112.921019, 8.325475]
},
type: 'effectScatter',
effectType: 'ripple',
symbolSize: 3
}]
},
series: [{ ... }]
});
在以上示例代码中，我们在regions属性中定义需要插入icon的区域和对应的一些样式配置，如itemStyle，效果非常漂亮而且方便。
六、echart中国地图默认高亮
echart实现中国地图的默认高亮，使用上比较方便，只需在series中使用itemStyle中的emphasis对象，并设置高亮颜色即可，效果和前面提到的操作差别不大：
// 默认高亮一些区域
myChart.setOption({
series: [{
type: 'map',
map: 'china',
data: [],
itemStyle: {
normal: {
areaColor: '#F3B329',
borderColor: '#333',
borderWidth: 0.5
},
emphasis: {
areaColor: '#F3B329'
}
}
}]
});
七、echart中国地图钓鱼岛
echarts中也提供钓鱼岛的相关地区信息，通过在echart中修改视图项的相关调用参数即可实现钓鱼岛地区的高亮、颜色等配置：
// China's island color
var chinaIslandColor = '#C5CCD0';
option.series.push({
name: '',
type: 'map',
mapType: 'china',
selectedMode: 'single',
data: [],
itemStyle: {
normal: { label: { show: false } },
emphasis: { label: { show: false } }
},
geoCoord: {
'钓鱼岛': [123.5, 25.6]
},
markPoint: {
symbol: "image://img/diaoyu.png",
symbolSize: [24, 33],
itemStyle: {
normal: {
label: { show: false },
color: chinaIslandColor,
borderColor: '#fff',
borderWidth: 1.5
}
},
data: [
{ name: '钓鱼岛', value: 0, geoCoord: [123.5, 25.6] }
]
}
});
myChart.setOption(option, true);
如上述代码所完成的操作，即为钓鱼岛地区的标注和强调的处理，方便用户进行地图结构性的认知。
八、echart中国地图的某省边框加粗
有时，我们需要对中国地图中某些更为重要的省份边框进行加粗和突出，以便更容易观察到细节和特质，此时我们可以使用echart提供的边框绘制功能完成相关的操作，其实现代码如下：
// 中国地图省份边框加粗
myChart.setOption({
series: [{
type: 'map',
map: 'china',
itemStyle: {
normal: {
label: {
show: true
},
borderWidth: 1,
borderColor: '#009fe8'
},
emphasis: {
label: {
show: true
}
}
},
data: []
}, {
type: 'map',
map: 'china',
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077'
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: []
}]
});
以上代码中，我们仅需将itemStyle.normal中的borderWidth对应的值调整为让相关区域边框加粗即可实现该特性的实现。
九、echarts中国地图的使用
最后，我们整理一份完整的echarts中国地图的示例代码如下，方便大家使用和了解echarts相关的操作：
中国地图 原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/238720.html
微信扫一扫 
支付宝扫一扫 