前言

    echarts是第三方js庫，不是ts編寫，沒有型別定義，我們可以引入型別定義的庫@types，查詢是否有echarts，很高興其他人已經幫忙實現了。我們只要匯入就行。

    在網上查詢呼叫ng2呼叫echarts的方法，比較多的是ngx-echarts和ng2-echarts，這個方法，我都沒有走通，在大漠老師的nicefish中有通過自定義指令呼叫echart的方法，特整理下來。

1. 安裝外掛

npm install echarts -–save

2. 新建指令

ng g d echartDir

    在指令中寫入以下程式碼

import { Directive, Input, ElementRef, OnInit } from '@angular/core'
 
;
import * as echarts from 'echarts';
@Directive({
  selector: '[newChart]'
})
export class NewChartDirective implements OnInit{
  @Input('newChart') Option;
  constructor(
    private el:ElementRef
  ) { }
  ngOnInit(){
    console.log(this.el.nativeElement);
    echarts.init(this.el.nativeElement).setOption(this
 
.Option);
  }
}

3.檢查ngModule中是否引入了新建的指令

import { NewChartDirective } from './new-chart.directive';
@NgModule({
  declarations: [
    NewChartDirective,
    …
  ]})

4.在使用的元件中宣告echart配置項

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-echarts-test',
  templateUrl: './echarts-test.component.html'
 
,
  styleUrls: ['./echarts-test.component.css'],
})
export class EchartsTestComponent implements OnInit {
  // 指定圖表的配置項和資料
  option = {
    title: {
        text: 'ECharts 入門示例'
    },
    tooltip: {},
    legend: {
        data:['銷量']
    },
    xAxis: {
        data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
  };
  constructor() { }

  ngOnInit() {
  }

}

5.在.html（檢視中）使用指令

<div id='chart' [newChart]="option" style="width:500px;height:500px;"></div>     

    執行結果：

注意事項：

import * as echarts from 'echarts'

    匯入echarts物件後我們就可以參照echarts的api開始使用，這邊你可能會奇怪from’echarts’,路徑是哪裡，其實在tsconfig.json檔案中統一定義了根路徑typeRoots

{
   "compilerOptions": {
      ...,
       "typeRoots": [
           "../node_modules/@types"
       ]
   }
}

也就是node_modules資料夾下的路徑