angular中引入echarts

一、項目中引入

查了幾個圖表類的插件，發現還是echarts最好用，即免費又好看。

1、安裝

npm install echarts --save

（npm install ech[email protected] --save  安裝固定版本）（5.1.2 版本以上安裝後，啟動時會報錯，我未解決，是以安裝個更低版本的）

npm install ngx-echarts -S

(npm install [email protected] -S)

安裝完後需要安裝/resize-observer，否則啟動會報錯

npm install @juggle/resize-observer -D

https://www.npmjs.com/package/ngx-echarts

參考這個看需要安裝的版本。

2、項目中引入

在Module中引入

import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({

 imports: [

 NgxEchartsModule， // 引入module

 ],

})

export class AppModule { }

3、使用

html中：

<div style="padding: 20px;background: #fff;" echarts [options]="currentDayPay" class="broken-line"></div>

ts中：

currentDayPay={

xAxis: {

        type: 'category',

        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

    },

    yAxis: {

        type: 'value'

    },

    series: [{

        data: [820, 932, 901, 934, 1290, 1330, 1320],

        type: 'line'

    }]

};

其他圖形參考：https://echarts.apache.org/v4/examples/zh/index.html

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