效果图
展示图
鼠标放入城市，边框线加粗，字体变成黑色
1、结构
<div style="width:400px; height:400px;">
<div id="map" style="width: 100%; height: 100%"></div>
</div>
2、引入echarts
<script src="../../resources/js/echarts.min.js"></script>
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、鼠标移入地图，图表突出显示
注意：图表初始化过的，这是鼠标移入地图后，给他重新赋值的样式
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
});
}
})
© 版权声明
文章版权归作者所有，未经允许请勿转载。如内容涉嫌侵权，请在本页底部进入<联系我们>进行举报投诉!
THE END
暂无评论内容