效果图
0.iframe引入html
createHtml:function(data){
var dom =_result;
$(dom).html("");
var sl=slipHeight;
var eh=parseInt(sl/4);
var top1h=parseInt(sl/11);
var infoDiv0= '<div style="width:100%; height:'+top1h+'px"> <iframe frameborder="no" scrolling="no" allowtransparency="yes" src="../business/panel/ak_pie_money_callback/ak_pie_all.html" style="list-style:none;width:100%;height:100%;"></iframe> </div>';
var randomNum = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
this.idcharts1="chartsContent" + randomNum;
var infoDiv1= '<div id='+this.idcharts1+' style="top:-12px;left:10px;width:100%;height:'+eh+'px"> </div>';
var infoDiv2= '<div style="width:100%; height:'+top1h/2+'px;"> <iframe frameborder="no" scrolling="no" allowtransparency="yes" src="../business/panel/ak_dz_callback/ak_dz_select.html" style="list-style:none;width:100%;height:100%;"></iframe> </div>';
$(dom).append(infoDiv0);
$(dom).append(infoDiv1);
ak_right_pie_money_all.getAllByNameGoods(data,true)
},1.html页面DIV
头部标题样式，统计图和列表都在脚本中写的
<div id="dz_top1"
style="height: 100%; display: flex;flex-direction: column;justify-content: space-between;color: var(--SlideText);">
<div class="dz_top1_Div1" style="display: flex;flex-direction: row;margin-left: 20px;">
<div id="dz_top1_Div1_qyfb" style="width: 100%;display: flex;align-items: center;">
<div style="margin-right: 0px;width: 10px;height: 10px;background-color: tomato;margin-right:20px"></div>
<span>全部国家</span>
<span>(价格区间)</span>
</div>
</div>
</div>
<link href="../../css/style/black.css" rel="stylesheet" type="text/css" id='link'>2.脚本
调用后端接口
getDemoData: function() {
ak_fgsObject_position.clearObject();
var code = ak_right_pie_money.obj.code;
var temp = {
country: code
};
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/IndexTjfx1Controller/getCountryProjectPriceNum";
options.url = "/manage-api/getCountryPriceRange";
options.type = "get";
options.data = temp;
//options.data={ "postdata": JSON.stringify(queryPromters) };
options.errorback = akglobe_config.errBack;
options.callback = function(data) {
console.log(data);
var data = data.rows;
var projectpricesection = JSON.parse(data[0].projectpricesection);
for (var i = 0; i < projectpricesection.length; i++) {
var num = projectpricesection[i].value;
ak_right_pie_money.total += num;
}
ak_right_pie_money.createHtml(projectpricesection);
ak_right_pie_money.cheatCharts1(projectpricesection);
}
akglobe_config.ajaxQuery(options);
// }
},列表回调函数，拼接列表
createHtml: function(data) {
var dom = _result;
$(dom).html("");
var sl = slipHeight;
var eh = parseInt(sl / 4);
var top1h = parseInt(sl / 11);
console.log(sl);
console.log(eh);
var name = ak_right_pie_money.countryName;
var infoDiv0 = '<div style="width:100%; height:' + top1h +
'px"> <div id="dz_top1" style="height: 100%; display: flex;flex-direction: column;justify-content: space-between;color: var(--SlideText);padding-top: 8px;">';
infoDiv0 += '<div class="dz_top1_Div1" style="display: flex;flex-direction: row;margin-left: 20px;">';
infoDiv0 += '<div id="dz_top1_Div1_qyfb" style="width: 100%;display: flex;align-items: center;">';
infoDiv0 +=
'<div style="margin-right: 0px;width: 10px;height: 10px;background-color: tomato;margin-right:20px"></div>';
infoDiv0 += '<span id="countryName" style="font-size: 15px;color: #00FFFF;">' + name +
'</span><span id="countryName" style="font-size: 15px;color: #00FFFF;">(价格区间)</span>';
infoDiv0 += '</div></div></div> </div>';
var randomNum = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
this.idcharts1 = "chartsContent" + randomNum;
var infoDiv1 = '<div id=' + this.idcharts1 + ' style="top:-12px;left:10px;width:100%;height:' + eh +
'px"> </div>';
var infoDiv2 = '<div style="width:100%; height:' + top1h / 2 +
'px;"> <iframe frameborder="no" scrolling="no" allowtransparency="yes" src="../business/panel/ak_dz_callback/ak_dz_select.html" style="list-style:none;width:100%;height:100%;"></iframe> </div>';
$(dom).append(infoDiv0);
$(dom).append(infoDiv1);
// $(dom).append(infoDiv2);
ak_right_pie_money.getAllByNameGoods(data, true)
},getAllByNameGoods: function(r, isshowing) {
var dom = _result;
// $(dom).html("");
if (length > 0) {
var ht = document.body.clientHeight - 185;
var html = "";
html = "<div id='pageid_obstacle' style='overflow-y:auto;overflow-x:hidden;margin-top:10px;'>";
html += ak_right_pie_money.htmlTable(r);
html += "</div>"
$(dom).append(html);
// var html2="<div id='pagebottom_poi' class=\"pageListbottom\"></div>";
// $(dom).append(html2);
if (isshowing) {
var docuWidth = $(document).width();
_slipWin.upws(docuWidth * 0.27);
_slipWin.show();
} else {
// _slipWin.hidd();
}
ak_nav.hideLoading();
} else {
$(dom).html("");
net_tool.errorBack("暂无数据");
}
},htmlTable: function(r) {
var comlist = r;
var length = r.length;
var table = [];
for (var i = 0; i < length; i++) {
var db = comlist[i];
var name = db.name;
if (name == "小于500万美元") {
var priceRange = 1;
} else if (name == "500万美元-1000万美元") {
var priceRange = 2;
} else if (name == "1000万美元-5000万美元") {
var priceRange = 3;
} else if (name == "5千美元-1亿美元") {
var priceRange = 4;
} else if (name == "1亿美元-5亿美元") {
var priceRange = 5;
} else if (name == "5亿美元以上") {
var priceRange = 6;
}
var countryCode = ak_right_pie_money.obj.code
db.countryCode = countryCode;
var value = db.value;
var address = db.address;
var number = db.value;
var public = number / ak_right_pie_money.total * 100; // 占比计算公式
var rate = ak_right_pie_money.toDecimal(public); // 完工占的百分比
// var number = db.number;
var amount = db.amount;
var states = db.states;
var monthValue = db.monthValue;
var NLValue = db.NLValue;
var KLValue = db.KLValue;
var x = db.lat;
var y = db.lng;
db.addtypemarker = config.addtypemarker.common;
var ids = db.id + "_rw";
var jsonstr = JSON.stringify(db); //将json对象转换为json字符串
var index = i + 1;
var type = db.type;
var DJclass = db.DJclass;
// table.push("<table width='100%' height:'90%' ><tbody>" );
// table.push("<input type='button' class='panel_weight_button1' style='width:60%;height:27px;margin-left: 20%;' value='"+name+"' onclick='ak_police.clicklabel("+x+","+y+")' />");
// table.push("<tr style='height:50px;'><td> 所属国家: <a style='color:white '>"+address+"</a></td>");
// table.push("<td> 合同金额: <a style='color:white '>"+amount+"</a></td>");
// table.push("<td> <a style='color:white '>"+states+"</a></td>");
// table.push("</tr>");
// table.push("<tr style='height:50px;'><td style='width:30%;'> 当月产值: <a style='color:white '>"+monthValue+"</a></td>");
// table.push("<td style='width:30%;'> 年累产值: <a style='color:white '>"+NLValue+"</a></td>");
// table.push("<td style='width:30%;'> 开累产值: <a style='color:white '>"+KLValue+"</a></td>");
// table.push("</tr>");
// table.push("</tbody></table>");
// table.push("<table width='100%' height:'90%' ><tbody>" );
table.push(
"<div style='position:relative'><input type='button' class='callBack_button1' style='width:80%;height:27px;margin-left: 10%;' value='" +
name + ' (' + rate + ')' + "' onclick='ak_fgsObject_position.getData(" +
priceRange + "," + countryCode + ")' />");
table.push(
"<div style='position: absolute;width: 30px;height: 20px;top: 4px;left: 10%;color: var(--indexColor);background-color: var(--indexBox);border-bottom-right-radius: 50%;border-top-right-radius: 50%;text-align: center;line-height: 20px;'>" +
index + "</div>");
table.push("</div>")
table.push(
"<div style='width:80%;height:40px;margin:0 auto;display:flex;justify-content:space-between;line-height:40px;font-weight: normal;'><div style=''> 合同个数: <a style='color:white '>" +
value + "</a></div>");
// table.push("<div style='width:30%'> 合同金额: <a style='color:white '>"+amount+"</a></div>");
table.push(
"<div style='width:30%;text-align:right;'> <a style='color:#00FFFF;cursor:pointer' onclick='ak_left_click2.xqClick3(" +
jsonstr + ")'>详情</a></div>");
table.push("</div>");
// table.push("</tbody></table>");
}
ak_right_pie_money.total = null; // 清空合同价格区间统计数量总和
return table.join("");
},设置列表中的数值百分比小数点
// 浮点数保留两位小数 (将浮点数四舍五入, 去小数点后 2 位)
toDecimal: function(x) {
var f = parseFloat(x);
if (isNaN(f)) return;
f = Math.round(x * 100) / 100;
return f + '%';
},统计图回调函数
// 饼图
cheatCharts1: function(data) {
var divid = this.idcharts1;
var data = data;
var mainOption = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)",
position: ['20%', '-20%']
},
series: [{
name: '项目价格等级',
type: 'pie',
radius: '95%',
color: config.pieColor,
label: {
normal: {
position: 'inner',
formatter: '{d}%',
textStyle: {
fontSize: '15px',
color: '#222222'
}
},
},
center: ['50%', '50%'],
data: data,
minAngle: 0, // 最小角度
itemStyle: {
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)'
}
}
}]
};
var myChart1 = echarts.init(document.getElementById(divid));
myChart1.setOption(mainOption);
},
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
