echarts map地图自动高亮显示提示框轮播

35 篇文章 0 订阅
35 篇文章 0 订阅
function mapGeo(data) {
	 var chart = echarts.init(document.getElementById('mapGeo'));
	            var mapUrl = staticsUrl + '/js/echart-map/beijing.json';
	            $.get(mapUrl, function (mapJson) {
	                echarts.registerMap('beijing', mapJson);
	               
	                chart.setOption({
	                    tooltip: {
	                        trigger: 'item',
	                        formatter: function formatter(params) {
	                            return params.name + "<br/>\u70B9\u4F4D\u5907\u6848\u6570:" + params.data.locationCount + "<br/>\n                                \u70B9\u4F4D\u6D3B\u8DC3:" + params.data.active + "<br/>\n                                \u5F53\u65E5\u8FC7\u8F66\u8F86:" + params.data.pass + "<br/>\n                                \u5F53\u65E5\u8FC7\u8F66\u8F86\u53BB\u91CD:" + params.data.remoPass + "<br/>";
	                        },
		position:'inside'  //设置定位很重要不然提示框会偏移
	                    },
	                    series: [{
	                        name: '北京市各区多维数据统计',
	                        type: 'map',
	                        map: 'beijing',
	                        radius: '80%',
	                        layoutCenter: ['50%', '50%'],
	                        layoutSize: '100%',
	                        label: {
	                            normal: {
	                                show: true,
	                                textStyle: { color: "#fff" }
	                            },
	                            emphasis: {
	                                show: true,
	                                textStyle: { color: "#fff" }
	                            }
	                        },
	                        itemStyle: {
	                            normal: {
	                                borderWidth: .5, //区域边框宽度
	                                borderColor: '#fff', //区域边框颜色
	                                areaColor: "#0a89e2" //区域颜色
	                            },
	                            emphasis: {
	                                borderWidth: .5,
	                                borderColor: '#fff',
	                                areaColor: "#f7981f"
	                            }
	                        },
	                        // data : data//人口数据:例如[{name:'济南',value:'100万'},{name:'菏泽',value:'100万'}......]
	                        data: data
	                    }]
	                });
	            });
			var hourIndex=0;
			var fhourTime=null;
			 fhourTime=setInterval(function(){
				chart.dispatchAction({
					type:"downplay",
					seriesIndex:0,
				
				});
				chart.dispatchAction({
					type:"highlight",
					seriesIndex:0,
					dataIndex:hourIndex
				});
				chart.dispatchAction({
					type:"showTip",
					seriesIndex:0,
					dataIndex:hourIndex
				});
					hourIndex++;
					if(hourIndex>data.length){
						hourIndex=0;
					}
			},3000);
			//鼠标移入停止轮播
				chart.on("mousemove", function(e) {
							clearInterval(fhourTime)
							chart.dispatchAction({
								type: "downplay",
								seriesIndex: 0,
							});
							chart.dispatchAction({
								type: "highlight",
								seriesIndex: 0,
								dataIndex: e.dataIndex
							});
							chart.dispatchAction({
								type: "showTip",
								seriesIndex: 0,
								dataIndex: e.dataIndex
							});
						})
						//鼠标移出恢复轮播
				chart.on("mouseout", function() {
							fhourTime = setInterval(function() {
								chart.dispatchAction({
									type: "downplay",
									seriesIndex: 0,

								});
								chart.dispatchAction({
									type: "highlight",
									seriesIndex: 0,
									dataIndex: hourIndex
								});
								chart.dispatchAction({
									type: "showTip",
									seriesIndex: 0,
									dataIndex: hourIndex
								});
								hourIndex++;
								if (hourIndex > data.length) {
									hourIndex = 0;
								}
							}, 3000);
						})		
	        },

主要是使用了dispatchAction属性来做自动轮播,如果这个属性报错,请去官网下载最新版js文件

  • 7
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在 Echarts 中实现地图部分区域的高亮显示,你可以使用 Echarts 提供的地图组件和相关配置项来实现。下面是一个简单的示例代码: 首先,确保你已经引入了 Echarts 的 JavaScript 文件。然后,创建一个包含地图的容器,例如一个 `<div>` 元素,并为其设置一个固定的宽度和高度。 ```html <div id="map" style="width: 600px; height: 400px;"></div> ``` 接下来,使用 JavaScript 代码来初始化 Echarts 并配置地图的数据和样式。 ```javascript // 初始化 Echarts var myChart = echarts.init(document.getElementById('map')); // 地图数据配置 var option = { series: [{ type: 'map', map: 'china', // 使用中国地图 itemStyle: { normal: { // 设置默认状态下的地图区域样式 areaColor: '#ccc', borderColor: '#fff', borderWidth: 1 }, emphasis: { // 设置鼠标悬停时的高亮样式 areaColor: '#ff0000', borderColor: '#fff', borderWidth: 1 } }, data: [ {name: '北京', value: 100}, {name: '上海', value: 200}, {name: '广州', value: 300}, // 其他省份的数据... ] }] }; // 将配置项设置给 Echarts 实例 myChart.setOption(option); ``` 在上面的代码中,通过设置 `itemStyle` 中的 `normal` 和 `emphasis` 分别配置了默认状态和高亮状态下的地图区域样式。你可以根据自己的需求来调整这些样式。 最后,使用 `setOption` 方法将配置项设置给 Echarts 实例,即可在页面上显示出地图并实现区域高亮效果。 请注意,上面的示例中使用的是中国地图,你可以根据需要更换为其他地图数据。此外,你还可以根据自己的需求对其他 Echarts 地图配置项进行进一步的调整和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值