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