echarts effectScatter配置项内容和展示
配置项如下
var tianjin = "/asset/get/s/data-1528970339987-Hk2wnh1ZX.json";
echarts.extendsMap = function(id, opt){
var curGeoJson = {};
var levelColorMap = {
'1': 'rgba(241, 109, 115, .8)',
'2': 'rgba(255, 235, 59, .7)',
'3': 'rgba(147, 235, 248, 1)'
};
var defaultOpt = {
mapName: 'china', // 地图展示
goDown: false, // 是否下钻
bgColor: '#404a59', // 画布背景色
activeArea: [], // 区域高亮,同echarts配置项
data: [],
// 下钻回调(点击的地图名、实例对象option、实例对象)
callback: function(name, option, instance){}
};
if(opt) opt = this.util.extend(defaultOpt, opt);
// 层级索引
var name = [opt.mapName];
var idx = 0;
var pos = {
leftPlus: 115,
leftCur: 150,
left: 198,
top: 50
};
var line = [[0, 0], [8, 11], [0, 22]];
// style
var style = {
font: '18px "Microsoft YaHei", sans-serif',
textColor: '#eee',
lineColor: 'rgba(147, 235, 248, .8)'
};
var handleEvents = {
// 设置effectscatter
initSeriesData: function(data){
var temp = [];
for(var i = 0;i < data.length;i++){
var geoCoord = geoCoordMap[data[i].name];
if(geoCoord){
temp.push({
name: data[i].name,
value: geoCoord.concat(data[i].value, data[i].level)
});
}
};
return temp;
},
zoomAnimation: function(){
var count = null;
var zoom = function(per){
if(!count) count = per;
count = count + per;
// console.log(per,count);
chart.setOption({
geo: {
zoom: count
}
});
if(count < 1) window.requestAnimationFrame(function(){
zoom(0.2);
});
};
window.requestAnimationFrame(function(){
zoom(0.2);
});
}
}
var option = {
backgroundColor: opt.bgColor,
graphic: [{
type: 'group',
left: pos.left,
top: pos.top - 4,
children: [{
type: 'line',
left: 0,
top: -20,
shape: {
x1: 0,
y1: 0,
x2: 60,
y2: 0
},
style: {
stroke: style.lineColor,
}
}, {
type: 'line',
left: 0,
top: 20,
shape: {
x1: 0,
y1: 0,
x2: 60,
y2: 0
},
style: {
stroke: style.lineColor,
}
}]
}, {
id: name[idx],
type: 'group',
left: pos.left + 2,
top: pos.top,
children: [{
type: 'polyline',
left: 90,
top: -12,
shape: {
points: line
},
style: {
stroke: 'transparent',
key: name[0]
},
}, {
type: 'text',
left: 0,
top: 'middle',
style: {
text: name[0] === '天津' ? '天津' : name[0],
textAlign: 'center',
fill: style.textColor,
font: style.font
},
}, {
type: 'text',
left: 0,
top: 10,
style: {
text: 'TIANJIN',
textAlign: 'center',
fill: style.textColor,
font: '12px "Microsoft YaHei", sans-serif',
},
onclick: function(){
handleEvents.resetOption(chart, option, '天津');
}
}]
}],
geo: {
map: opt.mapName,
// roam: true,
zoom: 1,
label: {
normal: {
show: true,
textStyle: {
color: '#fff'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(128, 217, 248, 1)',
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
},
regions: opt.activeArea.map(function(item){
if(typeof item !== 'string'){
return {
name: item.name,
itemStyle: {
normal: {
areaColor: item.areaColor || '#389BB7'
}
},
label: {
normal: {
show: item.showLabel,
textStyle: {
color: '#fff'
}
}
}
}
}else{
return {
name: item,
itemStyle: {
normal: {
borderColor: '#91e6ff',
areaColor: '#389BB7'
}
}
}
}
})
},
series: [{
type: 'effectScatter',
coordinateSystem: 'geo',
// symbol: 'diamond',
showEffectOn: 'render',
rippleEffect: {
period: 15,
scale: 6,
brushType: 'fill'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: function(params){
return levelColorMap[params.value[3]];
},
shadowBlur: 10,
shadowColor: '#333'
}
},
data: handleEvents.initSeriesData(opt.data)
}]
};
chart.setOption(option);
}
$.getJSON(tianjin, function(geoJson){
echarts.registerMap('天津', geoJson);
var myChart = echarts.extendsMap('chart-panel', {
bgColor: '#154e90', // 画布背景色
mapName: '天津', // 地图名
goDown: true, // 是否下钻
// 下钻回调
callback: function(name, option, instance){
console.log(name, option, instance);
},
// 数据展示
data: []
});
})
截图如下
