angular4中使用echarts

1.安裝配置ngx-echarts

首先安裝适合自己項目版本的ngx-echart

安裝ngx-echarts

如果目前的項目版本為angular6

# if you use npm

npm install echarts --save

npm install ngx-echarts --save

如果目前項目版本<angular6

npm install echarts --save

npm install [email protected] --save

2.添加js引導檔案

在.angular-cli.json檔案中添加

“scripts”: [

…

“…/node_modules/echarts/dist/echarts.min.js”

…

],

3.在APPModule中或者元件的ngModule導入的NgxEchartsModule

import { NgxEchartsModule } from ‘ngx-echarts’;

@NgModule({

imports: [

…,

NgxEchartsModule

],

…

})

export class AppModule { }

4.聲明div容器

在元件中添加<div echarts [options]=“chartOption” class=“demo-chart”>

5.在ts中聲明chartOption

ngOnInit() {

}

chartOption = {

tooltip : {

trigger: ‘item’

},

legend: {

orient: ‘vertical’,

x: ‘left’,

data: [‘直接通路’, ‘郵件營銷’, ‘聯盟廣告’, ‘視訊廣告’, ‘搜尋引擎’]

},

grid: {

left: ‘3%’,

right: ‘4%’,

bottom: ‘3%’,

containLabel: true

},

series : [

{

name: ‘通路來源’,

type: ‘pie’,

radius: [‘50%’, ‘10%’],

avoidLabelOverlap: false,

label: {

normal: {

formatter: ‘’,

backgroundColor: ‘#eee’,

borderColor: ‘#aaa’,

borderWidth: 1,

borderRadius: 4,

rich: {

a: {

color: ‘red’,

lineHeight: 22,

align: ‘center’

},

hr: {

borderColor: ‘#aaa’,

width: ‘100%’,

borderWidth: 0.5,

height: 0

},

b: {

fontSize: 16,

lineHeight: 33

},

per: {

color: ‘#eee’,

backgroundColor: ‘#334455’,

padding: [2, 4],

borderRadius: 2

}

}

},

emphasis: {

show: true,

textStyle: {

fontSize: ‘30’,

fontWeight: ‘bold’

}

}

},

labelLine: {

normal: {

show: false

}

},

data: [

{value: 335, name: ‘直接通路’},

{value: 310, name: ‘郵件營銷’},

{value: 234, name: ‘聯盟廣告’},

{value: 135, name: ‘視訊廣告’},

{value: 1548, name: ‘搜尋引擎’}

]

}

]

};

參考位址