angular8 引入 echarts

1.進入項目，在終端輸入

npm install echarts@5.0.2 --save

npm install ngx-echarts@6.0.1 --save

npm install @types/echarts --save

npm install resize-observer-polyfill@1.5.1 -D

 

2.在angular.json 配置echarts路徑

找到第一個 scripts 在里面加入

"node_modules/echarts/dist/echarts.min.js"

 

3.在 app.modules.ts根模塊中引入 NgxEchartsModule

 

 

 

 

4.在項目中使用

①. 在.html

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

②. 在 .ts

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

 

******

參考資源：https://www.npmjs.com/package/ngx-echarts