所需要的环境：
1）node.js
2）npm包管理器
3）angular-cli（命令行工具）
一、首先让我们通过ng命令创建一个新项目
ng new demo
二、进入这个项目下，使用npm安装echarts
npm install echarts --save
npm install ngx-echarts --save
三、配置angular-cli.json文件
扫描二维码关注公众号，回复：
196307 查看本文章
"scripts": [
"../node_modules/echarts/dist/echarts.min.js"
]
在文件的scripts下，添加对于echarts.js文件的引用。
四、替换app.component.html文件中的内容
<div echarts [options]="chartOption" class="demo-chart"></div>五、在app.component.css文件下加入如下样式
.demo-chart {
height: 400px;
}六、修改app.component.ts文件，将AppComponent类中添加如下echarts数据
export
class
AppComponent {
chartOption = {
title: {
text:
'堆叠区域图'
},
tooltip : {
trigger:
'axis'
},
legend: {
data:[
'邮件营销',
'联盟广告',
'视频广告',
'直接访问',
'搜索引擎']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left:
'3%',
right:
'4%',
bottom:
'3%',
containLabel:
true
},
xAxis : [
{
type :
'category',
boundaryGap :
false,
data : [
'周一',
'周二',
'周三',
'周四',
'周五',
'周六',
'周日']
}
],
yAxis : [
{
type :
'value'
}
],
series : [
{
name:
'邮件营销',
type:
'line',
stack:
'总量',
areaStyle: {
normal: {}},
data:[
120,
132,
101,
134,
90,
230,
210]
},
{
name:
'联盟广告',
type:
'line',
stack:
'总量',
areaStyle: {
normal: {}},
data:[
220,
182,
191,
234,
290,
330,
310]
},
{
name:
'视频广告',
type:
'line',
stack:
'总量',
areaStyle: {
normal: {}},
data:[
150,
232,
201,
154,
190,
330,
410]
},
{
name:
'直接访问',
type:
'line',
stack:
'总量',
areaStyle: {
normal: {}},
data:[
320,
332,
301,
334,
390,
330,
320]
},
{
name:
'搜索引擎',
type:
'line',
stack:
'总量',
label: {
normal: {
show:
true,
position:
'top'
}
},
areaStyle: {
normal: {}},
data:[
820,
932,
901,
934,
1290,
1330,
1320]
}
]
}
}
*注意：如果在页面上没有数据，但是审查元素的时候发现节点，请调整app.component.css文件中demo-chart类的宽度
.demo-chart{
width:
700px;
height:
400px;
}