想做一个这样的效果,以某个水库为中心点,展示它周围的一些其他点。现在这些点的经纬度坐标都已经有了,怎么能转换成平面的XY轴的坐标呢?
这个图我现在使用的是highcharts的极值图,图表的代码如下:
var data = [
{
'name': '降雨点1',
'x': 10,
'y': 20,
'jyl': 10
},
{
'name': '降雨点2',
'x': 15,
'y': 17,
'jyl': 0.5
}
];
var chartOptions = {
chart: {
polar: true
},
title: {
text: null
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{
backgroundColor: '#EDF3FF'
}]
},
legend: {
enabled: false
},
credits: {
// 禁用版权信息
enabled: false
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
title: {
text: '达洪江水库',
y: 70
},
labels: {
formatter: function () {
switch (this.value){
case 0:
return '北';
case 45:
return '东北';
case 90:
return '东';
case 135:
return '东南';
case 180:
return '南';
case 225:
return '西南';
case 270:
return '西';
case 315:
return '西北';
}
}
},
tickmarkPlacement: 'on'
},
yAxis: {
min: 0,
labels:{
// 设置不显示刻度值
enabled:false
},
// title: {
// text: '123'
// }
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
tooltip: {
useHTML: true,
pointFormatter: function(){
return '<div style="font-size:12px;">雨量:' + this.series.userOptions.jyl + ' mm</div>';
},
style: {
'fontSize': '14px'
}
},
series: []
};
for(var i=0;i<data.length;i++){
var color = '';
var jyl = data[i].jyl
if(jyl == 0){
color = '#fff';
} else if(jyl > 0 && jyl < 10){
color = '#A5F394';
} else if(jyl >= 10 && jyl < 25){
color = '#0edd1d';
} else if(jyl >= 25 && jyl < 50){
color = '#63B6FF';
} else if(jyl >= 50 && jyl < 100){
color = '#2100FF';
} else if(jyl >= 100 && jyl < 250){
color = '#DE08CE';
}
chartOptions.series.push({
type: 'scatter',
name: data[i].name,
// data: result,
data: [[data[i].x, data[i].y]],
color: color,
marker: {
symbol: 'circle'
},
jyl: jyl,
reservoirName: data[i].name
});
}
var chart = Highcharts.chart('container', chartOptions);
// console.log('chart', chart.series[0].data);
如何才能实现,大家有什么想法或者经验,求助求助。
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…