ng中使用echarts表

引入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