先看上图↑
大家可以看到有两个类型的散点图!
至于 颜色的话下一篇再细说
需要每个省份坐标(包括东莞),有需要的话可以私信小编 免费提供哦!
来来上代码
series = [
{ //第一个series数据 可设置大小 未设置
type: "scatter", //类型
coordinateSystem:'geo',
data: convertData(this.chartData), //数据
symbolSize: 20,
markPoint:{
symbol:'pin',
},
dimensions:['name','value','long','lat'],
encode: {
lng: 'long',
lat: 'lat',
},
label: {
normal: {
// formatter: '{c}:{@[1]}',
position: "right",
show: false
},
emphasis: {
label:{
// show: true,
// formatter:"{c}",
position: "right",
}
}
},
itemStyle: {
normal: {
color: "#1174E3"
}
},
},
{
name: "Top 5",
type: "effectScatter",
coordinateSystem:'geo',
data: colldata(this.chartData), // 第二个series的数据 可设置大小
symbolSize: function (val,params) { //设置大小
if(val[1]<=500){
return 10
}
else if(val[1]<=1000 && val[1]>500){
return 20
}
else if(val[1]<=2000 && val[1]>1000){
return 25
}
else if(val[1]<=3000 && val[1]>2000){
return 30
}
else if(val[1]<=4000 && val[1]>3000){
return 35
}
else{
return 40
}
},
dimensions:['name','value','long','lat'],
encode: {
lng: 'long',
lat: 'lat',
},
showEffectOn: "render",
rippleEffect: {
brushType: "stroke"
},
hoverAnimation: true,
label: {
normal: {
// formatter: '{@name}:{@value}',
position: "right",
// show: true
},
emphasis: {
label:{
// show: true,
// formatter:"{@value}",
position: "right",
}
}
},
itemStyle: {
normal: {
color: "#6DC8EC",
shadowBlur: 10,
shadowColor: "#333"
}
},
zlevel: 1
}
];
大家可看到我的数据用了一个函数
var convertData = function (data) {
if(data){
var res = [];
for (var i = 0; i < data.length; i++) {
var r = [];
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
r.push(data[i].name,data[i].value,geoCoordMap[data[i].name][0],geoCoordMap[data[i].name][1],data[i].exdata)
res.push(r)
}
}
console.log(556,res)
return res;
}
};
var colldata = function(data){
if(data){
var res = [];
for (var i = 0; i < data.length; i++) {
// console.log(68,data[i])
for(var k=0;k<data[i].exdata.columns.length; k++){
var r = [];
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
r.push(data[i].name,data[i].exdata.row[2],geoCoordMap[data[i].name][0]+0.3,geoCoordMap[data[i].name][1]+0.3,data[i].exdata)
}
}
console.log(557,res)
res.push(r)
}
return res;
}
}
可以看一下 我第一个打印信息 就是第一个是 series里面的数据
数据格式就是套数组 然后第一个是省份 第二个是信息 第三个第四个都是坐标
打印的第二个信息就是第二个是 series里面的数据
数据格式都是一样的 只要不破坏前四个 后面随便写
因为第二个信息的坐标 我是在第一个信息的坐标 的基础上加了点坐标
因为不可能同样的数据写两边还都是不一样的东西
有点费时间 对客户不太友好!