angular6項目中使用echarts圖表的方法（有一個坑，引用報錯）

一、安裝相關依賴（採用的webpack）

npm install ecahrts --save
npm install ngx-echarts --save

二、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"
 ]

3*、module文件中導入NgxEchartsModule模塊，通常都是全局使用，放到項目中的共有模塊中，由於並非其餘的每一個模塊都會用到echarts，因此放到app.module.ts文件下並非最佳的實踐方式。在項目中單首創建一個共享shared.module，在使用的component中引用便可。可是，使用公共module時，必須加入exports中，不然報錯！

/**share.module.ts**/
import {NgxEchartsModule} from 'ngx-echarts';
... 
imports: [ 
　　...,
　　NgxEchartsModule, 
　　...
],
 exports: [ 
　　...,
　　NgxEchartsModule
　　, ...
]

四、

在對應的模板文件中如此使用

options = {
  title: {
    text: 'ECharts 入門示例'
  },
  tooltip: {},
  xAxis: {
    data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
  },
  yAxis: {},
  series: [{
    name: '銷量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
}

<div echarts [options]="options" class="main-chart"></div>