2019-08-07 地图自动轮播
var mapName = 'china'
var data = [
{name:"北京",value:199},
{name:"天津",value:42},
{name:"河北",value:102},
{name:"山西",value:81},
{name:"内蒙古",value:47},
{name:"辽宁",value:67},
{name:"吉林",value:82},
{name:"黑龙江",value:123},
{name:"上海",value:24},
{name:"江苏",value:92},
{name:"浙江",value:114},
{name:"安徽",value:109},
{name:"福建",value:116},
{name:"江西",value:91},
{name:"山东",value:119},
{name:"河南",value:137},
{name:"湖北",value:116},
{name:"湖南",value:114},
{name:"重庆",value:91},
{name:"四川",value:125},
{name:"贵州",value:62},
{name:"云南",value:83},
{name:"西藏",value:9},
{name:"陕西",value:80},
{name:"甘肃",value:56},
{name:"青海",value:10},
{name:"宁夏",value:18},
{name:"新疆",value:180},
{name:"广东",value:123},
{name:"广西",value:59},
{name:"海南",value:14},
];
var geoCoordMap = {};
var toolTipData = [
{name:"北京",value:[{name:"科技人才总数",value:95},{name:"理科",value:82}]},
{name:"天津",value:[{name:"文科",value:22},{name:"理科",value:20}]},
{name:"河北",value:[{name:"文科",value:60},{name:"理科",value:42}]},
{name:"山西",value:[{name:"文科",value:40},{name:"理科",value:41}]},
{name:"内蒙古",value:[{name:"文科",value:23},{name:"理科",value:24}]},
{name:"辽宁",value:[{name:"文科",value:39},{name:"理科",value:28}]},
{name:"吉林",value:[{name:"文科",value:41},{name:"理科",value:41}]},
{name:"黑龙江",value:[{name:"文科",value:35},{name:"理科",value:31}]},
{name:"上海",value:[{name:"文科",value:12},{name:"理科",value:12}]},
{name:"江苏",value:[{name:"文科",value:47},{name:"理科",value:45}]},
{name:"浙江",value:[{name:"文科",value:57},{name:"理科",value:57}]},
{name:"安徽",value:[{name:"文科",value:57},{name:"理科",value:52}]},
{name:"福建",value:[{name:"文科",value:59},{name:"理科",value:57}]},
{name:"江西",value:[{name:"文科",value:49},{name:"理科",value:42}]},
{name:"山东",value:[{name:"文科",value:67},{name:"理科",value:52}]},
{name:"河南",value:[{name:"文科",value:69},{name:"理科",value:68}]},
{name:"湖北",value:[{name:"文科",value:60},{name:"理科",value:56}]},
{name:"湖南",value:[{name:"文科",value:62},{name:"理科",value:52}]},
{name:"重庆",value:[{name:"文科",value:47},{name:"理科",value:44}]},
{name:"四川",value:[{name:"文科",value:65},{name:"理科",value:60}]},
{name:"贵州",value:[{name:"文科",value:32},{name:"理科",value:30}]},
{name:"云南",value:[{name:"文科",value:42},{name:"理科",value:41}]},
{name:"西藏",value:[{name:"文科",value:5},{name:"理科",value:4}]},
{name:"陕西",value:[{name:"文科",value:38},{name:"理科",value:42}]},
{name:"甘肃",value:[{name:"文科",value:28},{name:"理科",value:28}]},
{name:"青海",value:[{name:"文科",value:5},{name:"理科",value:5}]},
{name:"宁夏",value:[{name:"文科",value:10},{name:"理科",value:8}]},
{name:"新疆",value:[{name:"文科",value:36},{name:"理科",value:31}]},
{name:"广东",value:[{name:"文科",value:63},{name:"理科",value:60}]},
{name:"广西",value:[{name:"文科",value:29},{name:"理科",value:30}]},
{name:"海南",value:[{name:"文科",value:8},{name:"理科",value:6}]},
];
/*获取地图数据*/
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;
});
console.log(data)
console.log(toolTipData)
var max = 480,
min = 9; // todo
var maxSize4Pin = 100,
minSize4Pin = 20;
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
};
option = {
tooltip: {
padding: 0,
enterable: true,
transitionDuration: 1,
textStyle: {
color: '#000',
decoration: 'none',
},
// position: function (point, params, dom, rect, size) {
// return [point[0], point[1]];
// },
formatter: function(params) {
console.log(params)
var tipHtml = '';
tipHtml = '<div style="width:200px;height:200px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'
+'<div style="width:80%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">'+'<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">'+'</i>'
+'<span style="margin-left:10px;color:#fff;font-size:16px;">'+params.name+'</span>'+'</div>'
+'<div style="padding:10px">'
+'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">'+'</i>'
+'单位总数：'+'<span style="color:#11ee7d;margin:0 6px;">'+toolTipData.length+'</span>'+'个'+'</p>'
+'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">'+'</i>'
+'总人数：'+'<span style="color:#f48225;margin:0 6px;">'+toolTipData.length+'</span>'+'个'+'</p>'
+'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">'+'</i>'
+'总人数：'+'<span style="color:#f4e925;margin:0 6px;">'+toolTipData.length+'</span>'+'个'+'</p>'
+'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">'+'</i>'
+'总人数：'+'<span style="color:#25f4f2;margin:0 6px;">'+toolTipData.length+'</span>'+'个'+'</p>'
+'</div>'+'</div>';
// setTimeout(function() {
// tooltipCharts(params.name);
// }, 10);
return tipHtml;
}
},
visualMap: {
show: true,
min: 0,
max: 200,
left: '10%',
top: 'bottom',
calculable: true,
seriesIndex: [1],
inRange: {
color: ['#04387b', '#467bc0'] // 蓝绿
}
},
geo: {
show: true,
map: mapName,
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#023677',
borderColor: '#1180c7',
},
emphasis: {
areaColor: '#4499d0',
}
}
},
series: [{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function(val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#fff'
}
}
},
{
type: 'map',
map: mapName,
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: data
},
{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 6,
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 10)),
symbolSize: function(val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'left',
show: false
}
},
itemStyle: {
normal: {
color: 'yellow',
shadowBlur: 10,
shadowColor: 'yellow'
}
},
zlevel: 1
},
]
};
var index = 0; //播放所在下标
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index
});
var timerout = setInterval(function() {
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index
});
index++;
if(index > data.length) {
index = 0;
}
},3000)
