继续阅读百度地图组件,tooltip数据自动切换(代码可以直接复制使用)">百度地图组件,tooltip数据自动切换(代码可以直接复制使用) - Echarts可视化教程继续阅读百度地图组件,tooltip数据自动切换(代码可以直接复制使用)" />

Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

百度地图组件,tooltip数据自动切换(代码可以直接复制使用)

//js代码

var uploadedDataURL = 'components/map/wenzhou.json';

function cityMap() {
	var myChart = echarts.init(document.getElementById('map'));
	$.get(uploadedDataURL, function(geoJson) {
		myChart.hideLoading();
		echarts.registerMap('中国各省市县形状', geoJson);
		var data = [{
				name: "鹿城区",
				value: 295443
			},
			{
				name: "瓯海区",
				value: 238643
			},
			{
				name: "永嘉县",
				value: 137432
			},
			{
				name: "龙湾区",
				value: 165998
			},
			{
				name: "洞头区",
				value: 270643
			},
			{
				name: "乐清市",
				value: 482876
			},
			{
				name: "瑞安市",
				value: 126311
			},
			{
				name: "平阳县",
				value: 213321
			},
			{
				name: "文成县",
				value: 21120
			},
			{
				name: "苍南县",
				value: 23210
			},
			{
				name: "龙港市",
				value: 245620
			},
			{
				name: "泰顺县",
				value: 21120
			}
		];
		var percent = 0
		for(var i=0; i<data.length; i++){="" percent="" +="data[i].value" }="" option="{" tooltip:="" {="" trigger:="" 'item',="" formatter:="" function(params)="" return="" params.name="" '="" :="" params.value="" '('="" (params.value="" *="" 100).tofixed(2)="" '%)';="" },="" "geo":="" "map":="" "中国各省市县形状",="" "layoutcenter":="" ["50%",="" "50%"],="" "layoutsize":="" "90%",="" "roam":="" true,="" 是否允许缩放="" "maplocation":="" "width":="" "110%",="" "height":="" "97%"="" label:="" normal:="" 静态的时候展示样式="" show:="" 是否显示地图省份得名称="" textstyle:="" color:="" "#fff",="" fontsize:="" 12="" emphasis:="" 动态展示的样式="" '#fff',="" itemstyle:="" areacolor:="" '#0c52ca',="" bordercolor:="" '#1466d3',="" 线="" shadowcolor:="" '#092f8f',="" 外发光="" shadowblur:="" 20="" '#0a2dae',="" 悬浮区背景="" series:="" [{="" type:="" 'map',="" map:="" 'wenzhou',="" geoindex:="" 0,="" aspectscale:="" 0.75,="" 长宽比="" showlegendsymbol:="" false,="" 存在legend时显示="" false="" '#fff'="" roam:="" '#031525',="" '#3b5077',="" '#2b91b7'="" animation:="" data:="" data="" }]="" mychart.setoption(option);="" window.addeventlistener("resize",="" function()="" mychart.resize();="" })="" 轮播效果="" var="" hourindex="0;" fhourtime="null;" mychart.dispatchaction({="" "downplay",="" seriesindex:="" });="" "highlight",="" dataindex:="" "showtip",="" hourindex++;="" if="" (hourindex=""> data.length) {
				hourIndex = 0;
			}
		}, 2000);
		//鼠标移入停止轮播
		myChart.on("mousemove", function(e) {
			clearInterval(fhourTime)
			myChart.dispatchAction({
				type: "downplay",
				seriesIndex: 0,
			});
			myChart.dispatchAction({
				type: "highlight",
				seriesIndex: 0,
				dataIndex: e.dataIndex
			});
			myChart.dispatchAction({
				type: "showTip",
				seriesIndex: 0,
				dataIndex: e.dataIndex
			});
		})
		//鼠标移出恢复轮播
		myChart.on("mouseout", function() {
			fhourTime = setInterval(function() {
				myChart.dispatchAction({
					type: "downplay",
					seriesIndex: 0,

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

点击展开全文

相关文章

  1. 如何利用ECharts中使用地图热力图展示城市热度
  2. 如何利用ECharts中使用地图展示数据
  3. 百度Echarts地图系列之2020-2023年全国旅行路线图
  4. 百度Echarts地图现实定时自动切换tooltip样式调整
  5. 百度Echarts地图现实定时自动切换