效果
右侧代码链接:
数据结构
getCountryPriceRange: {
"msg": "操作成功",
"total": 54,
"flag": true,
"rows": [{
"code": "06",
"latitude": "122.868277704",
"name": "名称",
"projectpricesection": "[{\"name\":\"0\",\"value\":0},{\"name\":\"0\",\"value\":0},{\"name\":\"0\",\"value\":1},{\"name\":\"0\",\"value\":0},{\"name\":\"0\",\"value\":2},{\"name\":\"0\",\"value\":0}]",
"longitude": "11.7391506519"
}, {
"code": "09",
"latitude": "104.921349515",
"name": "名称",
"projectpricesection": "[{\"name\":\"小于\",\"value\":1},{\"name\":\"500\",\"value\":0},{\"name\":\"1000\",\"value\":3},{\"name\":\"5\",\"value\":0},{\"name\":\"1亿\",\"value\":1},{\"name\":\"5亿\",\"value\":0}]",
"longitude": "12.7074563632"
}],
"status": "C00000"
},
1.初始化方法
2.查数据
根据条件查数据
top1Click: function() {
ak_nav.clearAll();
$("#main_select_box3").css('display', 'flex'); // 显示变量框
var temp = {};
var sgzt_type3 = localStorage.getItem('sgzt_type3');
if (sgzt_type3 == 1) {
var projectStatus = akglobe_config.underConstruction;
if (projectStatus) {
projectStatus = projectStatus.join("','");
projectStatus = "'" + projectStatus + "'";
}
temp.projectstatus = projectStatus;
} else if (sgzt_type3 == 2) {
var year = (new Date).getFullYear();
temp.startTime = ak_right.changeDateFormat2(new Date(year, 0, 1).getTime());
temp.endTime = ak_right.changeDateFormat2(new Date(year, 11, 31).getTime());
}
var options = new Object();
options.url = "/manage-api/getCountryPriceRange";
options.type = "get";
options.data = temp;
options.errorback = akglobe_config.errBack;
options.callback = function(data) {
ak_left_click2.top1CallBack(data.rows,2);
ak_right_pie_money_all.init();
}
// 如果是测试环境 使用假数据
if(typep002==2){
ak_left_click2.top1CallBack(ak_ztqg.getCountryPriceRange.rows,2);
ak_right_pie_money_all.init();
}else{
akglobe_config.ajaxQuery(options);
}
},
3.获取到数据后判断
有的地图上不止饼图还有水滴图等统计方式,需要判断这个是要用什么统计标注
top1CallBack: function(data, type) {
var DEFAULT_STYLE22 = {
position: "absolute",
top: "0",
left: "0",
width: "120px",
height: "120px"
};
var result = data; // config.demodata_Department;
for (var i = 0; i < result.length; i++) {
var db = result[i];
var name = db.name;
var obj = new Object();
obj.name = db.name;
// obj.address = db.address;
obj.lat = db.latitude;
obj.lng = db.longitude;
if (db.latitude > 1000) {
continue
}
if (db.longitude > 1000) {
continue
}
obj.code = db.code;
var projectpricesection = JSON.parse(db.projectpricesection);
obj.projectpricesection = projectpricesection;
var position = new Cesium.Cartesian3.fromDegrees(obj.lat, obj.lng, 60);
var options = new Object();
options.style = DEFAULT_STYLE22;
var divicon = new DivIcon(viewer, position, obj.name);
var DEFAULT_STYLE223 = {
position: "absolute",
top: "0",
left: "0",
width: "25px",
height: "25px"
};
divicon.setStyle(DEFAULT_STYLE223);
var dbs = 0.53 * i;
if (dbs > 1) {
dbs = dbs / 3;
}
if (dbs > 1) {
dbs = dbs / 3;
}
obj.value = dbs; // parseflot
var objcharts = new Object();
objcharts.divicon = divicon;
objcharts.obj = obj; // 对象
// 去不同的 统计图
if (type == 1) {
this.addEcharts(objcharts); // 水滴
} else if (type == 2) { // 饼图
this.addEchartsPieMoney(objcharts);
} else if (type == 3) { //仪表盘
this.addEchartsYbp(objcharts);
}
this.arrCharts1.push(divicon);
}
},
4.渲染饼图标注
addEchartsPieMoney: function(objcharts) {
var obj = objcharts.obj;
var divicon = objcharts.divicon;
var value = obj.value; // 这里应该是实际的数组
var myChart = echarts.init(divicon._delegate);
var bgColor = '#E3F7FF';
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)',
position: 'right',
extraCssText: "z-index:999"
},
series: [{
name: objcharts.obj.name,
type: 'pie',
// radius: '55%',
radius: '95%',
color: config.pieColor,
center: ['50%', '50%'],
data: obj.projectpricesection,
label: {
normal: {
show: false,
position: 'inner'
}
},
minAngle: 0, // 最小角度
// roseType: 'angle',
itemStyle: {
// normal: {
// shadowBlur: 200,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
// }
label: {
// show:true,
// formatter:'{d}%'
show: true,
formatter: function(val) { //让series 中的文字进行换行
return val.name.split(" ").join("\n");
},
rich: {
// 这个'value'样式表示文字颜色为白色
dark: {
color: '#000',
}
}
},
labelLine: {
show: true,
length: 2,
color: ['#00a3db', '#f7c024', '#d7eff5', '#ffdd19', '#eb8d2d',
'#6bc7e6'
],
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
}
}]
};
myChart.setOption(option);
var canvas = divicon._delegate.childNodes[0].childNodes[0];
canvas.onclick = function(e) {
console.log(e);
console.log(value);
console.log(obj);
// alert('我被点击了' + value + JSON.stringify(obj));
// ak_right_pie.init();
ak_right_pie_money.init(obj);
}
},
饼图的颜色是用变量配置的
color: config.pieColor,
pieColor: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'],
以下代码是当饼图被点击后的事件
var canvas = divicon._delegate.childNodes[0].childNodes[0];
canvas.onclick = function(e) {
console.log(e);
console.log(value);
console.log(obj);
ak_right_pie_money.init(obj);
}