angular+echart入门记录

一、npm 安装 这三个

npm install echarts --save  //echarts的npm包
npm install ngx-echarts --save  //因为echarts 是js 的，所以需要这个来适配 ts
npm install @types/echarts -D //这个不知道什么作用，还没了解

二、app.moudule.ts 中操作

1. import 引入
2. @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 在右侧显示