引入chart命令
# if you use npm
npm install echarts --save
npm install ngx-echarts --save
angular.json文件中引入
"scripts": [
"node_modules/echarts/dist/echarts.js"
]
app.module.ts文件中引入
import {NgxEchartsModule} from 'ngx-echarts';
@NgModule({
declarations: [AppComponent],
imports: [
NgxEchartsModule
})
所在文件中使用
html
<div nz-row style="width: 100%;height: 50%;">
<div nz-col nzSpan="24" #myechartzhu></div>
</div>
<div nz-row style="width: 100%;height: 50%;">
<div nz-col nzSpan="24" #myechartzhe></div>
</div>
ts
import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import {_HttpClient, ModalHelper} from "@delon/theme";
import {environment} from "@env/environment";
declare var echarts: any;
@Component({
selector: 'app-quality-img-list',
templateUrl: './quality-img-list.component.html',
styleUrls: ['./quality-img-list.component.less']
})
export class QualityImgListComponent implements OnInit {
title = 'my-app';
@ViewChild('myechart') myechart: ElementRef;
@ViewChild('myechartzhu') myechartzhu: ElementRef;
@ViewChild('myechartzhe') myechartzhe: ElementRef;
EC;
EC4;
constructor(
private http: _HttpClient,
) { }
ngOnInit(): void {
}
dateSevenNameList =[];
dateSevenNumList =[];
dateNameList=[];
dateEndList=[];
dateNoList=[];
ngAfterViewInit() {
this.http.get('url').subscribe(res=>{
res['data'].forEach(element => {
this.dateNameList.push(element.taskName);
if(element.endNum!=null){
this.dateEndList.push(element.endNum)
}else{
this.dateEndList.push(0)
}
if(element.noNUm!=null){
this.dateNoList.push(element.noNUm)
}else{
this.dateNoList.push(0)
}
});
const option = {
title: {
text: '类型图',
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['完成', '未完成']
},
// toolbox: {
// show: true,
// feature: {
// dataView: {show: true, readOnly: false},
// magicType: {show: true, type: ['line', 'bar']},
// restore: {show: true},
// saveAsImage: {show: true}
// }
// },
calculable: true,
xAxis: [
{
type: 'category',
data: ['日常', '循环', '周期']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '完成',
type: 'bar',
data: this.dateEndList,
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name: '未完成',
type: 'bar',
data:this.dateNoList,
markPoint: {
data: [
{name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
{name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
]
};
this.EC = echarts.init(this.myechartzhu.nativeElement);
this.EC.setOption(option, true);
})
this.http.get('url').subscribe(res=>{
console.log( res['data']);
res['data'].forEach(element => {
this.dateSevenNameList.push(element.dayName)
this.dateSevenNumList.push(element.num)
});
const optionzhe = {
title: {
text: '近七天内单量折线图'
},
xAxis: {
type: 'category',
data: this.dateSevenNameList
},
yAxis: {
type: 'value'
},
series: [{
data: this.dateSevenNumList,
type: 'line'
}]
};
this.EC4 = echarts.init(this.myechartzhe.nativeElement);
this.EC4.setOption(optionzhe, true);
})
}
}
效果如下
echaerts官网模板: https://echarts.apache.org/examples/zh/index.html#chart-type-bar