renderings
1. First introduce the left/right page into the three-dimensional index page
<!--#include virtual="panel/ak_czRight.html"--> <!--#include virtual="panel/ak_left1.html"-->
2. After introducing the left/right pages, each row of statistics page is introduced into the left/right pages respectively
<div class="leftTop1" id="ak_left"> <!--#include virtual="ak_left1Top1.html"--> <!--#include virtual="ak_czRight2.html"--> <!--#include virtual="ak_left1Top4.html"--> <!--#include virtual="ak_left1Top5.html"--> </div>
3. Bar chart statistics page div
<div class="visual_box" style="margin-top: 1px;height: 32%;"> <div class="visual_title" title="The title is not clickable, but the bar chart below is clickable"> <p class="Top_title" style="white-space: nowrap;">Contract sector amount statistics</p> <img src="css/images/lishisucai/ksh33.png"> </div> \t <div class="visual_chart" id="ak_czRight2" style="height:calc(100% - 35px);"></div> </div>
4. Histogram statistics script
4.1 First introduce the statistical script
inputScript('scripts/business/main/ak_tj/ak_czRight.js'); // The right page of the output value
4.2 Call initialization histogram statistics in the left/right script
ak_czRight.init(); // Right list of overview
4.2 Initialize the histogram statistics method in the histogram statistics script
ak_czRight.initTop2(); // Contract section statistics
initTop2: function() {
ak_czRight.initHtbktj(); // Initialize contract section statistics data second row from the left
},
4.3 Call the histogram request backend interface method
initHtbktj: function() {
var temp = {
};
\t\t
var sgzt_type = localStorage.getItem('sgzt_type');
if(sgzt_type == 1){
var projectStatus = akglobe_config.underConstruction;
if(projectStatus){
projectStatus = projectStatus.join("','");
projectStatus = "'" + projectStatus + "'";
}
temp.projectstatus = projectStatus;
}else if(sgzt_type == 2) {
var year = (new Date).getFullYear();
temp.startTime = ak_right.changeDateFormat2(new Date(year, 0, 1).getTime()).trim();
temp.endTime = ak_right.changeDateFormat2(new Date(year, 11, 31).getTime()).trim();
}
\t\t
var options = new Object();
options.url = "/manage-api/IndexTjfx1Controller/getGhtbk";
options.type = "get";
options.data = temp;
options.errorback = akglobe_config.errBack;
options.callback = function(data) {
ak_czRight.callBackHTBKJEGET(data);
}
// If it is a test environment, use fake data
if(typep002==2){
ak_czRight.callBackHTBKJEGET(ak_ztqg.htbkje);
}else{
akglobe_config.ajaxQuery(options);
}
},
4.4 Return the query results to the callback function, and encapsulate the echarts histogram data in the callback function
callBackHTBKJEGET:function(data){
if (data & amp; & amp; data.flag) {
var data = data.object;
ak_czRight.object = data;
data = data.reverse();
\t\t
var datax = [];
var datay = [];
// var dataCode = [];
var obj = new Object();
for (var i = 0; i < data.length; i + + ) {
var codeName = data[i].name;
datax.push(codeName);
datay.push(data[i].value);
}
var options = new Object();
options.datax = datax;
options.datay = datay;
ak_czRight.callBackHtbktj(options); // Initialize contract section statistics Echarts
}
},
4.5echarts histogram 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
callBackQysybtj: function(options) {
var option1 = {
grid: {
top: '20%',
left: '1%',
right: '5%',
bottom: '10%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: { // Axis indicator, axis trigger is valid
type: 'shadow' // Default is straight line, optional: 'line' | 'shadow'
}
},
xAxis: {
type: 'category',
data: options.datax,
axisTick: { //---coordinate axis tick
show: true, //---whether to display
},
axisLine: { //---coordinate axis axis
show: true, //---whether to display
lineStyle: {
color: 'rgba(255,255,255,.1)',
width: 1,
type: 'dotted',
},
},
splitLine: { //split line
show: true,
lineStyle: {
color: 'rgba(230,230,230,0.2)',
width: 1,
}
},
axisLabel: { //X-axis text
interval: 0,
rotate: -40, //tilt
textStyle: {
fontSize: 12,
color: '#fff'
},
formatter: function(val) { // Content formatter for tick labels
if (val. length > 4) {
val = val.substr(0, 4)
return val
} else {
return val
}
},
},
},
yAxis: {
name: 'Amount (100 million U.S. dollars)', //The unit above the y-axis
type: 'value',
nameTextStyle: { //Color of units above the y-axis
color: '#fff'
},
splitLine: { //split line
show: true,
lineStyle: {
color: 'rgba(230,230,230,0.2)',
width: 1,
}
},
axisLabel: { //Y-axis scale value
formatter: '{value}',
textStyle: {
fontSize: 12,
color: '#fff'
},
},
axisLine: { //---coordinate axis axis
show: false, // ---Whether to display
},
},
series: [{
name: 'Country',
type: 'bar',
data: options.datay,
barWidth: 15,
barGap: 0.5, //space between columns
itemStyle: {
normal: {
barBorderRadius: 50,
// color: "#FB9A4E",
// color: "rgb(134, 245, 255)",
// background-image: "linear-gradient(to bottom, red, yellow)",
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[{
offset: 0,
color: 'rgb(134, 245, 255,0.8)'
},
{
offset: 1,
color: 'rgb(134, 245, 255,0.5)'
}
]
)
}
},
}]
};
var objdiv= $('#ak_czRight2'); //document.getElementById('left1_top2_bar');
var docuWidth = $(document).width();
var wt=docuWidth * config.echartsDIvWidht;
objdiv.width(wt);
var myChart1 = echarts.init(document.getElementById('ak_czRight2'));
myChart1.setOption(option1);
myChart1.off('click')
myChart1.on('click', function(params) {
console.log(params);
var name = params.name;
console.log(name);
var arr = ak_czRight.rows
for (var i = 0; i < arr.length; i + + ) {
if (name == arr[i].name) {
var db = arr[i];
}
}
ak_right_sybgj.init(db);
})
},