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 ngx-echarts@2.1.0 --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: ‘搜索引擎’}
]
}
]
};
参考地址