Required environment :
1）node.js
2) npm package manager
3) angular-cli (command line tool)
1. First let's create a new project via ng command
of the new demo
2. Enter this project and use npm to install echarts
npm install echarts --save
npm install ngx-echarts --save
3. Configure the angular-cli.json file
"scripts"
: [
"../node_modules/echarts/dist/echarts.min.js"
]
In the file's scripts, add a reference to the echarts.js file.
Fourth, replace the content in the app.component.html file
<div echarts [options]="chartOption" class="demo-chart"></div>5. Add the following styles to the app.component.css file
.demo-chart {
height: 400px;
}6. Modify the app.component.ts file and add the following echarts data to the AppComponent class
export
class
AppComponent
{
chartOption
=
title:
{
text:
'Stacked Area Chart'
},
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;
}