前端开发，利用echarts图表实现海南地图、广东地图等对应区域的显示、添加图标等操作，常用大屏展示的部分区域的地图显示~

共4个文件

js：2个

html：1个

json：1个

版权申诉

前端开发

echarts

海南地图

大屏展示

5星 · 超过95%的资源 138 浏览量 2022-06-30 17:06:18 上传评论收藏 325KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

mapdemo.rar （4个子文件）

mapdemo

jquery.min.js 87KB

index.html 6KB

echarts.min.js 994KB

data.json 50KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>海南地图实现</title> <style> html, body { width: 100%; height: 100%; display: block; background: url(http://data.hkrczs.gov.cn:8091/static/img-templet/background-1.png) no-repeat; background-size: 100% 100%; } </style> </head> <body> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="echarts.min.js"></script> <div id="map_chart" style="width: 100%;height:100%;"></div> <script type="text/javascript"> //echarts教程： https://echarts.apache.org/examples/zh/index.html //获取个省份json文件各省份的数据从http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.316551722910077&lng=106.68898666525287&zoom=3.5 地址获取 $.get('data.json', function (rs) { //zhengzhou.json echarts.registerMap('mapData', rs); showMap(); }) function showMap() { var myChart = echarts.init(document.getElementById('map_chart')); var option = { /*visualMap: [{ // 热力图 type: 'continuous', // 定义为连续型 visualMap show: false, color: ['#56CFD3', '#FFC366', '#49D87F', '#E863D7'] }],*/ tooltip: { // show: false //不显示提示标签 formatter: '{b}:{c}', //提示标签格式 backgroundColor: "#040C3B", //提示标签背景颜色 borderColor: "ffffff", //提示标签边框颜色 borderWidth: .1, //提示标签边框宽度 textStyle: { color: "#fff" } //提示标签字体颜色 }, series: [{ name:'监控数量',//名称 type: 'map', mapType: 'mapData', zoom: 5, //缩放值 center: [109.70245, 18.236371], //中心位置 label: { formatter: '{b}:{c}',// '{b}:{c}' normal: { show: true, //显示省份标签 textStyle: { color: "#ffffff" } //省份标签字体颜色 }, emphasis: { //对应的鼠标悬浮效果 show: true, textStyle: { color: "#ffffff" } }, }, itemStyle: { normal: { borderWidth: .5, //区域边框宽度 borderColor: '#f2f2f2', //区域边框颜色 areaColor: "#1C2D61", //区域背景颜色 }, emphasis: { borderWidth: .5, borderColor: '#ffffff', //鼠标事件的背景边框颜色 areaColor: "#040C3B", //鼠标事件的背景颜色 } }, emphasis: { disabled: false, }, select: { //点击选中 disabled: true //是否关闭选中 }, markPoint: { //图标标注 formatter: '{b}',// '{b}:{c}' symbol: "image://http://www.hicourt.gov.cn/static/f7afc746-8577-4cd4-a410-884027df5bab/2018/09/20180921164151587_72741.png", symbolSize: 30, data: [{ name: '三亚市', //鼠标放上去的显示的名称 value: 50, coord: [109.70245, 18.236371], //图标显示的经纬度坐标 label: { show: false }, tooltip: { formatter: '{b}', //提示标签格式 }, }, { name: '海口市', //鼠标放上去的显示的名称 value: 30, coord: [110.33119, 20.031971], //图标显示的经纬度坐标 label: { show: false }, tooltip: { formatter: '{b}', //提示标签格式 } }] }, data: [{ name: "海口市", value: 856, label: { //formatter: '{b}:{c}',//显示类型 show: true }, }, { name: "三亚市", value: 365, label: { show: true, } }, { name: "三沙市", value: 149, label: { show: true, } }, { name: "儋州市", value: 748, label: { show: true, } }, { name: "五指山市", value: 36, label: { show: true, } }, { name: "琼海市", value: 874, label: { show: true, } }, { name: "文昌市", value: 398, label: { show: true, } }, { name: "万宁市", value: 135, label: { show: true, } }, { name: "东方市", value: 754, label: { show: true, } }, { name: "定安县", value: 987, label: { show: true, } }, { name: "屯昌县", value: 3, label: { show: true, } }, { name: "澄迈县", value: 98, label: { show: true, } }, { name: "临高县", value: 984, label: { show: true, } }, { name: "白沙县", value: 524, label: { show: true, } }, { name: "昌江县", value: 1546, label: { show: true, } }, { name: "乐东县", value: 35, label: { show: true, } }, { name: "陵水县", value: 3584, label: { show: true, } }, { name: "保亭县", value: 952, label: { show: true, } }, { name: "琼中县", value: 70, label: { show: true, } }] }], }; myChart.setOption(option); myChart.on('mouseover', function (params) { var dataIndex = params.dataIndex; //console.log("鼠标放在某个地方上面的事件 = ", params); }); myChart.on('click', function (params) { var dataIndex = params.dataIndex; console.log("鼠标点击某个地方上面的事件 = ", params); }); } </script> </body> </html>

评论收藏

内容反馈

版权申诉