文章目录
<script src="../lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../lib/echars/echarts.min.js" charset="utf-8"></script>
<script src="../lib/echars/guangdong.json" type="text/javascript"></script>
代码如下:
<div class="layuimini-container">
<div class="layuimini-main">
<div class="layui-row layui-col-space15">
<div class="layui-col-md9">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body">
<div class="map-container">
<h2 style="padding-left: 16px; padding-top: 16px;font-weight: bold; color: #464343">广东</h2>
<div id="map" style="height: 400px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
// 坐标信息
let geoCoorMap = {
'A公司': [113.23083,24.903204],
'B公司': [114.723092,23.983036],
'C公司': [113.335367,23.13559],
'D公司': [116.659557, 23.22528],
'E公司': [111.863833, 22.045743],
'F公司': [113.405404,24.18612],
'G公司': [115.786377, 24.132908],
'H公司': [114.413978,23.079883],
'I公司': [111.918346, 23.435632],
'J公司': [113.397617, 22.364724],
'K公司': [110.086281, 21.647324]
}
// 每个位置需要显示的量的值
let items = [{ name: 'A公司', value: ['0'] },
{ name: 'B公司', value: ['0'] },
{ name: 'C公司', value: ['0'] },
{ name: 'D公司', value: ['0'] },
{ name: 'E公司', value: ['0'] },
{ name: 'F公司', value: ['0'] },
{ name: 'G公司', value: ['1'] },
{ name: 'H公司', value: ['0'] },
{ name: 'I公司', value: ['0'] },
{ name: 'J公司', value: ['0'] },
{ name: 'K公司', value: ['0'] }
]
const convertDataWithName = function (data, geoCoordMap) {
let res = [];
data.forEach(item => {
let geoCoord = geoCoordMap[item.name];
if (geoCoord) {
res.push({
name: item.name,
value: geoCoord.concat(item.value)
});
}
});
return res;
};
let mapOption = {
// 提示框组件
tooltip: {
formatter: function (param) {
return param.name;
},
padding: 16
},
// 地理坐标系组件
geo: [
{
zoom: 1.2, // 初始缩放比例
// bottom: "-40%",
// top: "5%",
map: "guangdong", // 广东省地图
roam: false, // 支持鼠标滚轮缩放
itemStyle: {
areaColor: "#1C86EE", // 地图底色
borderColor: '#FFFFED' // 行政分区边界线颜色
},
emphasis: {
label: {
position: "insideBottom",
color: "#FFF" // hover地区时显示label颜色
},
itemStyle: {
areaColor: "#1aa094", // hover地区时显示高亮区域的颜色
shadowOffsetX: 3,
shadowOffsetY: 3,
shadowBlur: 7,
shadowColor: "rgba(0, 0, 0, 0.8)"
}
}
// silent: true // 不显示hover效果,视觉效果更集中在点上,同时会屏蔽点击事件
},
],
// 地图上的标点(使用气泡图)
series: [
{
type: "scatter",
coordinateSystem: "geo",
data: convertDataWithName(items, geoCoorMap),
symbolSize: 40,
symbol: function(params) {
if(params[2] === '0') {
return 'pin'
} else {
return 'diamond'
}
} ,
itemStyle: {
opacity: 1
}
},
{
type: 'effectScatter',
coordinateSystem: "geo",
data: null
}
]
}
series-scatter. symbol = ‘circle’ ,标记的图形。
ECharts 提供的标记类型包括 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’
可以通过 ‘image://url’ 设置为图片,其中 URL 为图片的链接,或者 dataURI。
URL 为图片链接例如:‘image://http://xxx.xxx.xxx/a/b.png’
可以通过 ‘path://’ 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
如果需要每个数据的图形不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => string
其中第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数。
echarts.registerMap("guangdong", guangdong)
let mapInstance = echarts.init(document.getElementById('map'))
// 渲染地图
mapInstance.setOption(mapOption)
// 图标点击事件
mapInstance.on('click', function(event) {
// 判断点击的是图标
if(event.componentSubType === "scatter") {
changeitems(event.name)
mapOption.series[0].data=convertDataWithName(changeitems(event.name), geoCoorMap)
mapInstance.setOption(mapOption)
}
})
function changeitems(index) {
items.forEach(item => {
let name = item.name;
if (name === index) {
item.value[0]='1'
}else{
item.value[0]='0'
}
})
return items
}
到此,就已经把实现的所有点都整理出来了!!!!
再来一遍效果图!!