angular中引入echarts

原创已于 2022-02-07 21:34:18 修改 · 701 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

echarts

于 2021-05-29 11:25:57 首次发布

本文介绍了如何在Angular项目中引入并使用Echarts。首先通过npm安装echarts和ngx-echarts，然后解决可能遇到的启动错误问题，接着在模块中引入相关组件，最后展示在HTML和TS文件中的使用示例。

一、项目中引入

查了几个图表类的插件，发现还是echarts最好用，即免费又好看。

1、安装

npm install echarts --save

（npm install echarts@5.0.2 --save 安装固定版本）（5.1.2 版本以上安装后，启动时会报错，我未解决，所以安装个更低版本的）

npm install ngx-echarts -S

(npm install ngx-echarts@5.2.1 -S)

安装完后需要安装/resize-observer，否则启动会报错

npm install @juggle/resize-observer -D

ngx-echarts - npm

参考这个看需要安装的版本。

2、项目中引入

在Module中引入

import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({
 imports: [

 NgxEchartsModule， // 引入module

 ],

})

export class AppModule { }

3、使用

html中：

<div style="padding: 20px;background: #fff;" echarts [options]="currentDayPay" class="broken-line"></div>

ts中：

currentDayPay={

xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

其他图形参考：Examples - Apache ECharts

参考：ngx-echarts - npm

标签

#angular #echarts