shaojiahao
/
ShangHai-YuAn
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[完善] 计划更新统计 鼠标悬停样式 完成

master
陈鹏飞 4 years ago
parent
2560a38cd9
commit
cbfe154d6a
3 changed files with 135 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 19
      src/app/statistic-analysis/echarts-data.service.ts
  2. 57
      src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts
  3. 100
      src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts

19
src/app/statistic-analysis/echarts-data.service.ts
Unescape View File

@ -18,6 +18,7 @@ export class EchartsDataService {
//echarts 悬停 显示表格假数据
//支队提示框
tableDataZhi = [
{name:"浦东支队",number:"156",zhanbi:"3%"},
@ -94,6 +95,16 @@ export class EchartsDataService {
{name:"十二月",number:"122",zhanbi:"1.6%"},
{name:"总计",number:"984",zhanbi:"20%"}
]
//预案提示框
planData = [
{name:"预案新增",number:"156",zhanbi:"19%"},
{name:"预案审核通过",number:"144",zhanbi:"21%"},
{name:"预案编制",number:"133",zhanbi:"20%"},
{name:"预案审核退回",number:"122",zhanbi:"17%"},
{name:"预案审核中",number:"120",zhanbi:"23%"},
{name:"总计",number:"561",zhanbi:"100%"},
]
//提示框表格
tableTooltip(dataArr,title:string){
let data = dataArr
@ -113,10 +124,10 @@ export class EchartsDataService {
}
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
}
//如果提示框显示不开
tableTooltipNoShow(point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
@ -153,10 +164,7 @@ export class EchartsDataService {
return [pointX, pointY];
}
//用法：
// tooltip: {
// trigger: 'axis',
// backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
@ -167,4 +175,7 @@ export class EchartsDataService {
// },
// position:this.serviceData.tableTooltipNoShow
// }
}

57
src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts
Unescape View File

@ -11,7 +11,7 @@ declare var echarts: any;
})
export class ScheduledUpdatesComponent implements OnInit {
constructor(private router: Router) { }
constructor(private router: Router,public echartsData:EchartsDataService) { }
ngOnInit(): void {
window.setTimeout(()=>{
@ -19,9 +19,15 @@ export class ScheduledUpdatesComponent implements OnInit {
})
}
ngOnDestroy () {
this.example.clear()
this.example.dispose()
}
example:any;
/* 首页饼状图 */
initCharts(){
var indexBzt = echarts.init(document.getElementById('center'));
this.example= echarts.init(document.getElementById('center'));
var options={
title: {
text: '计划更新统计（7100家）',
@ -33,12 +39,13 @@ export class ScheduledUpdatesComponent implements OnInit {
},
tooltip: {
trigger: 'item',
formatter: (params)=>{
// return this.biaogeTishi(params.name)
} ,
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0'
borderRadius :'0',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,params.name)
},
position:this.echartsData.tableTooltipNoShow
},
legend: {
orient: 'vertical',
@ -78,8 +85,8 @@ export class ScheduledUpdatesComponent implements OnInit {
}]
};
indexBzt.setOption(options);
indexBzt.on('click', (params) => {
this.example.setOption(options);
this.example.on('click', (params) => {
this.router.navigateByUrl('/statisticanalysis/scheduledUpdates/PublicEcharts');
});
}
@ -98,7 +105,7 @@ export class publicEchartsComponent implements OnInit {
constructor(private router: Router,public echartsData:EchartsDataService,public dialog: MatDialog,) { }
ngOnInit(): void {
this.echartsData.scheduledUpdatesToggle = true
}
isToggle:boolean = true; // 已核查/未核查
@ -149,8 +156,10 @@ export class verifiedComponent implements OnInit {
}
ngOnDestroy () {
this.oneEcharts.dispose()
this.oneEcharts.clear()
this.items.forEach((element,index) => {
element.echart.dispose()
element.echart.clear()
});
}
@ -179,6 +188,13 @@ export class verifiedComponent implements OnInit {
//提示框
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,params[0].name)
},
position:this.echartsData.tableTooltipNoShow
},
// x轴
xAxis: {
@ -363,6 +379,7 @@ export class notVerifiedComponent implements OnInit {
}
ngOnDestroy () {
this.oneEcharts.dispose()
this.oneEcharts.clear()
}
@ -382,9 +399,13 @@ export class notVerifiedComponent implements OnInit {
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'未核查')
},
position:this.echartsData.tableTooltipNoShow
},
legend: {
data: ['剩余未核查','总数'],
@ -470,8 +491,14 @@ export class detailedInformationComponent implements OnInit {
},0)
}
ngOnDestroy () {
this.example.dispose()
this.example.clear()
}
example:any;
oneInit () {
let echart = echarts.init(document.getElementById('center'), 'skinUpp');
this.example = echarts.init(document.getElementById('center'), 'skinUpp');
if (this.echartsData.scheduledUpdatesType ===0) { //已核查
var option = {
title: {
@ -560,7 +587,7 @@ export class detailedInformationComponent implements OnInit {
},
]
};
echart.setOption(option);
this.example.setOption(option);
} else { //未核查
var options = {
title: {
@ -631,7 +658,7 @@ export class detailedInformationComponent implements OnInit {
},
]
};
echart.setOption(options);
this.example.setOption(options);
}
}

100
src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts
Unescape View File

@ -20,6 +20,7 @@ export class PageTwoTimeComponent implements OnInit {
@ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用
ngOnInit(): void {
this.echartsData.statefulInspectionToggle = true
this.dateInit()
}
@ -130,10 +131,24 @@ export class echartsComponent implements OnInit {
},0)
}
ngOnDestroy () {
this.oneExample.clear()
this.oneExample.dispose()
this.twoExample.clear()
this.twoExample.dispose()
this.threeExample.clear()
this.threeExample.dispose()
this.fourExample.clear()
this.fourExample.dispose()
this.fiveExample.clear()
this.fiveExample.dispose()
this.sixExample.clear()
this.sixExample.dispose()
}
oneExample:any;
oneInit () {
var chartQusj = echarts.init(document.getElementById('one'), 'skinUpp');
this.oneExample = echarts.init(document.getElementById('one'), 'skinUpp');
var option = {
grid: {
top: 50,
@ -141,6 +156,15 @@ export class echartsComponent implements OnInit {
right: 20,
bottom: 20,
},
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.planData,params[0].name)
},
},
// 标题
title: {
text: '预案统计状态',
@ -158,10 +182,6 @@ export class echartsComponent implements OnInit {
fontSize: 22,
}
},
//提示框
tooltip: {
trigger: 'axis',
},
// x轴
xAxis: {
type: 'category',
@ -205,12 +225,13 @@ export class echartsComponent implements OnInit {
}
],
};
chartQusj.setOption(option);
this.oneExample.setOption(option);
}
twoExample:any;
twoInit () {
let that = this
var chartQusj = echarts.init(document.getElementById('two'), 'skinUpp');
this.twoExample = echarts.init(document.getElementById('two'), 'skinUpp');
var option = {
grid: {
top: 50,
@ -228,9 +249,14 @@ export class echartsComponent implements OnInit {
color:'#000',
}
},
//提示框
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案新增')
}
},
// x轴
xAxis: {
@ -275,16 +301,17 @@ export class echartsComponent implements OnInit {
}
],
};
chartQusj.setOption(option);
chartQusj.on('click', function (params) {
this.twoExample.setOption(option);
this.twoExample.on('click', function (params) {
that.echartsData.statefulInspectionName = '预案新增'
that.echartsData.statefulInspectionToggle = false
});
}
threeExample:any;
threeInit () {
let that = this
var chartQusj = echarts.init(document.getElementById('three'), 'skinUpp');
this.threeExample = echarts.init(document.getElementById('three'), 'skinUpp');
var option = {
grid: {
top: 50,
@ -305,6 +332,12 @@ export class echartsComponent implements OnInit {
//提示框
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核通过')
}
},
// x轴
xAxis: {
@ -349,16 +382,17 @@ export class echartsComponent implements OnInit {
}
],
};
chartQusj.setOption(option);
chartQusj.on('click', function (params) {
this.threeExample.setOption(option);
this.threeExample.on('click', function (params) {
that.echartsData.statefulInspectionName = '预案审核通过'
that.echartsData.statefulInspectionToggle = false
});
}
fourExample:any;
fourInit () {
let that = this
var chartQusj = echarts.init(document.getElementById('four'), 'skinUpp');
this.fourExample = echarts.init(document.getElementById('four'), 'skinUpp');
var option = {
grid: {
top: 50,
@ -379,6 +413,12 @@ export class echartsComponent implements OnInit {
//提示框
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案编制')
}
},
// x轴
xAxis: {
@ -423,16 +463,17 @@ export class echartsComponent implements OnInit {
}
],
};
chartQusj.setOption(option);
chartQusj.on('click', function (params) {
this.fourExample.setOption(option);
this.fourExample.on('click', function (params) {
that.echartsData.statefulInspectionName = '预案编制'
that.echartsData.statefulInspectionToggle = false
});
}
fiveExample:any;
fiveInit () {
let that = this
var chartQusj = echarts.init(document.getElementById('five'), 'skinUpp');
this.fiveExample = echarts.init(document.getElementById('five'), 'skinUpp');
var option = {
grid: {
top: 50,
@ -453,6 +494,12 @@ export class echartsComponent implements OnInit {
//提示框
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核退回')
}
},
// x轴
xAxis: {
@ -497,16 +544,17 @@ export class echartsComponent implements OnInit {
}
],
};
chartQusj.setOption(option);
chartQusj.on('click', function (params) {
this.fiveExample.setOption(option);
this.fiveExample.on('click', function (params) {
that.echartsData.statefulInspectionName = '预案审核退回'
that.echartsData.statefulInspectionToggle = false
});
}
sixExample:any;
sixInit () {
let that = this
var chartQusj = echarts.init(document.getElementById('six'), 'skinUpp');
this.sixExample = echarts.init(document.getElementById('six'), 'skinUpp');
var option = {
grid: {
top: 50,
@ -527,6 +575,12 @@ export class echartsComponent implements OnInit {
//提示框
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
borderWidth:'1',
borderRadius :'0',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核中')
}
},
// x轴
xAxis: {
@ -571,8 +625,8 @@ export class echartsComponent implements OnInit {
}
],
};
chartQusj.setOption(option);
chartQusj.on('click', function (params) {
this.sixExample.setOption(option);
this.sixExample.on('click', function (params) {
that.echartsData.statefulInspectionName = '预案审核中'
that.echartsData.statefulInspectionToggle = false
});

Write Preview
Loading…
Cancel
Save