记录一下大屏开发中使用到的echartsMap
大屏的页面根据需求前前后后改了几个版本了，地图的样式也改了又改
这里记录一下，因为echarts属性用到的比较多也比较杂，防止以后需要用到忘记了
初始效果
效果图：
适应大屏风格的发光地图效果，用了两个图层实现叠加背景图片实现：
地图配置代码：
到这里是简单实现了图中有高度效果的地图
// 地图初始化
render_echartsMap(mapData) {
var chartDom = document.getElementById('map_wrapper') // 挂载元素
var myChart = chartDom && echarts.init(chartDom) // 初始化echarts地图
echarts.registerMap('JS', jiaxing) // 注册地图 注意这里的地图json文件需要换成自己需要的
var option
option = {
geo: [
{
map: 'JS',
aspectScale: 1, // 横向拉伸
zoom: 1.2,
zlevel: 2,
label: {
show: true,
color: '#eee'
},
itemStyle: {
color: 'rgba(23, 89, 151, 0.35)', // 背景
borderWidth: '1', // 边框宽度
borderColor: '#5FD7FF' // 边框颜色
},
emphasis: {
areaColor: '#195BB9',
label: {
show: true
}
}
},
{
map: 'JS',
top: '13%',
aspectScale: 1, // 横向拉伸
zoom: 1.2,
zlevel: 1,
itemStyle: {
color: 'rgba(23, 89, 151, 0.1)', // 背景
borderWidth: '1', // 边框宽度
borderColor: 'RGBA(129, 222, 227, 0.3)', // 边框颜色
shadowColor: '#fff', // 外部阴影
shadowBlur: '10',
colorStops: [
{
offset: 0,
color: 'black' // 0% 处的颜色
},
{
offset: 1,
color: 'blue' // 100% 处的颜色
}
]
}
}
]
}
myChart && myChart.setOption(option)
}
echarts-map 叠加散点图层
效果图：
根据需求，需要渲染辖区内的数据量，对辖区内的高危数据进行展示，又加了散点图层
由于用户的设备屏幕尺寸较小影响渲染，发光效果会导致文字看不清就取消了
代码：
在上述代码的 render_echartsMap() 方法中，增加以下内容：
render_echartsMap(mapData) {
// 地图json文件中的
const geoCoordMap = {
南湖区: [120.842186, 30.711139],
秀洲区: [120.686302, 30.768878],
嘉善县: [120.902273, 30.8996],
海盐县: [120.929474, 30.474419],
海宁市: [120.623175, 30.425385],
平湖市: [121.103105, 30.705649],
桐乡市: [120.483851, 30.605938],
经开区: [120.726302, 30.728878]
}
// 转化为需要渲染的数据
const convertData = function(data) {
var res = []
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
})
}
}
return res
}
option = {
geo: [...], // ...... 这里是geo图层
series: [
{
name: '散点', // 自定义名称
type: 'effectScatter', // scatter effectScatter
coordinateSystem: 'geo', // 设置坐标系类型
data: convertData(mapData), // 设置散点位置和数据
symbolSize: function(val) {
// 设置散点大小
return 10
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true, // 是否显示鼠标悬浮动画
label: {
// 静态显示时的样式
normal: {
show: true, // 显示地区名称
formatter: function(data) {
// 显示模板
return '高危企业：' + data.value[2]
},
position: 'bottom' // 显示位置
},
// 鼠标悬浮上去的样式
emphasis: {
// 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
label: {
// label高亮时的配置
show: true,
textStyle: {
color: '#ffffff', // 高亮时标签颜色变为 白色
fontSize: 20 // 高亮时标签字体 变大
}
},
itemStyle: {
// itemStyle高亮时的配置
areaColor: '#006cff' // 高亮时地图板块颜色改变
}
}
},
itemStyle: {
normal: {
color: '#27d3c3',
shadowBlur: 10
},
// 鼠标悬浮上去的样式
emphasis: {
fontSize: 20
}
},
zlevel: 3
}
]
}
},
echarts-map 实现轮播效果 tooltip formatter
效果图：
完整代码：
// 地图初始化
render_echartsMap(mapData) {
const geoCoordMap = {
南湖区: [120.842186, 30.711139],
秀洲区: [120.686302, 30.768878],
嘉善县: [120.902273, 30.8996],
海盐县: [120.929474, 30.474419],
海宁市: [120.623175, 30.425385],
平湖市: [121.103105, 30.705649],
桐乡市: [120.483851, 30.605938],
经开区: [120.726302, 30.728878]
}
const convertData = function(data) {
var res = []
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value[0], data[i].value[1], data[i].value[2])
})
}
}
return res
}
var chartDom = document.getElementById('map_wrapper')
var myChart = chartDom && echarts.init(chartDom) // 初始化echarts
echarts.registerMap('JS', jiaxing) // 注册地图
var option
option = {
tooltip: {
show: true,
confine: true,
textStyle: {
align: 'left'
},
formatter: function(data) {
// 显示模板
return [
data.data.name,
'高危企业：' + data.data.value[2] + ' 家',
'高危车辆：' + data.data.value[3] + ' 辆',
'高危驾驶人：' + data.data.value[4] + ' 人'
].join('<br>')
}
},
series: [
{
name: '嘉兴市高危数据统计',
type: 'map',
map: 'JS',
aspectScale: 1, // 横向拉伸
zoom: 1.35,
radius: '80%',
layoutCenter: ['50%', '50%'],
layoutSize: '100%',
data: convertData(mapData),
label: {
normal: {
show: true,
textStyle: { color: '#fff' }
},
emphasis: {
show: true,
textStyle: { color: '#fff' }
}
},
itemStyle: {
normal: {
borderWidth: 0.5, // 区域边框宽度
borderColor: '#5FD7FF', // 区域边框颜色
areaColor: 'rgba(23, 89, 151, 0.35)' // 区域颜色
},
emphasis: {
borderWidth: 0.5,
borderColor: '#fff',
areaColor: 'rgba(37, 200, 249, 0.75)'
}
}
}
]
}
myChart && myChart.setOption(option)
this.mapActive(mapData, myChart)
},
// 地图高亮轮播
mapActive(mapData, myChart) {
if (!myChart) {
return
}
const dataLength = mapData.length
// 用定时器控制高亮
this.mTime = setInterval(() => {
// 清除之前的高亮
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: this.dataIndex
})
this.dataIndex++
// 当前下标高亮
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: this.dataIndex
})
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: this.dataIndex
})
if (this.dataIndex > dataLength) {
this.dataIndex = 0
}
}, 3000)
myChart.on('mouseover', () => {
console.log('mouseover')
// 停止定时器，清除之前的高亮
clearInterval(this.mTime)
this.mTime = ''
console.log(this.mTime)
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: this.dataIndex
})
})
// 鼠标划出重新定时器开始
myChart.on('mouseout', () => {
this.mapActive(mapData, myChart)
})
},
