記錄一下大屏開(kāi)發(fā)中使用到的echartsMap
大屏的頁(yè)面根據(jù)需求前前后后改了幾個(gè)版本了，地圖的樣式也改了又改
這里記錄一下，因?yàn)閑charts屬性用到的比較多也比較雜，防止以后需要用到忘記了
初始效果
效果圖：
適應(yīng)大屏風(fēng)格的發(fā)光地圖效果，用了兩個(gè)圖層實(shí)現(xiàn)疊加背景圖片實(shí)現(xiàn)：
地圖配置代碼：
到這里是簡(jiǎn)單實(shí)現(xiàn)了圖中有高度效果的地圖
// 地圖初始化
render_echartsMap(mapData) {
var chartDom = document.getElementById('map_wrapper') // 掛載元素
var myChart = chartDom && echarts.init(chartDom) // 初始化echarts地圖
echarts.registerMap('JS', jiaxing) // 注冊(cè)地圖 注意這里的地圖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', // 邊框?qū)挾?/span>
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', // 邊框?qū)挾?/span>
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 疊加散點(diǎn)圖層
效果圖：
根據(jù)需求，需要渲染轄區(qū)內(nèi)的數(shù)據(jù)量，對(duì)轄區(qū)內(nèi)的高危數(shù)據(jù)進(jìn)行展示，又加了散點(diǎn)圖層
由于用戶的設(shè)備屏幕尺寸較小影響渲染，發(fā)光效果會(huì)導(dǎo)致文字看不清就取消了
代碼：
在上述代碼的 render_echartsMap() 方法中，增加以下內(nèi)容：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-562650.html
render_echartsMap(mapData) {
// 地圖json文件中的
const geoCoordMap = {
南湖區(qū): [120.842186, 30.711139],
秀洲區(qū): [120.686302, 30.768878],
嘉善縣: [120.902273, 30.8996],
海鹽縣: [120.929474, 30.474419],
海寧市: [120.623175, 30.425385],
平湖市: [121.103105, 30.705649],
桐鄉(xiāng)市: [120.483851, 30.605938],
經(jīng)開(kāi)區(qū): [120.726302, 30.728878]
}
// 轉(zhuǎn)化為需要渲染的數(shù)據(jù)
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: '散點(diǎn)', // 自定義名稱
type: 'effectScatter', // scatter effectScatter
coordinateSystem: 'geo', // 設(shè)置坐標(biāo)系類型
data: convertData(mapData), // 設(shè)置散點(diǎn)位置和數(shù)據(jù)
symbolSize: function(val) {
// 設(shè)置散點(diǎn)大小
return 10
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true, // 是否顯示鼠標(biāo)懸浮動(dòng)畫(huà)
label: {
// 靜態(tài)顯示時(shí)的樣式
normal: {
show: true, // 顯示地區(qū)名稱
formatter: function(data) {
// 顯示模板
return '高危企業(yè)：' + data.value[2]
},
position: 'bottom' // 顯示位置
},
// 鼠標(biāo)懸浮上去的樣式
emphasis: {
// 鼠標(biāo) hover 高亮?xí)r圖形和標(biāo)簽的樣式 (當(dāng)鼠標(biāo)放上去時(shí) label和itemStyle 的樣式)
label: {
// label高亮?xí)r的配置
show: true,
textStyle: {
color: '#ffffff', // 高亮?xí)r標(biāo)簽顏色變?yōu)?白色
fontSize: 20 // 高亮?xí)r標(biāo)簽字體 變大
}
},
itemStyle: {
// itemStyle高亮?xí)r的配置
areaColor: '#006cff' // 高亮?xí)r地圖板塊顏色改變
}
}
},
itemStyle: {
normal: {
color: '#27d3c3',
shadowBlur: 10
},
// 鼠標(biāo)懸浮上去的樣式
emphasis: {
fontSize: 20
}
},
zlevel: 3
}
]
}
},
echarts-map 實(shí)現(xiàn)輪播效果 tooltip formatter
效果圖：
完整代碼：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-562650.html
// 地圖初始化
render_echartsMap(mapData) {
const geoCoordMap = {
南湖區(qū): [120.842186, 30.711139],
秀洲區(qū): [120.686302, 30.768878],
嘉善縣: [120.902273, 30.8996],
海鹽縣: [120.929474, 30.474419],
海寧市: [120.623175, 30.425385],
平湖市: [121.103105, 30.705649],
桐鄉(xiāng)市: [120.483851, 30.605938],
經(jīng)開(kāi)區(qū): [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) // 注冊(cè)地圖
var option
option = {
tooltip: {
show: true,
confine: true,
textStyle: {
align: 'left'
},
formatter: function(data) {
// 顯示模板
return [
data.data.name,
'高危企業(yè)：' + data.data.value[2] + ' 家',
'高危車(chē)輛：' + data.data.value[3] + ' 輛',
'高危駕駛?cè)耍? + data.data.value[4] + ' 人'
].join('<br>')
}
},
series: [
{
name: '嘉興市高危數(shù)據(jù)統(tǒng)計(jì)',
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, // 區(qū)域邊框?qū)挾?/span>
borderColor: '#5FD7FF', // 區(qū)域邊框顏色
areaColor: 'rgba(23, 89, 151, 0.35)' // 區(qū)域顏色
},
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
// 用定時(shí)器控制高亮
this.mTime = setInterval(() => {
// 清除之前的高亮
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: this.dataIndex
})
this.dataIndex++
// 當(dāng)前下標(biāo)高亮
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')
// 停止定時(shí)器，清除之前的高亮
clearInterval(this.mTime)
this.mTime = ''
console.log(this.mTime)
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: this.dataIndex
})
})
// 鼠標(biāo)劃出重新定時(shí)器開(kāi)始
myChart.on('mouseout', () => {
this.mapActive(mapData, myChart)
})
},
到了這里，關(guān)于echarts地圖 可視化大屏使用echarts-map實(shí)現(xiàn)地圖輪播效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
