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

217
src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts
View file

@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({
selector: 'ngx-echarts-multiple-xaxis',
@ -7,111 +8,133 @@ import { Component } from '@angular/core';
`,
})
export class EchartsMultipleXaxisComponent {
private colors = ['#5793f3', '#d14a61', '#675bba'];
options: any;
options = {
color: this.colors,
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
const colors = [
config.echartsMultipleXAxisColor1,
config.echartsMultipleXAxisColor2,
config.echartsMultipleXAxisColor3,
];
tooltip: {
trigger: 'none',
axisPointer: {
type: 'cross',
},
},
legend: {
data: ['2015 降水量', '2016 降水量'],
},
grid: {
top: 70,
bottom: 50,
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true,
},
axisLine: {
onZero: false,
lineStyle: {
color: this.colors[1],
this.options = {
backgroundColor: config.echartsBackgroundColor,
color: colors,
tooltip: {
trigger: 'none',
axisPointer: {
type: 'cross',
},
},
axisPointer: {
label: {
formatter: function(params) {
return '降水量 ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
legend: {
data: ['2015 Precipitation', '2016 Precipitation'],
textStyle: {
color: config.echartsMultipleXAxisLegendTextColor,
},
},
grid: {
top: 70,
bottom: 50,
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true,
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[1],
},
},
axisPointer: {
label: {
formatter: params => {
return (
'Precipitation ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
},
},
},
data: [
'2016-1',
'2016-2',
'2016-3',
'2016-4',
'2016-5',
'2016-6',
'2016-7',
'2016-8',
'2016-9',
'2016-10',
'2016-11',
'2016-12',
],
},
{
type: 'category',
axisTick: {
alignWithLabel: true,
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[0],
},
},
axisPointer: {
label: {
formatter: params => {
return (
'Precipitation ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
},
},
},
data: [
'2015-1',
'2015-2',
'2015-3',
'2015-4',
'2015-5',
'2015-6',
'2015-7',
'2015-8',
'2015-9',
'2015-10',
'2015-11',
'2015-12',
],
},
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: config.echartsMultipleXAxisYAxisLineColor,
},
},
},
},
data: [
'2016-1',
'2016-2',
'2016-3',
'2016-4',
'2016-5',
'2016-6',
'2016-7',
'2016-8',
'2016-9',
'2016-10',
'2016-11',
'2016-12',
],
},
{
type: 'category',
axisTick: {
alignWithLabel: true,
},
axisLine: {
onZero: false,
lineStyle: {
color: this.colors[0],
series: [
{
name: '2015 Precipitation',
type: 'line',
xAxisIndex: 1,
smooth: true,
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
},
},
axisPointer: {
label: {
formatter: params => {
return '降水量 ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
},
{
name: '2016 Precipitation',
type: 'line',
smooth: true,
data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7],
},
},
data: [
'2015-1',
'2015-2',
'2015-3',
'2015-4',
'2015-5',
'2015-6',
'2015-7',
'2015-8',
'2015-9',
'2015-10',
'2015-11',
'2015-12',
],
},
],
yAxis: [
{
type: 'value',
},
],
series: [
{
name: '2015 降水量',
type: 'line',
xAxisIndex: 1,
smooth: true,
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
},
{
name: '2016 降水量',
type: 'line',
smooth: true,
data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7],
},
],
};
};
});
}
}