Skip to content

Y
ydLife
Commit 51360374 by Chao Sun
Options

柱状图点击

parent 8e238d10
Showing with 97 additions and 51 deletions
src/app/my/my-management/my-management.component.html
...@@ -23,9 +23,10 @@ ...@@ -23,9 +23,10 @@
<li [ngClass]="{selected:isTeam==0}" (click)="changeIsTeam(0)">团队个人完成率</li> <li [ngClass]="{selected:isTeam==0}" (click)="changeIsTeam(0)">团队个人完成率</li>
<li [ngClass]="{selected:isTeam==1}" (click)="changeIsTeam(1)">团队总完成率</li> <li [ngClass]="{selected:isTeam==1}" (click)="changeIsTeam(1)">团队总完成率</li>
</ul> </ul>
<div echarts [options]="chartOption" class="chart" style="height: 300px;" #echarts id="main" <div echarts [options]="chartOption" class="chart" style="height: 300px;" #echarts
(click)="chartClick()"></div> (chartClick)="onChartClick($event)">
<p style="color: #C1C1C1;text-align: center;">点击可查看对应数据</p> </div>
<p><img src="assets/images/Slice74.png" alt="">点击可查看对应数据</p>
<div class="list_wrapper"> <div class="list_wrapper">
<div class="title"> <div class="title">
<span></span> 学习明细 <span></span> 学习明细
...@@ -43,14 +44,13 @@ ...@@ -43,14 +44,13 @@
<li>{{detailItem.systemName}}</li> <li>{{detailItem.systemName}}</li>
<li>{{detailItem.leaderName}}</li> <li>{{detailItem.leaderName}}</li>
<li>{{detailItem.dropOptionName}}</li> <li>{{detailItem.dropOptionName}}</li>
<li>{{detailItem.progress}}</li> <li style="color: #EF6C40;">{{detailItem.progress}}</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="toastWrapper toast" *ngIf="detailFlag"> <div class="toastWrapper toast" *ngIf="detailFlag">
<div *ngIf="detailFlag" (click)="detailFlag = false;"> <img src="assets/images/Slice3.png" *ngIf="detailFlag" (click)="detailFlag = false;"
X alt="colse">
</div>
</div> </div>
<div id="toastContent" *ngIf="detailFlag"> <div id="toastContent" *ngIf="detailFlag">
<ul class="status"> <ul class="status">
...@@ -64,12 +64,17 @@ ...@@ -64,12 +64,17 @@
<span></span> 视频列表 <span></span> 视频列表
</div> </div>
<ul class="list_content"> <ul class="list_content">
<li>视频名称</li> <li style="width: 70%;">视频名称</li>
<li>学习状态</li> <li style="width: 30%;">学习状态</li>
</ul> </ul>
<ul *ngFor="let videoItem of videoList"> <ul class="list_content" *ngFor="let videoItem of videoList"
<li>{{videoItem.videoName}}</li> style="border-bottom: 1px #F2F2F2 solid;">
<li>{{videoItem.flag}}</li> <li style="width: 70%;text-align: left;">{{videoItem.videoName}}</li>
<li style="width: 30%;">
<img *ngIf="videoItem.flag=='0'" src="assets/images/Slice78.png" alt="" >
<img *ngIf="videoItem.flag=='1'" src="assets/images/Slice77.png" alt="" >
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
src/app/my/my-management/my-management.component.scss
.wrapper{ .wrapper{
padding: 10px 15px; padding: 10px;
background: #fff; background: #fff;
.opt{ .opt{
display: flex; display: flex;
...@@ -55,11 +55,18 @@ ...@@ -55,11 +55,18 @@
} }
} }
} }
p{
display: flex;
justify-content: center;
align-items: center;
color: #C1C1C1;
img{margin-right: 5px;position: relative;top: -2px;}
}
} }
.toastWrapper { .toastWrapper {
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.3);
top: 0; top: 0;
} }
.toast { .toast {
...@@ -71,22 +78,14 @@ ...@@ -71,22 +78,14 @@
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
z-index: 1; z-index: 1;
div{ img{
position: absolute; position: absolute;
top: 0; top: 0;
bottom: -45%; bottom: -45%;
left: 0; left: 0;
right: 0; right: 0;
margin: auto; margin: auto;
width: 35px;
height: 35px;
background: #595959;
line-height: 33px;
text-align: center;
color: #fff;
z-index: 1;
border-radius: 50%;
font-size: 24px;
} }
} }
#toastContent { #toastContent {
......
src/app/my/my-management/my-management.component.ts
import { Component, OnInit,ViewChild,ElementRef } from '@angular/core'; import { Component, OnInit,ViewChild,ElementRef } from '@angular/core';
import { MyService } from '../my.service'; import { MyService } from '../my.service';
import { EChartOption } from 'echarts'; import { EChartOption } from 'echarts';
import { NgxEchartsService } from 'ngx-echarts'; import { color } from 'html2canvas/dist/types/css/types/color';
const echarts = require('echarts'); const echarts = require('echarts');
...@@ -11,7 +11,7 @@ const echarts = require('echarts'); ...@@ -11,7 +11,7 @@ const echarts = require('echarts');
styleUrls: ['./my-management.component.scss'] styleUrls: ['./my-management.component.scss']
}) })
export class MyManagementComponent implements OnInit { export class MyManagementComponent implements OnInit {
// @ViewChild('echarts') echarts: ElementRef @ViewChild('echarts') echarts: ElementRef
optList:Array<any>; optList:Array<any>;
mdDropOptionCode:string = null; mdDropOptionCode:string = null;
year:number = (new Date()).getFullYear(); year:number = (new Date()).getFullYear();
...@@ -34,17 +34,15 @@ export class MyManagementComponent implements OnInit { ...@@ -34,17 +34,15 @@ export class MyManagementComponent implements OnInit {
videoList:Array<any>; videoList:Array<any>;
count:number; count:number;
total:number; total:number;
constructor(private myService: MyService,private es: NgxEchartsService,private el: ElementRef) { } constructor(private myService: MyService) { }
ngOnInit() { ngOnInit() {
this.dropOptionsQuery('yd_trainning_file_type'); this.dropOptionsQuery('yd_trainning_file_type');
this.changeIsTeam(0); this.changeIsTeam(0);
this.yearList = [2018,2019,2020,2021,2022,2023,2024,2025]; this.yearList = [2018,2019,2020,2021,2022,2023,2024,2025];
this.monthList = [1,2,3,4,5,6,7,8,9,10,11,12] this.monthList = [1,2,3,4,5,6,7,8,9,10,11,12]
// console.log(this.echarts.nativeElement); this.my_chart = echarts.init(this.echarts.nativeElement);
this.my_chart = echarts.init(this.el.nativeElement.querySelector('#main'));
this.my_chart.on('click', (params) => { this.my_chart.on('click', (params) => {
this.my_chart.setOption(this.chartOption);
console.log(params) console.log(params)
}); });
...@@ -91,33 +89,51 @@ export class MyManagementComponent implements OnInit { ...@@ -91,33 +89,51 @@ export class MyManagementComponent implements OnInit {
this.chartOption = { this.chartOption = {
xAxis: { xAxis: {
type: 'category', type: 'category',
name:'学习进度', name:'(学习进度)',
nameTextStyle:{
padding:[25,0,0,-28],
color:'#666',
fontSize:10
},
data: ['0', '1-50%', '51-70%', '71-99%', '100%'], data: ['0', '1-50%', '51-70%', '71-99%', '100%'],
axisLabel: { //坐标轴刻度标签的相关设置。 axisLabel: { //坐标轴刻度标签的相关设置。
interval: 0,//设置为 1,表示『隔一个标签显示一个标签』 interval: 0,//设置为 1,表示『隔一个标签显示一个标签』
textStyle: { textStyle: {
color: '#6C7293',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 10, fontSize: 10,
color:'#666'
}, },
rotate:0, rotate:0,
}, },
axisTick:{//坐标轴刻度相关设置。 axisTick:{//坐标轴刻度相关设置。
show: false, show: false,
}, },
axisLine: { // 坐标轴 轴线
show: true, // 是否显示
//symbol: ['none', 'arrow'], // 是否显示轴线箭头
//symbolSize: [8, 8], // 箭头大小
//symbolOffset: [0, 7], // 箭头位置
// ------ 线 ---------
lineStyle: {
color: '#5F83FF',
width: 2,
type: 'solid'
}
},
}, },
yAxis: { yAxis: {
show:false,
type: 'value', type: 'value',
splitNumber: 3, splitNumber: 3,
axisTick:{//坐标轴刻度相关设置。 axisTick:{//坐标轴刻度相关设置。
show: false, show: true,
}, },
axisLine:{
show:true
}
}, },
series: [ series: [
{ {
// data: this.personY, data: this.personY,
data:[8,6,4,2,0],
type: 'bar', type: 'bar',
showBackground: false, showBackground: false,
barWidth: 30, barWidth: 30,
...@@ -154,11 +170,6 @@ export class MyManagementComponent implements OnInit { ...@@ -154,11 +170,6 @@ export class MyManagementComponent implements OnInit {
this.myService.teamCompletionRate(params).subscribe((res)=>{ this.myService.teamCompletionRate(params).subscribe((res)=>{
console.log(res) console.log(res)
if(res['success']){ if(res['success']){
// this.zeroList = res['data']['zeroList'];
// this.fiftyList = res['data']['fiftyList'];
// this.seventyList = res['data']['seventyList'];
// this.ninetyNineList = res['data']['ninetyNineList'];
// this.hundredList = res['data']['hundredList'];
this.systemList = res['data']['systemList']; this.systemList = res['data']['systemList'];
}else{ }else{
this.systemList = []; this.systemList = [];
...@@ -176,7 +187,11 @@ export class MyManagementComponent implements OnInit { ...@@ -176,7 +187,11 @@ export class MyManagementComponent implements OnInit {
xAxis: { xAxis: {
type: 'category', type: 'category',
data: this.teamX, data: this.teamX,
name:'团队/人', name:'(团队/人)',
nameTextStyle:{
padding:[25,0,0,-28],
color:'#666'
},
axisTick:{show: false}, axisTick:{show: false},
axisLabel: { axisLabel: {
show: true, show: true,
...@@ -184,7 +199,7 @@ export class MyManagementComponent implements OnInit { ...@@ -184,7 +199,7 @@ export class MyManagementComponent implements OnInit {
formatter:function(params) { formatter:function(params) {
var newParamsName = ""; var newParamsName = "";
var paramsNameNumber = params.length; var paramsNameNumber = params.length;
var provideNumber = 4; //一行显示几个字 var provideNumber = 5; //一行显示几个字
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) { if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) { for (var p = 0; p < rowNumber; p++) {
...@@ -204,19 +219,22 @@ export class MyManagementComponent implements OnInit { ...@@ -204,19 +219,22 @@ export class MyManagementComponent implements OnInit {
} }
return newParamsName return newParamsName
}, },
textStyle: {
color: '#6861a6' //文字颜色
}
} }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
name:'学习进度%', name:'(学习进度%)',
axisTick:{show: false}, axisTick:{show: false},
axisLabel:{
textStyle: {
fontSize: 10,
},
formatter:'{value}%'
},
}, },
series: [ series: [
{ {
data: ['20', '40', '60', '100'], data: ['20', '40', '60','80', '100'],
type: 'bar', type: 'bar',
showBackground: false, showBackground: false,
barWidth: 30, barWidth: 30,
...@@ -251,8 +269,28 @@ export class MyManagementComponent implements OnInit { ...@@ -251,8 +269,28 @@ export class MyManagementComponent implements OnInit {
} }
chartClick(){ onChartClick(event){
// console.log(1) console.log(event.dataIndex)
if(this.isTeam == 0){
if(event.dataIndex == 0){
this.detailList = this.zeroList;
}else if(event.dataIndex == 1){
this.detailList = this.fiftyList;
}else if(event.dataIndex == 2){
this.detailList = this.seventyList;
}else if(event.dataIndex == 3){
this.detailList = this.ninetyNineList;
}else if(event.dataIndex == 4){
this.detailList = this.hundredList;
}
}
if(this.isTeam == 1){
for(let i=0;i<this.systemList.length;i++){
if(event.dataIndex == i){
this.detailList = this.systemList[i]['list'];
}
}
}
} }
getLearnDetail(practitionerId){ getLearnDetail(practitionerId){
...@@ -263,6 +301,10 @@ export class MyManagementComponent implements OnInit { ...@@ -263,6 +301,10 @@ export class MyManagementComponent implements OnInit {
this.videoList = res['data']['videoList']; this.videoList = res['data']['videoList'];
this.count = res['data']['count']; this.count = res['data']['count'];
this.total = res['data']['total']; this.total = res['data']['total'];
}else{
this.videoList = [];
this.count = 0;
this.total = 0;
} }
}) })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment