Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-19 17:00:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(charts): integrate js theme with echarts

Browse source
This commit is contained in:
Alexander Zhukov 2017-07-27 17:21:38 +03:00
parent eef4d0633c
commit d464d1060b
14 changed files with 675 additions and 543 deletions
Download patch file Download diff file Expand all files Collapse all files

182
src/app/pages/charts/echarts/echarts-area-stack.component.ts
View file

@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({
selector: 'ngx-echarts-area-stack',
@ -7,87 +8,106 @@ import { Component } from '@angular/core';
`,
})
export class EchartsAreaStackComponent {
options = {
title: {
text: '堆叠区域图',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985',
},
},
},
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',
options: any;
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.options = {
backgroundColor: config.echartsBackgroundColor,
color: [
config.echartsAreaStackColor1,
config.echartsAreaStackColor2,
config.echartsAreaStackColor3,
config.echartsAreaStackColor4,
config.echartsAreaStackColor5,
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: config.echartsAreaStackTooltipBackgroundColor,
},
},
},
areaStyle: { normal: {} },
data: [820, 932, 901, 934, 1290, 1330, 1320],
},
],
};
legend: {
data: ['Mail marketing', 'Affiliate advertising', 'Video ad', 'Direct interview', 'Search engine'],
textStyle: {
color: config.echartsAreaStackLegendTextColor,
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
axisLine: {
lineStyle: {
color: config.echartsAreaStackXAxisLineColor,
},
},
},
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: config.echartsAreaStackYAxisLineColor,
},
},
},
],
series: [
{
name: 'Mail marketing',
type: 'line',
stack: 'Total amount',
areaStyle: { normal: {} },
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: 'Affiliate advertising',
type: 'line',
stack: 'Total amount',
areaStyle: { normal: {} },
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: 'Video ad',
type: 'line',
stack: 'Total amount',
areaStyle: { normal: {} },
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: 'Direct interview',
type: 'line',
stack: 'Total amount',
areaStyle: { normal: {} },
data: [320, 332, 301, 334, 390, 330, 320],
},
{
name: 'Search engine',
type: 'line',
stack: 'Total amount',
label: {
normal: {
show: true,
position: 'top',
},
},
areaStyle: { normal: {} },
data: [820, 932, 901, 934, 1290, 1330, 1320],
},
],
};
});
}
}