版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_38959210/article/details/81477332
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="js/jquery-2.0.0.js" ></script>
<script type="text/javascript" src="js/echarts.min.js" ></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:500px;"></div>
</body>
<script type="text/javascript">
$.get('jspro/wuzhong.json', function (gansuJson){
echarts.registerMap('北京', gansuJson);
var chart = echarts.init(document.getElementById('main'));
option = {
title: {
x: 'left',
y: 'top',
text: '',
subtext:""
},
tooltip: {
trigger: 'item',
//formatter: '{b}<br/>{c} (人)'
//pointFormat: '{series.name}: <b>{point.y:.0f} ({point.percentage:.1f}%)</b>'
formatter:function(value){
return value.name+" "+value.value+"人";
}
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
// visualMap: {
// min: 170259,
// max: 401178,
// text:['max','min'],
// realtime: false,
// calculable: true,
// inRange: {
// color: ['lightskyblue','yellow', 'orangered']
// }
// },
series:[
{
name:'人口数量',
type:'map',
map:'北京',
mapLocation:{
y:100
},
itemSytle:{
normal:{label:{show:true}},
emphasis:{label:{show:false}}
},
label: {
normal: {show: true},
emphasis: {show: true},
},
data:[
{name:'利通区',value:401178},
{name:'青铜峡市',value:281953},
{name:'盐池县',value:170259},
{name:'红寺堡区',value:171110},
{name:'同心县',value:371027}
],
}
],
};
chart.setOption(option);
//悬浮事件后获取name和value的值
chart.on("mouseover",function(params){
var name=params.name;
var value=params.value;
console.info(name+"\n"+value);
})
var timer = null;
total = 11; // series.data.length
var count = 1;
var count1 = 0;
function autoTip() {
setInterval(function() {
var curr = count % total;
//console.info("curr:"+curr);
chart.dispatchAction({
type: 'mapSelect',
seriesIndex: 0, // 因为只有一组数据，所以此处应为0
dataIndex: curr
});
count += 1;
}, 1000);
setInterval(function() {
var curr1 = count1 % total;
// console.info("curr1:"+curr1);
chart.dispatchAction({
type: 'mapUnSelect',
seriesIndex: 0, // 因为只有一组数据，所以此处应为0
dataIndex: curr1
});
count1 += 1;
}, 1000);
}
//autoTip();
autohover();
function autohover(data){
var count = 0;
var timeTicket = null;
var dataLength = 11;//此处设置的是需要轮播的次数
timeTicket && clearInterval(timeTicket);
timeTicket = setInterval(function() {
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
});
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: (count) % dataLength
});
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: (count) % dataLength
});
count++;
}, 1000);
chart.on('mouseover', function(params) {
clearInterval(timeTicket);
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0
});
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: params.dataIndex
});
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: params.dataIndex,
});
});
chart.on('mouseout', function(params) {
timeTicket && clearInterval(timeTicket);
timeTicket = setInterval(function() {
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
});
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: (count) % dataLength
});
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: (count) % dataLength
});
count++;
}, 1000);
});
}
});
</script>
</html>