Pages UI
Search…
Charts
Charts are powered by nvd3 and echarts please refer there guid for further documentation
https://ecomfe.github.io/echarts-doc/public/en/option.html
ecomfe.github.io

Importing

First import it to your app module or any submodule as you wish
1
import { NgxEchartsModule } from 'ngx-echarts';
2
import { NvD3Module } from 'ngx-nvd3';
3
@NgModule({
4
imports: [NvD3Module,NgxEchartsModule,...]
5
})
6
export class AppModule(){}
Copied!

How to use

HTML
Typescript
1
<div echarts [options]="optionsLineStack" [initOpts]="initOptionsLineStack" class="demo-chart"></div>
Copied!
1
initOptionsLineStack = {
2
renderer: 'svg',
3
width: 460,
4
height: 300
5
};
6
7
optionsLineStack = {
8
tooltip : {
9
trigger: 'axis',
10
backgroundColor:'#fff',
11
padding:10,
12
textStyle:{
13
color:pg.getColor('master'),
14
fontSize:12,
15
fontFamily:"Arial",
16
},
17
axisPointer:{
18
type:"line",
19
lineStyle:{
20
opacity:0.6
21
}
22
},
23
extraCssText:"box-shadow: 0 0 6px rgba(0,0,0,.1);"
24
},
25
grid: {
26
left: '3%',
27
right: '4%',
28
bottom: '3%',
29
containLabel: true
30
},
31
xAxis : [
32
{
33
type : 'category',
34
boundaryGap : false,
35
data : [10, 10, 25, 29, 20, 22, 20, 22],
36
axisLine:{
37
show:false
38
},
39
axisTick:{
40
show:false
41
},
42
axisLabel:{
43
show:false
44
}
45
}
46
],
47
yAxis : [
48
{
49
type : 'value',
50
axisLine:{
51
show:false
52
},
53
axisLabel:{
54
show:false
55
},
56
axisTick:{
57
show:false
58
},
59
splitLine:{
60
show:false
61
},
62
backgroundColor:"#fff"
63
}
64
],
65
series : [
66
{
67
name:'Visitors',
68
type:'line',
69
stack: '',
70
areaStyle: {
71
opacity:0.4
72
},
73
data:[10, 10, 25, 29, 20, 22, 20, 22],
74
clipOverflow:'start',
75
itemStyle:{
76
color:pg.getColor('warning')
77
},
78
lineStyle:{
79
width:0
80
}
81
},
82
{
83
name:'New Visitors',
84
type:'line',
85
stack: '',
86
areaStyle: {
87
opacity:0.4
88
},
89
data:[0, 10, 8, 20, 15, 10, 15, 5],
90
clipOverflow:'start',
91
itemStyle:{
92
color:pg.getColor('danger')
93
},
94
lineStyle:{
95
width:0
96
}
97
}
98
]
99
}
Copied!
Last modified 4yr ago
Copy link