renderings
1. Pie chart statistics page div
<div class="left_top2" onclick="ak_left_click2.top1Click();"> <div class="left2_bg"> <div class="visual_title" style="margin-bottom: 0px;height: 27px;"> <span class="Top_title" style="display: inline-block;position: relative;z-index: 10;width: 30%; margin-left: 12px; font-size: 14px; line-height: 35px; text-align: center; margin-top: -9px;white-space: nowrap;">Contract price range (quantity)</span> <img src="images/ksh33.png" style="width: 100%;position: absolute;bottom: 0;left: 0;"> </div> <div class="visual_box left2_top1" style="height: 90%;"> <div class="window_echarts1" id="right_top2_left" style="width: 50%;height: 90%;top: 16px;"></div> <div class="echarts_txt" style="right: 5px" id="right_top2_left_right" style="width: 40%;"> <div class="ech_item" > <i style="background-color: #5470c6;"></i> <span class="level_num">Less than US$5 million</span> <span class="level_main" id="level_main_1"></span> </div> <div class="ech_item" > <i style="background-color: #91cc75;"></i> <span class="level_num" style="white-space: nowrap;">USD 5 million-USD 10 million</span> <span class="level_main" id="level_main_2"></span> </div> <div class="ech_item" > <i style="background-color: #fac858;"></i> <span class="level_num" style="white-space: nowrap;">USD 10 million-USD 50 million</span> <span class="level_main" id="level_main_3"></span> </div> <div class="ech_item" > <i style="background-color: #ee6666;"></i> <span class="level_num">USD 50 million-USD 100 million</span> <span class="level_main" id="level_main_4"></span> </div> <div class="ech_item" > <i style="background-color: #73c0de;"></i> <span class="level_num">USD 100 million-USD 500 million</span> <span class="level_main" id="level_main_5"></span> </div> <div class="ech_item" > <i style="background-color: #3ba272;"></i> <span class="level_num">More than US$500 million</span> <span class="level_main" id="level_main_6"></span> </div> </div> </div> </div> </div>
2. Pie chart script
Call the backend interface and pass the query results to the callback function
getData:function(){
var temp = {
currency: 2, // Currency 2: US dollar 1: RMB
Authorization: akglobe_config.token,
};
// Under construction, new signature, all variables
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/getNationItemMoney";
options.type = "get";
options.data = temp;
options.errorback = akglobe_config.errBack;
options.callback = function(data) {
ak_left2Top1.callBackLeft2Top1GET(data);
}
// If it is a test environment, use fake data
if(typep002==2){
ak_left2Top1.callBackLeft2Top1GET(ak_ztqg.getNationItemMoney);
}else{
akglobe_config.ajaxQuery(options);
}
},
Callback function for query results
callBackLeft2Top1GET:function(data){
if (data & amp; & amp; data.flag) {
var data = data.rows;
var dataAll = [];
for (var i = 0; i < data.length; i + + ) {
if(data[i].name == null || data[i].name == undefined || data[i].name == ""){
continue;
}
\t\t\t\t
var obj = new Object();
obj.name = data[i].name
obj.value = data[i].count
dataAll.push(obj);
if(data[i].name == "Less than 5 million US dollars"){
$("#level_main_1").text(data[i].count);
}else if(data[i].name == "USD 5 million-USD 10 million"){
$("#level_main_2").text(data[i].count);
}else if(data[i].name == "USD 10 million-USD 50 million"){
$("#level_main_3").text(data[i].count);
}else if(data[i].name == "USD 50 million-USD 100 million"){
$("#level_main_4").text(data[i].count);
}else if(data[i].name == "USD 100 million-USD 500 million"){
$("#level_main_5").text(data[i].count);
}else if(data[i].name == "More than US$500 million"){
$("#level_main_6").text(data[i].count);
}
}
var options = new Object();
options.data = dataAll;
ak_left2Top1.callBackLeft2Top1(options);
}
},
3.echarts pie chart code
Set bar chart to automatically calculate width
var objdiv= $('#ak_czRight2'); //document.getElementById('left1_top2_bar');
var docuWidth = $(document).width();
var wt=docuWidth * config.echartsDIvWidht;
objdiv.width(wt);
To prevent multiple loading and repeated click events, closing must be prohibited first
myChart1.off('click');//To prevent multiple loading and repeated click events, closing must be disabled first
callBackLeft2Top1: function(options) {
var mainOption = {
tooltip: {
trigger: 'item',
formatter: "{b} & amp;nbsp;<br/> {c} ({d}%)",
position: function (point, params, dom, rect, size) {
//The reference coordinate system of mouse coordinates and prompt box position is: the upper left corner of the outer div is the origin, the x-axis is to the right, and the y-axis is downward.
//Prompt box position
var x = 0; //x coordinate position
var y = 0; // y coordinate position
\t\t\t\t
//Current mouse position
var pointX = point[0];
var pointY = point[1];
\t\t\t\t
// Outer div size
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
\t\t\t\t
// Prompt box size
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
\t\t\t\t
// boxWidth > pointX means the prompt box cannot be placed on the left side of the mouse
if (boxWidth > pointX) {
x = 150;
} else { // Place it on the left
x = pointX - boxWidth;
}
\t\t\t\t
// boxHeight > pointY means the prompt box cannot be placed on the mouse
if (boxHeight > pointY) {
y = 20;
} else { // It can fit on top
y = pointY - boxHeight;
}
\t\t\t\t
return [x, y];
},
},
series: [{
name: 'Price level quantity statistics',
type: 'pie',
// roseType: 'area',
radius: '95%',
// color: config.colorList,
color: config.pieColor,
label: {
normal: {
show: true,
position: 'inner',
formatter: '{d}%',
textStyle: {
fontSize: '15px',
color: '#222222'
},
},
},
center: ['50%', '50%'],
data: options.data,
minAngle:20,
itemStyle: {
label: {
// show:true,
// formatter:'{d}%'
show: true,
formatter: function(val) { // Let the text in series wrap
console.log(val);
return val.name.split(" ").join("\
");
},
rich: {
// This 'value' style indicates that the text color is white
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 objdiv= $('#right_top2_left');
var docuWidth = $(document).width();
var wt=docuWidth * config.echartsDIvWidht;
objdiv.width(wt);
var myChart1 = echarts.init(document.getElementById('right_top2_left'));
myChart1.setOption(mainOption);
},