在需要引入的页面
代码语言：javascript复制import * as echarts from '../../node_modules/echarts';
require('../../node_modules/echarts/extension/bmap/bmap');创建地图容器
代码语言：javascript复制<div id="mapContainer" class="mapContainer"></div>绘制地图方法
代码语言：javascript复制drawChinaMap() {
var myChart = echarts.init(document.getElementById('mapContainer'));
var option;
option = {
backgroundColor: 'transparent',
title: {
text: '',
subtext: '',
sublink: '',
left: 'center',
textStyle: {
color: '#5555ff'
}
},
geo:{
show:true,
roam: true, //是否允许鼠标滚动放大，缩小
map:'china',
label: { //图形上的文本标签，可用于说明图形的一些数据信息
show:true, //是否显示文本
color:'#CCC', //文本颜色
},
itemStyle: { //地图区域的多边形 图形样式。 默认样试。
areaColor: '#323c48', //地图区域的颜色。
borderColor: '#111', //边框线
},
emphasis:{ //高亮状态下的多边形和标签样式。
label:{ //文本
color: '#ADA',
},
itemStyle:{ //区域
areaColor: '#F60'
}
},
},
tooltip: {
trigger: 'item',
formatter(data) {
return "<div>设备名:" data.name "</div><div>" data.value[2] "</div><div>"
data.value[3] "</div><div>" data.value[4] "</div>"
}
},
bmap: {
center: [104.114129, 37.550339],
zoom: 5,
roam: true,
},
series: [{
name: '在线设备',
type: 'scatter',
coordinateSystem: 'bmap',
data: this.dataOn,
encode: {
value: 2
},
symbolSize: function(val) {
return 5;
},
label: {
formatter: '{b}',
position: 'right'
},
itemStyle: {
color: '#64c800'
},
emphasis: {
label: {
show: true
}
}
},
{
name: '离线设备',
type: 'scatter',
coordinateSystem: 'bmap',
data: this.dataOut,
encode: {
value: 2
},
symbolSize: function(val) {
return 5;
},
label: {
formatter: '{b}',
position: 'right'
},
itemStyle: {
color: '#bdbdbd'
},
emphasis: {
label: {
show: true
}
}
},
{
name: '报警设备',
type: 'effectScatter',
coordinateSystem: 'bmap',
data: this.dataWaring,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
encode: {
value: 2
},
symbolSize: function(val) {
return 15;
},
label: {
formatter: '{b}',
position: 'right'
},
itemStyle: {
color: '#f70000'
},
emphasis: {
label: {
show: true
}
}
},
]
};
myChart.setOption(option);
},地图中的option参数根据自己业务场景的需要进行配置的哦，最后将参数setOption进去就可以显示了哦
效果图如下
190f939c9fa9d3a595e84edd147e2bc.jpg
