Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-23 10:50: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

127
src/app/pages/charts/echarts/echarts-bar-animation.component.ts
View file

@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({
selector: 'ngx-echarts-bar-animation',
@ -7,68 +8,72 @@ import { Component } from '@angular/core';
`,
})
export class EchartsBarAnimationComponent {
xAxisData = [];
data1 = [];
data2 = [];
options: any;
options = {
title: {
text: '柱状图动画延迟',
},
legend: {
data: ['bar', 'bar2'],
align: 'left',
},
toolbox: {
// y: 'bottom',
feature: {
magicType: {
type: ['stack', 'tiled'],
},
dataView: {},
saveAsImage: {
pixelRatio: 2,
},
},
},
tooltip: {},
xAxis: {
data: this.xAxisData,
silent: false,
splitLine: {
show: false,
},
},
yAxis: {},
series: [
{
name: 'bar',
type: 'bar',
data: this.data1,
animationDelay: function(idx) {
return idx * 10;
},
},
{
name: 'bar2',
type: 'bar',
data: this.data2,
animationDelay: function(idx) {
return idx * 10 + 100;
},
},
],
animationEasing: 'elasticOut',
animationDelayUpdate: function(idx) {
return idx * 5;
},
};
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
const xAxisData = [];
const data1 = [];
const data2 = [];
constructor() {
for (let i = 0; i < 100; i++) {
this.xAxisData.push('类目' + i);
this.data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
this.data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
}
this.options = {
backgroundColor: config.echartsBackgroundColor,
color: [config.echartsBarAnimationColor1, config.echartsBarAnimationColor2],
legend: {
data: ['bar', 'bar2'],
align: 'left',
textStyle: {
color: config.echartsBarAnimationLegendTextColor,
},
},
xAxis: {
data: xAxisData,
silent: false,
splitLine: {
show: false,
},
axisLine: {
lineStyle: {
color: config.echartsBarAnimationXAxisLineColor,
},
},
},
yAxis: {
axisLine: {
lineStyle: {
color: config.echartsBarAnimationYAxisLineColor,
},
},
},
series: [
{
name: 'bar',
type: 'bar',
data: data1,
animationDelay: function(idx) {
return idx * 10;
},
},
{
name: 'bar2',
type: 'bar',
data: data2,
animationDelay: function(idx) {
return idx * 10 + 100;
},
},
],
animationEasing: 'elasticOut',
animationDelayUpdate: function(idx) {
return idx * 5;
},
};
for (let i = 0; i < 100; i++) {
xAxisData.push('Category ' + i);
data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
}
});
}
}