|
|
|
@ -78,6 +78,7 @@ export class PageTwoNameComponent implements OnInit {
|
|
|
|
|
fontSize: 23 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: this.zhiNameData, |
|
|
|
@ -86,6 +87,15 @@ export class PageTwoNameComponent implements OnInit {
|
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value' |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: (params)=>{ |
|
|
|
|
return this.tableTooltip2(params.name) |
|
|
|
|
}, |
|
|
|
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
|
|
|
|
borderWidth:'1', |
|
|
|
|
borderRadius :'0' |
|
|
|
|
}, |
|
|
|
|
series: [{ |
|
|
|
|
data: this.zhiNumData, |
|
|
|
|
type: 'bar', |
|
|
|
@ -124,6 +134,15 @@ export class PageTwoNameComponent implements OnInit {
|
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value' |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: (params)=>{ |
|
|
|
|
return this.tableTooltip2(params.name) |
|
|
|
|
}, |
|
|
|
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
|
|
|
|
borderWidth:'1', |
|
|
|
|
borderRadius :'0' |
|
|
|
|
}, |
|
|
|
|
series: [{ |
|
|
|
|
data: this.zhiNumData, |
|
|
|
|
type: 'bar', |
|
|
|
@ -163,6 +182,15 @@ export class PageTwoNameComponent implements OnInit {
|
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value' |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: (params)=>{ |
|
|
|
|
return this.tableTooltip2(params.name) |
|
|
|
|
}, |
|
|
|
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
|
|
|
|
borderWidth:'1', |
|
|
|
|
borderRadius :'0' |
|
|
|
|
}, |
|
|
|
|
series: [{ |
|
|
|
|
data: this.zhiNumData, |
|
|
|
|
type: 'bar', |
|
|
|
@ -202,6 +230,15 @@ export class PageTwoNameComponent implements OnInit {
|
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value' |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: (params)=>{ |
|
|
|
|
return this.tableTooltip2(params.name) |
|
|
|
|
}, |
|
|
|
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
|
|
|
|
borderWidth:'1', |
|
|
|
|
borderRadius :'0' |
|
|
|
|
}, |
|
|
|
|
series: [{ |
|
|
|
|
data: this.zhiNumData, |
|
|
|
|
type: 'bar', |
|
|
|
@ -241,6 +278,15 @@ export class PageTwoNameComponent implements OnInit {
|
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value' |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: (params)=>{ |
|
|
|
|
return this.tableTooltip2(params.name) |
|
|
|
|
}, |
|
|
|
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
|
|
|
|
borderWidth:'1', |
|
|
|
|
borderRadius :'0' |
|
|
|
|
}, |
|
|
|
|
series: [{ |
|
|
|
|
data: this.zhiNumData, |
|
|
|
|
type: 'bar', |
|
|
|
@ -258,6 +304,7 @@ export class PageTwoNameComponent implements OnInit {
|
|
|
|
|
_this.data.statefulInspectionToggle = false |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//预案状态统计
|
|
|
|
|
planState(){ |
|
|
|
|
var shuju='[{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"}]'; |
|
|
|
@ -274,27 +321,46 @@ export class PageTwoNameComponent implements OnInit {
|
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: function (params){ |
|
|
|
|
var res = '<div class="tishi" style="background:#FFFFFF"><span style="color:#000000;font-size:25px;padding:10px 10px">预案补充</span>' |
|
|
|
|
res+='</br><table style="width:100% background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0" >'; |
|
|
|
|
res+='<thead><tr>'; |
|
|
|
|
res+='<td style="border:1px solid #000000">名称</td>'; |
|
|
|
|
res+='<td style="border:1px solid #000000">数量</td>' |
|
|
|
|
res+='<td style="border:1px solid #000000">总占比</td>' |
|
|
|
|
res+='</tr></thead>' |
|
|
|
|
res+='<tbody>'; |
|
|
|
|
// console.log(jsonObj)
|
|
|
|
|
for(var i=0;i<jsonObj.length;i++){ |
|
|
|
|
res+='<tr>' |
|
|
|
|
res+='<td style="border:1px solid #000000">'+jsonObj[i].name+'</td>' |
|
|
|
|
res+='<td style="border:1px solid #000000">'+jsonObj[i].number+'</td>' |
|
|
|
|
res+='<td style="border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>' |
|
|
|
|
} |
|
|
|
|
res+='</tbody>' |
|
|
|
|
res+='</table></div>' |
|
|
|
|
return res |
|
|
|
|
formatter: (params)=>{ |
|
|
|
|
return this.tableTooltip(params.name) |
|
|
|
|
}, |
|
|
|
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
|
|
|
|
borderWidth:'1', |
|
|
|
|
borderRadius :'0', |
|
|
|
|
position: function (point, params, dom, rect, size) { |
|
|
|
|
// 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下
|
|
|
|
|
// 提示框位置
|
|
|
|
|
var x = 0; // x坐标位置
|
|
|
|
|
var y = 0; // y坐标位置
|
|
|
|
|
|
|
|
|
|
// 当前鼠标位置
|
|
|
|
|
var pointX = point[0]; |
|
|
|
|
var pointY = point[1]; |
|
|
|
|
|
|
|
|
|
// 外层div大小
|
|
|
|
|
// var viewWidth = size.viewSize[0];
|
|
|
|
|
// var viewHeight = size.viewSize[1];
|
|
|
|
|
|
|
|
|
|
// 提示框大小
|
|
|
|
|
var boxWidth = size.contentSize[0]; |
|
|
|
|
var boxHeight = size.contentSize[1]; |
|
|
|
|
|
|
|
|
|
// boxWidth > pointX 说明鼠标左边放不下提示框
|
|
|
|
|
if (boxWidth > pointX) { |
|
|
|
|
x = 35; |
|
|
|
|
} else { // 左边放的下
|
|
|
|
|
x = pointX + 80; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// boxHeight > pointY 说明鼠标上边放不下提示框
|
|
|
|
|
if (boxHeight > pointY) { |
|
|
|
|
y = 65; |
|
|
|
|
} else { // 上边放得下
|
|
|
|
|
y = pointY - boxHeight; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return [pointX, pointY]; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
orient: 'vertical', |
|
|
|
@ -335,4 +401,66 @@ export class PageTwoNameComponent implements OnInit {
|
|
|
|
|
} |
|
|
|
|
passPlanEchart.setOption(option); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
tableTooltip(biaotou:string){ |
|
|
|
|
var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄埔支队","number":"144","zhanbi":"2.8%"},' |
|
|
|
|
shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' |
|
|
|
|
shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},' |
|
|
|
|
shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},' |
|
|
|
|
shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},' |
|
|
|
|
shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' |
|
|
|
|
shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},' |
|
|
|
|
shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]' |
|
|
|
|
var jsonObj = JSON.parse(shuju); |
|
|
|
|
var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+biaotou+'</span></div>' |
|
|
|
|
res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >'; |
|
|
|
|
res+='<thead><tr>'; |
|
|
|
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>'; |
|
|
|
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>' |
|
|
|
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>' |
|
|
|
|
res+='</tr></thead>' |
|
|
|
|
res+='<tbody>'; |
|
|
|
|
for(var i=0;i<jsonObj.length;i++){ |
|
|
|
|
res+='<tr>' |
|
|
|
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>' |
|
|
|
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>' |
|
|
|
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>' |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
res+='</tbody>' |
|
|
|
|
res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>' |
|
|
|
|
res+='</table></div></div>' |
|
|
|
|
return res |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
tableTooltip2(biaotou:string){ |
|
|
|
|
var shuju='[{"name":"浦东中队","number":"156","zhanbi":"3%"},{"name":"黄埔中队","number":"144","zhanbi":"2.8%"},' |
|
|
|
|
shuju+='{"name":"徐汇中队","number":"133","zhanbi":"2.1%"},{"name":"长宁中队","number":"122","zhanbi":"1.6%"},' |
|
|
|
|
shuju+='{"name":"静安中队","number":"120","zhanbi":"1.3%"},{"name":"普陀中队","number":"100","zhanbi":"1.1%"},' |
|
|
|
|
shuju+='{"name":"虹口中队","number":"95","zhanbi":"1%"},{"name":"杨浦中队","number":"90","zhanbi":"0.9%"},' |
|
|
|
|
shuju+='{"name":"闵行中队","number":"88","zhanbi":"0.8%"},{"name":"宝山中队","number":"83","zhanbi":"0.7%"},' |
|
|
|
|
shuju+='{"name":"徐汇中队","number":"133","zhanbi":"2.1%"},{"name":"长宁中队","number":"122","zhanbi":"1.6%"},' |
|
|
|
|
shuju+='{"name":"嘉定中队","number":"78","zhanbi":"0.6%"},{"name":"松江中队","number":"75","zhanbi":"0.5%"},' |
|
|
|
|
shuju+='{"name":"金山中队","number":"65","zhanbi":"0.4%"},{"name":"崇明中队","number":"55","zhanbi":"0.3%"}]' |
|
|
|
|
var jsonObj = JSON.parse(shuju); |
|
|
|
|
var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+biaotou+'</span></div>' |
|
|
|
|
res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >'; |
|
|
|
|
res+='<thead><tr>'; |
|
|
|
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>'; |
|
|
|
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>' |
|
|
|
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>' |
|
|
|
|
res+='</tr></thead>' |
|
|
|
|
res+='<tbody>'; |
|
|
|
|
for(var i=0;i<jsonObj.length;i++){ |
|
|
|
|
res+='<tr>' |
|
|
|
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>' |
|
|
|
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>' |
|
|
|
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>' |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
res+='</tbody>' |
|
|
|
|
res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>' |
|
|
|
|
res+='</table></div></div>' |
|
|
|
|
return res |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|