angular项目使用echarts

方法一：直接引用echarts.min.js文件

1、下载好的echarts.min.js 放到assets/lib文件夹下。如图：
2、angular.json中配置一下路径（如图）

3、使用 在组件声明echarts变量 初始化echarts

import {
    
     Component, OnInit } from '@angular/core';
//引入声明echarts
declare var echarts: any
@Component({
    
    
    selector: 'app-child2',
    templateUrl: './child2.component.html',
    styleUrls: ['./child2.component.scss']
})

export class Child2Component implements OnInit {
    
    

    constructor() {
    
     }
    // echarts 实例
    myChart:any
    
    ngOnInit(): void {
    
    
    // 初始化图表
        this.initChart()
    }
    // echarts图表配置   
    initChart() {
    
    
        let self = this
        self.myChart = echarts.init(document.getElementById('echBox'));
        // 指定图表的配置项和数据
        var option = {
    
    
            xAxis: {
    
    
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
    
    
                type: 'value'
            },
            series: [{
    
    
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        self.myChart.setOption(option);
    }
}

组件Template

<div id="echBox" style="width: 500px;height: 500px;"></div>

方法二 使用angular使用ngx-echarts 过程中遇到报错inject() must be called from an injection context，一直没解决就不整理了