echarts scatter配置项内容和展示
配置项如下
var data = [{
name: '西藏自治区',
value: 6
},
{
name: '上海',
value: 10
},
{
name: '福建省',
value: 24
},
{
name: '云南省',
value: 24
},
{
name: '海南省',
value: 26
},
{
name: '吉林省',
value: 2815
},
{
name: '宁夏回族自治区',
value: 16
},
{
name: '张家港',
value: 52
},
{
name: '广东省',
value: 12
},
{
name: '青海省',
value: 16
},
{
name: '宜宾',
value: 58
},
{
name: '山西省',
value: 103
},
{
name: '广西壮族自治区',
value: 36
},
{
name: '重庆市',
value: 19
},
{
name: '贵州省',
value: 50
},
{
name: '陕西省',
value: 22
},
{
name: '北京',
value: 2
},
{
name: '内蒙古自治区',
value: 94
},
{
name: '辽宁省',
value: 100
},
{
name: '江苏省',
value: 28
},
{
name: '新疆维吾尔族自治区',
value: 47
},
{
name: '山东省',
value: 116
},
{
name: '江西省',
value: 86
},
{
name: '甘肃省',
value: 30
},
{
name: '四川省',
value: 30
},
{
name: '天津',
value: 64
},
{
name: '河南省',
value: 164
},
{
name: '湖南省',
value: 31
},
{
name: '浙江省',
value: 28
},
{
name: '河北省',
value: 161
},
{
name: '安徽省',
value: 77
},
{
name: '湖北省',
value: 23
},
{
name: '黑龙江省',
value: 145
}
];
var geoCoordMap = {
'西藏自治区': [91.11, 29.97],
'上海': [121.48, 31.22],
'福建省': [118.1, 24.46],
'云南省': [102.73, 25.04],
'寿光': [118.73, 36.86],
'海南省': [110.35, 20.02],
'吉林省': [125.35, 43.88],
'宁夏回族自治区': [106.27, 38.47],
'青海省': [101.74, 36.56],
'广东省': [109.12, 21.49],
'西安': [108.95, 34.27],
'金坛': [119.56, 31.74],
'东营': [118.49, 37.46],
'牡丹江': [129.58, 44.6],
'遵义': [106.9, 27.7],
'绍兴': [120.58, 30.01],
'扬州': [119.42, 32.39],
'常州': [119.95, 31.79],
'潍坊': [119.1, 36.62],
'重庆': [106.54, 29.59],
'台州': [121.420757, 28.656386],
'南京': [118.78, 32.04],
'滨州': [118.03, 37.36],
'贵阳': [106.71, 26.57],
'无锡': [120.29, 31.59],
'本溪': [123.73, 41.3],
'克拉玛依': [84.77, 45.59],
'渭南': [109.5, 34.52],
'马鞍山': [118.48, 31.56],
'陕西省': [107.15, 34.38],
'北京': [116.46, 39.92],
'内蒙古自治区': [110, 40.58],
'江苏省': [119.48, 31.43],
'新疆维吾尔自治区': [86.06, 41.68],
'山东省': [117, 36.65],
'江西省': [115.97, 29.71],
'甘肃省': [103.73, 36.03],
'四川省': [106.110698, 30.837793],
'天津': [117.2, 39.13],
'河南省': [112.44, 34.7],
'湖南省': [113, 28.21],
'浙江省': [118.88, 28.97],
'河北省': [116.7, 39.53],
'安徽省': [117.27, 31.86],
'湖北省': [114.31, 30.52],
'黑龙江省': [125.03, 46.58]
};
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;
};
function renderItem(params, api) {
var coords = [
[116.7, 39.53],
[103.73, 36.03],
[112.91, 27.87],
[120.65, 28.01],
[119.57, 39.95]
];
var points = [];
for (var i = 0; i < coords.length; i++) {
points.push(api.coord(coords[i]));
}
var color = api.visual('color');
return {
type: 'polygon',
shape: {
points: echarts.graphic.clipPointsByRect(points, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
})
},
style: api.style({
fill: color,
stroke: echarts.color.lift(color)
})
};
}
option = {
backgroundColor: '#404a59',
title: {
text: '全国主要城市空气质量',
subtext: 'data from PM25.in',
sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
bmap: {
center: [104.114129, 37.550339],
zoom: 5,
roam: true,
mapStyle: {
styleJson: [{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#044161"
}
},
{
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "boundary",
"elementType": "geometry",
"stylers": {
"color": "#064f85"
}
},
{
"featureType": "railway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#005b96",
"lightness": 1
}
},
{
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "geometry",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#00508b"
}
},
{
"featureType": "poi",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "green",
"elementType": "all",
"stylers": {
"color": "#056197",
"visibility": "off"
}
},
{
"featureType": "subway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "manmade",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "local",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "boundary",
"elementType": "geometry.fill",
"stylers": {
"color": "#029fd4"
}
},
{
"featureType": "building",
"elementType": "all",
"stylers": {
"color": "#1a5787"
}
},
{
"featureType": "label",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}
]
}
},
series: [{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'bmap',
data: convertData(data),
symbolSize: function(val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'bmap',
data: convertData(data.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 6)),
symbolSize: function(val) {
return val[2] / 10;
},
showEffectOn: 'emphasis',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
},
{
type: 'custom',
coordinateSystem: 'bmap',
renderItem: renderItem,
itemStyle: {
normal: {
opacity: 0.5
}
},
animation: false,
silent: true,
data: [0],
z: -10
}
]
};
h
截图如下
