Angular小博客

分享让你更聪明

Angular中使用echarts,直接使用

浏览:112次 日期:2024年07月23日 7:59:26 作者:admin

安装依赖

// 安装echarts
npm i echarts --save
// 最新版本的echarts不需要这个
npm i @types/echarts --save-dev

html代码

<div #echartsBox style="width: 500px;height: 300px;"></div>

TS代码

// 导入
import * as echarts from 'echarts';
const ec = echarts as any;

export class NgxEchartsComponent implements AfterViewInit, OnDestroy {
    @ViewChild('echartsBox', {static: true}) echartsBox: ElementRef | any;
    public echartsDom: any = null;
    public 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'
            }
        ]
    };
    ngAfterViewInit(): void {
        this.echartsDom = ec.init(this.echartsBox.nativeElement);
        this.echartsDom.setOption(this.option);
    }
}

写的有点着急,所以就简单用法吧。