| 关于echarts实现地图并显示各省份名称及不同块显示不同原因，最后循环播放tooltip信息 | 您所在的位置：网站首页 › 大连在哪个省市地图上的位置 › 关于echarts实现地图并显示各省份名称及不同块显示不同原因，最后循环播放tooltip信息 |
关于echarts实现地图并显示各省份名称及不同块显示不同原因，最后循环播放tooltip信息
|
首先是要实现一个地图，显示每个省份的名字，首先准备要渲染的数据，根据你自己要求，接口返回的也可以 var mapData = [{ id: 1, name: '北京', value: 30 }, { id: 2, name: '广东', value: 29 }, { id: 3, name: '四川', value: 28 }, { id: 4, name: '上海', value: 27 }, { id: 5, name: '山东', value: 26 }, { id: 6, name: '江苏', value: 25 }, { id: 7, name: '浙江', value: 4.51 }, { id: 8, name: '河南', value:24 }, { id: 9, name: '湖南', value: 23 }, { id: 10, name: '陕西', value: 22 }, { id: 11, name: '河北', value: 21 }, { id: 12, name: '山西', value: 20 }, { id: 13, name: '湖北', value: 19 }, { id: 14, name: '安徽', value: 18 }, { id: 15, name: '福建', value: 17 }, { id: 16, name: '重庆', value: 16 }, { id: 17, name: '天津', value: 15 }, { id: 18, name: '江西', value: 14 }, { id: 19, name: '广西', value: 13 }, { id: 20, name: '辽宁', value: 12 }, { id: 21, name: '内蒙古', value: 11 }, { id: 22, name: '吉林', value: 10 }, { id: 23, name: '贵州', value: 9 }, { id: 24, name: '黑龙江', value: 8 }, { id: 25, name: '甘肃', value: 6 }, { id: 26, name: '云南', value: 7 }, { id: 27, name: '新疆', value: 5 }, { id: 28, name: '海南', value: 5 }, { id: 29, name: '宁夏', value: 4 }, { id: 30, name: '香港', value: 4 }, { id: 31, name: '青海', value:3 }, { id: 32, name: '台湾', value: 3 }, { id: 33, name: '澳门', value: 2 }, { id: 34, name: '西藏', value: 1 }, ]然后用echarts 生成地图 function getMapData() { //这是绘制canvas地图的容器 var myChart = echarts.init(document.getElementById("map")); var mapName = 'china' var geoCoordMap = {}; /*获取地图数据*/ myChart.showLoading(); //拿到各个省市的数据 var mapFeatures = echarts.getMap(mapName).geoJson.features; myChart.hideLoading(); mapFeatures.forEach(function (v) { // 地区名称 var name = v.properties.name; // 地区经纬度 geoCoordMap[name] = v.properties.cp; }); //生成地图的option option = { visualMap: { min: 0, max: 1500, left: 'left', top: 'bottom', text: ['高', '低'], inRange: { color: ['#72ACFF', '#4180D9'] }, show: false, }, geo: { map: 'china', roam: false, zoom: 1.23, }, series: [{ name: '数量占比', type: 'map', geoIndex: 0, data: mapData, }] }; myChart.setOption(option);生成之后就会发现颜色不是那么好看，所以我们改一下hover上去的颜色 在geo里面添加以下配置 geo: { label: { normal: { show: true, fontSize: '10', color: '#fff' }, emphasis: { color:'#010D39', }, }, itemStyle: { normal: { borderColor: 'rgba(0, 0, 0, 0.2)' }, emphasis: { color:"#010D39", areaColor: '#5E97FF', shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } },如果你需要给特定的区域显示不同的颜色的话，那么你需要在visualMap里面配置以下参数 visualMap: { pieces: [ { gt: 12, label: '>12', color: '#1657B6' }, { gte: 5, lte: 8, label: '5 - 8', color: '#4180D9' }, { gte: 0, lt: 5, label: '0 - 5', color: '#72ACFF' } ], },最后是自动播放tooltip，添加以下代码 var index = 0; //播放所在下标 var mTime = setInterval(function() { myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index }); index++; if(index > mapData.length -1) { index = 0; } }, 1000);这就完了？并没有，还需要选中一下当前播放块的颜色，不然你也不知道是那一块儿的数据，所以我们需要在data里面默认一个选中 然后在播放的时候添加一下相关的代码 function intervalMTime() { mTime = setInterval(function () { $.each(mapData, function (i, item) { item.selected = false }) mapData[index].selected = true myChart.setOption(option); myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index }); index++; if (index > mapData.length - 1) { index = 0; } }, 3000); }到现在你已经能看到相关效果了，但是不久你就会发现当鼠标hover上去的时候，就会出现问题，所以得写一下监听方法 //鼠标移入 myChart.on('mouseover', function (data) { index = 0 clearInterval(mTime) }) //鼠标移出 myChart.on('mouseout', function (data) { intervalMTime() })最后附上完整代码 function getMapData() { var myChart = echarts.init(document.getElementById("map")); var mapName = 'china' var mapData = [{ id: 1, name: '北京', value: 30 }, { id: 2, name: '广东', value: 29 }, { id: 3, name: '四川', value: 28 }, { id: 4, name: '上海', value: 27 }, { id: 5, name: '山东', value: 26 }, { id: 6, name: '江苏', value: 25 }, { id: 7, name: '浙江', value: 4.51 }, { id: 8, name: '河南', value:24 }, { id: 9, name: '湖南', value: 23 }, { id: 10, name: '陕西', value: 22 }, { id: 11, name: '河北', value: 21 }, { id: 12, name: '山西', value: 20 }, { id: 13, name: '湖北', value: 19 }, { id: 14, name: '安徽', value: 18 }, { id: 15, name: '福建', value: 17 }, { id: 16, name: '重庆', value: 16 }, { id: 17, name: '天津', value: 15 }, { id: 18, name: '江西', value: 14 }, { id: 19, name: '广西', value: 13 }, { id: 20, name: '辽宁', value: 12 }, { id: 21, name: '内蒙古', value: 11 }, { id: 22, name: '吉林', value: 10 }, { id: 23, name: '贵州', value: 9 }, { id: 24, name: '黑龙江', value: 8 }, { id: 25, name: '甘肃', value: 6 }, { id: 26, name: '云南', value: 7 }, { id: 27, name: '新疆', value: 5 }, { id: 28, name: '海南', value: 5 }, { id: 29, name: '宁夏', value: 4 }, { id: 30, name: '香港', value: 4 }, { id: 31, name: '青海', value:3 }, { id: 32, name: '台湾', value: 3 }, { id: 33, name: '澳门', value: 2 }, { id: 34, name: '西藏', value: 1 }, ] var geoCoordMap = {}; /*获取地图数据*/ myChart.showLoading(); var mapFeatures = echarts.getMap(mapName).geoJson.features; myChart.hideLoading(); mapFeatures.forEach(function (v) { // 地区名称 var name = v.properties.name; // 地区经纬度 geoCoordMap[name] = v.properties.cp; }); option = { tooltip: { formatter: function (params) { return params.seriesName + '' + params.name + '：' + params.value + "%" } }, visualMap: { min: 0, max: 1500, left: 'left', top: 'bottom', text: ['高', '低'], inRange: { color: ['#72ACFF', '#4180D9'] }, show: false, pieces: [ { gt: 12, label: '>12', color: '#1657B6' }, { gte: 5, lte: 8, label: '5 - 8', color: '#4180D9' }, { gte: 0, lt: 5, label: '0 - 5', color: '#72ACFF' } ], }, geo: { map: 'china', roam: false, zoom: 1.23, label: { normal: { show: true, fontSize: '10', color: '#fff' }, emphasis: { //动态展示的样式 color:'#010D39', }, }, itemStyle: { normal: { borderColor: 'rgba(0, 0, 0, 0.2)' }, emphasis: { color:"#010D39", areaColor: '#5E97FF', shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }, series: [{ name: '数量占比', type: 'map', geoIndex: 0, data: mapData, }] }; myChart.setOption(option); var index = 0; //播放所在下标 var mTime = setInterval(function() { myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index }); index++; if(index > mapData.length) { index = 0; } }, 1000); } |
最近接到这个需求，要把一些数据展示在地图上，并且能够自动播放，毕竟这是个大屏数据的项目，话不多少，直接上代码
geo里面加上相关配置【本文地址】
公司简介
联系我们