Echarts1-- angular2中引入echarts

我用的是angular-cil 9.0

1、下載下傳echarts

npm install echarts --save
npm install ngx-echarts --save
或
cnpm install echarts --save
cnpm install ngx-echarts --save
           

下載下傳結果：

2、 在angular.json 配置echarts路徑

"scripts": [
              "node_modules/echarts/dist/echarts.min.js",
              "node_modules/echarts/map/js/china.js",
              "node_modules/echarts/dist/extension/bmap.js"
            ]
           

注意：angular.json發生改變時，就要重新開機伺服器

3、在app.module中引用這個子產品

import { NgxEchartsModule } from 'ngx-echarts';
 imports: [
    BrowserModule,
    AppRoutingModule,
    NgxEchartsModule
  ],
           

4、在元件裡使用

4.1、在a.html裡，準備放echarts圖表的容器

<div id="main" style="width: 600px;height:400px;"></div>
           

注意，一定要有寬高，可以不寫在行内，但要有的

4.2、在a.ts裡，寫圖表配置

import * as echarts from 'echarts';
export class Aa implements OnInit {
  constructor() { }
  ngOnInit(): void {
		 let dom: any = document.getElementById('main');
		 let chart: any = echarts.init(dom);
		let option: any = {
			 title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
		}
		chart.setOption(option);
	 }
 }

           

結果：