一、npm 安装 这三个
npm install echarts --save //echarts的npm包
npm install ngx-echarts --save //因为echarts 是js 的,所以需要这个来适配 ts
npm install @types/echarts -D //这个不知道什么作用,还没了解
二、app.moudule.ts 中操作
- import 引入
- @NgModule中 import
...
import { NgxEchartsModule } from 'ngx-echarts';
...
@NgModule({
declarations: [
AppComponent,
],
imports: [
...
NgxEchartsModule.forRoot({
echarts: () => import('echarts'), // or import('./path-to-my-custom-echarts')
}),
...
],
})
三、 对应的 xxx.components.html 中
<div echarts [options]="option_echart" class="demo-chart" ></div>
四、对应的 xxx.components.ts 中
export class WelcomeComponent implements OnInit {
//echart 官网的入门示例
option_echart = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
constructor() { }
ngOnInit() {
}
}
五、 运行结果
说明:因为用到了ng-zorro,所以echart 在右侧显示