Echart 如何在现有的地图上，加点(利用地理座标)
各位早安
我以Echart做了中国地图，目前功能是可以显示各省的总销量
我想实现，比如某一省，在某个坐标(经伟度)上的店舖的所在地
一般会设所有的位置
geoCoordMap = {"北京库":[116.53,40.16],"成都库":[103.95,30.56],……
某一店舖的值
var data = [{name:"北京库",value:199900},{name:"成都库DC",value:133693}……
我希望在不改变这张图的基础上(维持现在的色及格式)，加入上面的讯息。
用圆圈之类的 , 请问我js的语法要怎么写呢
无论值大小，圆圈大小一样就可以了
附上图二，中国地图的语法
<!DOCTYPE html>
ECharts
#china-map {width:1000px; height: 700px;margin: auto;}
<div id="china-map"></div>
<script>
var myChart = echarts.init(document.getElementById('china-map'));
function randomData() {
return Math.round(Math.random()*1000);
}
option = {
title: {
text: '省份销量额',
subtext: '-',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
data:['销售额']
},
visualMap: {
min: 0,
max: 1000000,
left: 'left',
top: 'bottom',
text: ['高','低'], // 文本，默认为数值文本
calculable: true
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
series: [
{
name: 'iphone5',
type: 'map',
mapType: 'china',
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data:[{name:"广东",value:426661},{name:"江苏",value:230421},{name:"浙江",value:220367},{name:"北京",value:202471},{name:"上海",value:163766},{name:"四川",value:163676},{name:"山东",value:148341},{name:"河南",value:120000},{name:"湖北",value:114175},{name:"福建",value:101498},{name:"辽宁",value:95904},{name:"湖南",value:93790},{name:"河北",value:91469},{name:"重庆",value:89959},{name:"安徽",value:80801},{name:"陕西",value:78940},{name:"云南",value:63423},{name:"广西",value:62782},{name:"黑龙江",value:58703},{name:"江西",value:58093},{name:"天津",value:56108},{name:"吉林",value:50502},{name:"贵州",value:47750},{name:"山西",value:46641},{name:"新疆",value:44705},{name:"内蒙古",value:41472},{name:"甘肃",value:28612},{name:"海南",value:24648},{name:"宁夏",value:13047},{name:"青海",value:9576},{name:"西藏",value:5352},{name:"香港",value:467},{name:"台湾",value:139} ]
}
]
};
myChart.setOption(option);
myChart.on('mouseover', function (params) {
var dataIndex = params.dataIndex;
console.log(params);
});
</script>
</body>
var geoCoordMap = {
"XXXX":[119.16,33.95],
"YYYY":[119.50,32.08],
};
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).concat(data[i].add)
});
}
}
return res;
};
在series中加入
{
name: '植物种质库',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData([
{name:"XXXX",value:3,add:3213},
{name:"YYYY",value:3,add:3213}
]),
symbolSize: 4,
itemStyle : {
normal : {
color:'#27EA16',
borderColor : '#27EA16',
borderWidth : 1.5,
},
}
}
$.get('common/echart/jiangsu.json', function(jcJson) {
echarts.registerMap('江苏', jcJson);
var myChart = echarts.init(document.getElementById('jiangsu'));
/* myChart.showLoading({
text:'正在加载'
}); */
var geoCoordMap = {
//植物
"紫菜种质资源库":[119.16,33.95],
"药用植物种质资源圃":[119.50,32.08],
"球根花卉种质资源库":[118.16,34.22],
"枇杷、杨梅种质资源圃":[119.23,34.28],
"板栗种质资源圃":[119.48,31.43],
"银杏种质资源圃":[119.56,31.74],
"杨树种质资源圃":[121.26,32.30],
"农业种质资源中期库":[118.665821,31.875428],
"果树种质圃":[119.94,32.76],
"柳树种质资源圃":[118.44,33.64],
"茶树种质资源圃":[120.95,31.39],
"草坪草种质资源库":[120.63,31.16],
"道地中药资源标准物质及指纹图谱库":[119.87,33.74],
//动物
"罗氏沼虾种质资源库":[118.43,32.95],
"优质特色家蚕种质资源库":[119.76,32.08],
"苏钟猪保种场":[116.85,34.56],
"山区水牛保种场":[118.53,34.36],
"河豚鱼种质资源库":[119.86,31.43],
"重要经济鱼类低温种质库":[119.56,32.44],
"翘嘴红鲌种质资源库":[121.70,31.80],
"龟鳖种质资源库":[118.96,31.36],
"斑点叉尾鮰种质资源库":[120.12,33.88],
"海水养殖甲壳类种质资源库":[118.90,34.51],
};
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).concat(data[i].add)
});
}
}
return res;
};
option = {
title: {
text: '库圃分布',
x:'80%',
y:'15%',
textStyle: {
color: '#14c8d4',
fontSize:'16'
}
},
color : [ 'rgba(255, 255, 255, 0.8)', 'rgba(14, 241, 242, 0.8)',
'rgba(37, 140, 249, 0.8)' ],
tooltip: {
/*trigger: 'item',
formatter: function (params) {
return params.data.name + ' :<br/> ' +'库圃数量:'+ params.value+'<br/>保存种质数:'+params.data.cp+'<br/>新增种质数:'+params.data.add;
}
formatter:'库圃数量:{c}<br/>+{c1}' */
},
legend: {
orient: 'vertical',
y: '75%',
x:'8%',
itemWidth:10,
itemHeight:6,
data:['市级','植物种质库','动物种质库'],
textStyle: {
color: '#fff'
}
},
/* visualMap: {
min: 0,
max: 5,
calculable: true,
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
},
textStyle: {
color: '#fff'
}
}, */
geo: {
map: '江苏',
top:'13.8%',
left:'13%',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#256081',
borderColor: '#111'
},
emphasis: {
areaColor: '#323c48'
}
}
},
series: [
{
name: '市级',
type: 'map',
map:"江苏",
top:'12%',
/* coordinateSystem: 'geo', */
data : [{name: '南通市', value:2,cp:13433,add:3213},
{name: '淮安市', value: '5',cp:13433,add:3213},
{name: '宿迁市', value: '2',cp:13433,add:3213},
{name: '徐州市', value: '3',cp:13433,add:3213},
{name: '连云港市', value: '2',cp:13433,add:3213},
{name: '盐城市', value: '5',cp:13433,add:3213},
{name: '泰州市', value: '7',cp:13433,add:3213},
{name: '扬州市', value: '1',cp:13433,add:3213},
{name: '镇江市', value: '4',cp:13433,add:3213},
{name: '常州市', value: '2',cp:13433,add:3213},
{name: '无锡市', value: '2',cp:13433,add:3213},
{name: '南京市', value: '1',cp:13433,add:3213},
{name: '苏州市', value: '3',cp:13433,add:3213}
],
symbolSize: 18,
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.data.name + ' :<br/> ' +'库圃数量:'+ params.value+'<br/>保存种质数:'+params.data.cp+'<br/>新增种质数:'+params.data.add;
}
},
itemStyle : {
normal : {
borderColor : '#72bfea',
borderWidth : 2,
areaColor : "#0f1b3e",//区域颜色
color:'#58c8fc'
},
emphasis : {
areaColor : "#377498",//区域颜色
}
},
label : {
normal : {
formatter : '{b}',
position : 'right',
show : true,
color : '#fff',
},
emphasis : {
color : '#eca803',
}
}
},
{
name: '植物种质库',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData([
{name:"紫菜种质资源库",value:3,add:3213},
{name:"药用植物种质资源圃",value:3,add:3213},
{name:"球根花卉种质资源库",value:3,add:3213},
{name:"枇杷、杨梅种质资源圃",value:1230,add:3213},
{name:"板栗种质资源圃",value:1123,add:3213},
{name:"银杏种质资源圃",value:213123,add:3213},
{name:"杨树种质资源圃",value:3123,add:3213},
{name:"农业种质资源中期库",value:3213,add:3213},
{name:"果树种质圃",value:3,add:3213},
{name:"柳树种质资源圃",value:3123,add:3213},
{name:"茶树种质资源圃",value:1232,add:3213},
{name:"草坪草种质资源库",value:3321,add:3213},
{name:"道地中药资源标准物质及指纹图谱库",value:1232,add:3213}
]),
symbolSize: 4,
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.data.name + '('+params.value[0]+','+params.value[1]+')<br/>保存种质数:'+params.value[2]+'<br/>新增种质数:'+params.value[3];
}
},
itemStyle : {
normal : {
color:'#27EA16',
borderColor : '#27EA16',
borderWidth : 1.5,
},
},
},{
name: '动物种质库',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData([
{name:"罗氏沼虾种质资源库",value:3,add:3213},
{name:"优质特色家蚕种质资源库",value:3,add:3213},
{name:"苏钟猪保种场",value:3,add:3213},
{name:"山区水牛保种场",value:1230,add:3213},
{name:"河豚鱼种质资源库",value:1123,add:3213},
{name:"重要经济鱼类低温种质库",value:213123,add:3213},
{name:"翘嘴红鲌种质资源库",value:3123,add:3213},
{name:"龟鳖种质资源库",value:3213,add:3213},
{name:"斑点叉尾鮰种质资源库",value:3,add:3213},
{name:"海水养殖甲壳类种质资源库",value:3123,add:3213}
]),
symbolSize: 4,
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.data.name + '('+params.value[0]+','+params.value[1]+')<br/>保存种质数:'+params.value[2]+'<br/>新增种质数:'+params.value[3];
}
},
itemStyle : {
normal : {
color:'#E2A322',
borderColor : '#E2A322',
borderWidth : 1.5,
},
},
},
]
}
myChart.setOption(option);
})