<section class="con_Locations wal"> <h3>Locations</h3> <div style="display:inline-block;width:30%;"> <div class="main" data-title="苏州DC_苏州市唯胜公路"> <label>苏州DC_苏州市唯胜公路</label> </div> <div class="main" data-title="南京DC_南京市六合开发区龙扬路龙须路湖口龙须湖路9号"> <label>南京DC_南京市六合开发区龙扬路龙须路湖口龙须湖路9号</label> </div> <div class="main" data-title="金阊DC_安博苏州金阊物流中心浒墅关镇虎泉路1288"> <label>金阊DC_安博苏州金阊物流中心浒墅关镇虎泉路1288</label> </div> </div> <div id="map" style="height:600px;display:inline-block;width:69%"></div> </section> <script src="/static/js/echarts.min.js"></script> <script src="/static/js/echarts.china.js"></script> <script> //世界地图 var chartDom1 = document.getElementById('map'); var myChartMap = echarts.init(chartDom1); let RDC_ARR = []; RDC_ARR =[ { province: '江苏', locs: [ {name:"苏州DC_苏州市唯胜公路","value":[120.585315,31.298886,0]}, {name:"南京DC_南京市六合开发区龙扬路龙须路湖口龙须湖路9号","value":[118.781603,32.305111,0]}, {name:"金阊DC_安博苏州金阊物流中心浒墅关镇虎泉路1288","value":[120.537188,31.357254,0]} ] }, ]; const mapOption = { //修改悬浮背景色用geo geo:{ show: true, map: 'china', zoom: 1.5, center:[104.73, 34.01],//34.013456, 104.737978 roam: false, label:{ show:false }, emphasis: { label:{ show:false }, areaColor: '#e1261c', }, itemStyle: { emphasis: { label:{ show:false }, areaColor: '#e1261c', }, }, }, series: [ { //用geo渲染地图,此项可不要,否则会重复渲染 id: 'population', type: 'map', roam: false, // map: 'world', // animationDurationUpdate: 1000, // universalTransition: true, // data: data, linestyle:{ // emphasis: { // color:'#e1261c' // }, // color:'rgba(255,255,255,1)', }, // tooltip: { // show: true, // backgroundColor: '#e1261c', // }, // label: { // emphasis: { // show: false, //开启悬浮事件 // color: '#D4EEFF',//字体颜色 // // backgroundColor:'#e1261c', // } // }, }, //描点配置 { name: 'RDC', type: 'scatter', coordinateSystem: 'geo', data: getsimboldata('china', RDC_ARR), symbol: 'image://?/html/static/images/add.png',//自定义描点图片 symbolSize: function (val) { return 20; }, selectedMode: 'single', select:{//开启选中,做自动选中必须开启 disabled: false, label:{ show:true, } }, label: { normal: { show: false, formatter: function (params) { return params.name; }, position: 'left', color: '#e1261c', fontSize: '12', }, emphasis: { show: true, }, }, itemStyle: { normal: { color: '#4bbbb2', borderWidth: 2, borderColor: '#b4dccd', }, }, }, ] }; myChartMap.setOption(mapOption); myChartMap.on('click',function(params){ //判断是点击scatter描点 给外部列表增加active if(params.seriesType == 'scatter'){ let name = params.name; $('div[data-title="'+name+'"]').addClass("active").siblings().removeClass('active'); } }) function getsimboldata(mapName, XXX_ARR) { //console.log(mapName); let final_arr = []; for (let arr of XXX_ARR) { if (mapName === 'china') { final_arr = final_arr.concat(arr.locs); } else if (mapName === arr.province) { return arr.locs; } } // console.log(final_arr); return final_arr; } //列表点击事件 $(document).on('click','.con_Locations .main',function(){ //设置描点选中 myChartMap.dispatchAction({ type: 'select', name: $(this).data('title') }); }) </script>
参考:echarts图表集
Echarts 地图设置鼠标hover区块颜色,地图描点,描点选中
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2290.html
相关文章
-
NET餐厅管理系统前端js-dwz.dialog改变原始层的大小
-
H5、jquery实现滚动加载下一页 瀑布流布局
-
(其他页面问题)基于HTML CSS JavaScript的网页项目大作业其他页面部分(含前后端,Jquery,Bootstrap,Animate.css,Node等)
-
JQuery - template.js 完美解决动态展示轮播图,轮播图不显示问题
-
jquery初始化方法
-
JavaScript学习之旅10------掌握jQuery:实用应用案例深度解析
-
echarts实现一个3d效果柱形图
-
echarts 动态展示title以及动态展示tooltip
-
基于Flask Echarts 爬虫的疫情监控系统
-
Echarts 地图 带涟漪特效的散点图
发布的文章
NET餐厅管理系统前端js-dwz.dialog改变原始层的大小
2024-03-04 10:03:39
H5、jquery实现滚动加载下一页 瀑布流布局
2024-03-04 10:03:38
(其他页面问题)基于HTML CSS JavaScript的网页项目大作业其他页面部分(含前后端,Jquery,Bootstrap,Animate.css,Node等)
2024-03-04 10:03:22
基于javaweb mysql的jsp servlet毕业生离校管理系统(java jsp servlet jquery mysql)
2024-03-04 10:03:13
JQuery - template.js 完美解决动态展示轮播图,轮播图不显示问题
2024-03-04 10:03:13
jquery初始化方法
2024-03-04 10:03:13
JavaScript学习之旅10------掌握jQuery:实用应用案例深度解析
2024-03-04 10:03:13
echarts实现一个3d效果柱形图
2024-03-04 10:03:10
echarts 动态展示title以及动态展示tooltip
2024-03-04 10:03:09
基于Flask Echarts 爬虫的疫情监控系统
2024-03-04 10:03:08
大家推荐的文章