|
|
|
@ -1,4 +1,14 @@ |
|
|
|
|
|
|
|
/* |
|
|
|
|
|
|
|
* @Descripttion:
|
|
|
|
|
|
|
|
* @version:
|
|
|
|
|
|
|
|
* @Author: sueRimn |
|
|
|
|
|
|
|
* @Date: 2020-09-01 15:24:39 |
|
|
|
|
|
|
|
* @LastEditors: sueRimn |
|
|
|
|
|
|
|
* @LastEditTime: 2020-09-02 13:49:38 |
|
|
|
|
|
|
|
*/ |
|
|
|
import { Component, OnInit } from '@angular/core'; |
|
|
|
import { Component, OnInit } from '@angular/core'; |
|
|
|
|
|
|
|
//import * as echarts from '';
|
|
|
|
|
|
|
|
declare var echarts: any; |
|
|
|
|
|
|
|
|
|
|
|
@Component({ |
|
|
|
@Component({ |
|
|
|
selector: 'app-page-one', |
|
|
|
selector: 'app-page-one', |
|
|
|
@ -6,10 +16,117 @@ import { Component, OnInit } from '@angular/core'; |
|
|
|
styleUrls: ['./page-one.component.scss'] |
|
|
|
styleUrls: ['./page-one.component.scss'] |
|
|
|
}) |
|
|
|
}) |
|
|
|
export class PageOneComponent implements OnInit { |
|
|
|
export class PageOneComponent implements OnInit { |
|
|
|
|
|
|
|
options:any; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
constructor() { } |
|
|
|
constructor() { } |
|
|
|
|
|
|
|
|
|
|
|
ngOnInit(): void { |
|
|
|
ngOnInit() { |
|
|
|
|
|
|
|
window.setTimeout(()=>{ |
|
|
|
|
|
|
|
this.initCharts() |
|
|
|
|
|
|
|
},0) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
/* 首页饼状图 */ |
|
|
|
|
|
|
|
initCharts(){ |
|
|
|
|
|
|
|
//console.log(document.getElementById('indexBzt'))
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var ec = echarts as any; |
|
|
|
|
|
|
|
var indexBzt = ec.init(document.getElementById('indexBzt')); |
|
|
|
|
|
|
|
var options={ |
|
|
|
|
|
|
|
title: { |
|
|
|
|
|
|
|
text: '预案状态统计（7005家）', |
|
|
|
|
|
|
|
//subtext: '纯属虚构',
|
|
|
|
|
|
|
|
padding:[80,100], |
|
|
|
|
|
|
|
left: 'center', |
|
|
|
|
|
|
|
textStyle:{ |
|
|
|
|
|
|
|
fontSize:38 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
tooltip: { |
|
|
|
|
|
|
|
trigger: 'item', |
|
|
|
|
|
|
|
formatter: (params)=>{ |
|
|
|
|
|
|
|
//console.log(params)
|
|
|
|
|
|
|
|
return this.biaogeTishi(params.name) |
|
|
|
|
|
|
|
} , |
|
|
|
|
|
|
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
|
|
|
|
|
|
|
borderWidth:'1', |
|
|
|
|
|
|
|
borderRadius :'0' |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
legend: { |
|
|
|
|
|
|
|
orient: 'vertical', |
|
|
|
|
|
|
|
right: 150, |
|
|
|
|
|
|
|
top:80, |
|
|
|
|
|
|
|
//padding:20,
|
|
|
|
|
|
|
|
itemWidth:60, |
|
|
|
|
|
|
|
itemHeight:25, |
|
|
|
|
|
|
|
textStyle:{ |
|
|
|
|
|
|
|
fontSize:28 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
data: ['预案补充', '预案审核通过', '预案编制', '预案审核退回', '预案审核中'] |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
series: [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name: '访问来源', |
|
|
|
|
|
|
|
type: 'pie', |
|
|
|
|
|
|
|
radius: '65%', |
|
|
|
|
|
|
|
center: ['50%', '60%'], |
|
|
|
|
|
|
|
label:{ |
|
|
|
|
|
|
|
normal:{ |
|
|
|
|
|
|
|
show:true, |
|
|
|
|
|
|
|
position: 'inner', |
|
|
|
|
|
|
|
fontSize:18, |
|
|
|
|
|
|
|
formatter:'{c} ({d}%)' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
data: [ |
|
|
|
|
|
|
|
{value: 1585, name: '预案补充'}, |
|
|
|
|
|
|
|
{value: 2000, name: '预案审核通过',itemStyle:{color:'#02A7F0'}}, |
|
|
|
|
|
|
|
{value: 2600, name: '预案编制'}, |
|
|
|
|
|
|
|
{value: 1500, name: '预案审核退回'}, |
|
|
|
|
|
|
|
{value: 1800, name: '预案审核中'} |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
emphasis: { |
|
|
|
|
|
|
|
itemStyle: { |
|
|
|
|
|
|
|
shadowBlur: 10, |
|
|
|
|
|
|
|
shadowOffsetX: 0, |
|
|
|
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
indexBzt.setOption(options); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
* @name: 表格提示框封装 |
|
|
|
|
|
|
|
* @test: test font |
|
|
|
|
|
|
|
* @msg:
|
|
|
|
|
|
|
|
* @param {string(表头)} |
|
|
|
|
|
|
|
* @return {type}
|
|
|
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
biaogeTishi(biaotou:string){ |
|
|
|
|
|
|
|
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%"}]'; |
|
|
|
|
|
|
|
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 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
chenjingyu
4 years ago