效果图
展示图
WechatIMG295.png
鼠标放入城市，边框线加粗，字体变成黑色
WechatIMG6872.png
1、结构
2、引入echarts
3、js
// 地图
getMapChartData(type) {
const that = this
; (function ($) {
var MapChart = echarts.init(document.getElementById('map'))
$.get('../../resources/js/jibei.json', function (jibei) { //json需要展示的数据源
echarts.registerMap('jb', jibei)
var optionmap = {
tooltip: {
trigger: 'item',
formatter: function (params) {
return '名称：' + params.name
}
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center'
},
geo: {
show: false,
map: 'jb',
viewControl: {
distance: 120,
alpha: 65
},
zlevel: -11,
regions: [
{
name: '冀北', //与json对应的省份名称
itemStyle: {
color: '#ffffff',
normal: {
borderColor: '#79FFFA',
borderWidth: 0.8,
areaColor: '#ffffff'
},
emphasis: {
textStyle: {
color: '#fff',
fontSize: 12,
backgroundColor: 'transparent'
},
areaColor: '#ffffff'
}
},
label: {
color: '#ffffff', //字体颜色
show: true
}
}
]
},
series: [
{
type: 'map',
map: 'jb',
zoom: 1.2, //这里是关键，一定要放在 series中
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 12,
backgroundColor: 'transparent'
}
},
viewControl: {
distance: 120,
alpha: 65
},
itemStyle: {
normal: {
borderColor: '#79FFFA',
borderWidth: 0.8,
areaColor: {
type: 'linear-gradient',
x: 0,
y: 1000,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0.5,
color: '#0D59C1' // 0% 处的颜色
},
{
offset: 1,
color: '#53C9C7' // 100% 处的颜色
}
],
global: true // 缺省为 false
}
},
emphasis: {
borderWidth: 3,
itemStyle: {
// color: '#ffffff',
// textStyle: {
// color: '#fff',
// fontSize: 12,
// backgroundColor: 'transparent'
// },
// opacity: 0.75
},
textStyle: {
color: '#fff',
fontSize: 12,
backgroundColor: 'transparent'
},
areaColor: {
type: 'linear-gradient',
x: 0,
y: 1000,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0.5,
color: '#0D59C1' // 0% 处的颜色
},
{
offset: 1,
color: '#53C9C7' // 100% 处的颜色
}
],
global: true // 缺省为 false
}
}
},
data: [
{
name: '冀北',
itemStyle: {
normal: {
color: '#EEF0F2',
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 15
}
}
},
emphasis: {
// 也是选中样式
borderWidth: 5,
borderColor: '#EEF0F2',
areaColor: '#EEF0F2',
label: {
show: true,
textStyle: {
color: 'blue'
}
}
}
}
}
]
},
{
name: '冀北',
type: 'scatter',
coordinateSystem: 'geo',
data: [{ name: '冀北', value: [116.46, 39.92] }],
symbol:
'path://m463.27193,186.73462l27.50175,0l8.49825,-26.12654l8.49826,26.12654l27.50174,0l-22.24934,16.14691l8.49869,26.12654l-22.24935,-16.14735l-22.24934,16.14735l8.49869,-26.12654l-22.24935,-16.14691z',
symbolSize: 15, // 锚点大小
tooltip: {
show: false
},
itemStyle: {
color: 'red'
},
zlevel: 3
},
{
name: '',
type: 'scatter',
coordinateSystem: 'geo',
data: [
{ name: '北戴河区', value: [119.29, 39.54] },
],
symbol:
'path://m463.27193,186.73462l27.50175,0l8.49825,-26.12654l8.49826,26.12654l27.50174,0l-22.24934,16.14691l8.49869,26.12654l-22.24935,-16.14735l-22.24934,16.14735l8.49869,-26.12654l-22.24935,-16.14691z',
symbolSize: 15, // 锚点大小
tooltip: {
show: false
},
itemStyle: {
color: 'red'
},
zlevel: 3,
label: {
show: true,
position: 'right',
textStyle: {
color: '#fff',
fontSize: 12,
backgroundColor: 'transparent'
},
formatter: function (params) {
//标签内容
return params.name
}
}
}
]
}
})
})(jQuery)
},
4、鼠标移入地图，图表突出显示
注意：图表初始化过的，这是鼠标移入地图后，给他重新赋值的样式
WeChat720292da6cd116487d04c9883140bc98.png
WeChate1f2d4ec875650d325d5b591814c7734.png
MapChart.on('mouseover', function (data) {
//如果地图上的名字等于图表数据的这几个名字
if (data.name === '张家口' || data.name === '承德') {
// 选中状态地图，使相应柱状图高亮展示
// 第一种柱形改变颜色
// option1.series = [
// {
// // 根据数据内容改变颜色
// itemStyle:{
// normal:{
// color:function(params){
// return "#00DDFF";
// }
// }
// },
// }
// ]
// myChart1.setOption(option1)
// 第二种，柱形图通过在外部定义好样式，通过给值添加itemStyle
var zzyy2 = {
color: '#00ADCC',
shadowColor: '#00ADCC',
shadowBlur: 10
}
var zzyy3 = {
color: '#00DDFF',
shadowColor: 'rgba(0, 0, 0, 0.0)',
shadowBlur: 10
}
var zzyy4 = {
color: '#59e1b5',
shadowColor: 'rgba(0, 0, 0, 0.0)',
shadowBlur: 10
}
var one = option1.series[0].data
one.forEach((i, index) => {
i.itemStyle = {}
if (i.name === data.name) {
i.itemStyle = zzyy2
} else {
i.itemStyle = zzyy3
}
})
//第三种 折线图，加粗
var Ename = data.name
option2.series.forEach((i, index) => {
if (i.name == Ename) {
; (i.symbolSize = 10),
(i.lineStyle = {
width: 4
})
} else {
; (i.symbolSize = 5),
(i.lineStyle = {
width: 2
})
}
})
myChart1.setOption(option1)
myChart2.setOption(option2)
// 第四种 饼图
myChart2.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
});
}
})