@covalent/echarts 6.4.0 → 6.4.1

package/fesm2015/covalent-echarts-base.mjs

@@ -0,0 +1,4931 @@
+import * as i0 from '@angular/core';
+import { Injectable, Optional, SkipSelf, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, Directive, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BehaviorSubject, Subject, fromEvent, merge, timer } from 'rxjs';
+import { takeUntil, debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
+
+class TdChartOptionsService {
+    constructor() {
+        this._options = {};
+        this._optionsSubject = new BehaviorSubject(this._options);
+    }
+    setOption(option, value) {
+        const options = {};
+        options[option] = value;
+        Object.assign(this._options, options);
+        this._optionsSubject.next(this._options);
+    }
+    setArrayOption(option, value) {
+        let prevValue = this.getOption(option);
+        if (prevValue) {
+            const index = prevValue.indexOf(value);
+            index > -1 ? (prevValue[index] = value) : prevValue.push(value);
+        }
+        else {
+            prevValue = [value];
+        }
+        this.setOption(option, prevValue);
+    }
+    removeArrayOption(option, value) {
+        let prevValue = this.getOption(option);
+        if (prevValue) {
+            const index = prevValue.indexOf(value);
+            if (index > -1) {
+                /* tslint:disable-next-line */
+                prevValue[index] = null;
+            }
+            else {
+                prevValue = [];
+            }
+        }
+        this.setOption(option, prevValue);
+    }
+    getOption(option) {
+        return this._options[option];
+    }
+    clearOption(option) {
+        /* tslint:disable-next-line */
+        this.setOption(option, null);
+    }
+    listen() {
+        return this._optionsSubject.asObservable();
+    }
+}
+TdChartOptionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdChartOptionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TdChartOptionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdChartOptionsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdChartOptionsService, decorators: [{
+            type: Injectable
+        }] });
+function CHART_PROVIDER_FACTORY(parent) {
+    return parent || new TdChartOptionsService();
+}
+const CHART_PROVIDER = {
+    // If there is already a service available, use that. Otherwise, provide a new one.
+    provide: TdChartOptionsService,
+    deps: [[new Optional(), new SkipSelf(), TdChartOptionsService]],
+    useFactory: CHART_PROVIDER_FACTORY,
+};
+
+function assignDefined(target, ...sources) {
+    const keys = new Set();
+    for (const source of sources) {
+        for (const key of Object.keys(source)) {
+            keys.add(key);
+            const val = source[key];
+            /* tslint:disable-next-line */
+            if (val !== undefined && val !== null) {
+                target[key] = val;
+                /* tslint:disable-next-line */
+            }
+            else if (val === null) {
+                delete target[key];
+            }
+        }
+    }
+    // delete keys that are not in any source
+    for (const key of Object.keys(target)) {
+        if (!keys.has(key)) {
+            delete target[key];
+        }
+    }
+    return target;
+}
+
+/* tslint:disable */
+var aquaSplash = {
+    color: [
+        '#305b9e',
+        '#0076a9',
+        '#1d8daa',
+        '#51a2a8',
+        '#7fb5aa',
+        '#aac6b4',
+        '#CFD8C8',
+        '#ECEBE4',
+    ],
+    backgroundColor: 'transparent',
+    textStyle: {},
+    title: {
+        textStyle: {
+            color: '#aaaaaa',
+        },
+        subtextStyle: {
+            color: '#aaaaaa',
+        },
+    },
+    tree: {
+        itemStyle: {
+            color: '#ECEBE4',
+            borderColor: '#305b9e',
+        },
+    },
+    line: {
+        itemStyle: {
+            normal: {
+                borderWidth: '2',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: '2',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    radar: {
+        itemStyle: {
+            normal: {
+                borderWidth: '2',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: '2',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    bar: {
+        itemStyle: {
+            normal: {
+                barBorderWidth: 0,
+                barBorderColor: '#ccc',
+            },
+            emphasis: {
+                barBorderWidth: 0,
+                barBorderColor: '#ccc',
+            },
+        },
+    },
+    pie: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    scatter: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    boxplot: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    parallel: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    sankey: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    funnel: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    gauge: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    candlestick: {
+        itemStyle: {
+            normal: {
+                color: '#305b9e',
+                color0: 'transparent',
+                borderColor: '#305b9e',
+                borderColor0: '#1d8daa',
+                borderWidth: '2',
+            },
+        },
+    },
+    graph: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: 1,
+                color: '#aaaaaa',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+        color: [
+            '#305b9e',
+            '#0076a9',
+            '#1d8daa',
+            '#51a2a8',
+            '#7fb5aa',
+            '#aac6b4',
+            '#CFD8C8',
+            '#ECEBE4',
+        ],
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+        },
+    },
+    map: {
+        itemStyle: {
+            normal: {
+                areaColor: '#f3f3f3',
+                borderColor: '#999999',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                areaColor: 'rgba(254,198,77,1)',
+                borderColor: '#ecaf2b',
+                borderWidth: 1,
+            },
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#00475e',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: 'rgb(0,71,94)',
+                },
+            },
+        },
+    },
+    geo: {
+        itemStyle: {
+            normal: {
+                areaColor: '#f3f3f3',
+                borderColor: '#999999',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                areaColor: 'rgba(254,198,77,1)',
+                borderColor: '#ecaf2b',
+                borderWidth: 1,
+            },
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#00475e',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: 'rgb(0,71,94)',
+                },
+            },
+        },
+    },
+    categoryAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    valueAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    logAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    timeAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    toolbox: {
+        iconStyle: {
+            normal: {
+                borderColor: '#999999',
+            },
+            emphasis: {
+                borderColor: '#666666',
+            },
+        },
+    },
+    legend: {
+        textStyle: {
+            color: '#000000',
+        },
+    },
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+            crossStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+        },
+    },
+    timeline: {
+        lineStyle: {
+            color: '#666666',
+            width: 1,
+        },
+        itemStyle: {
+            normal: {
+                color: '#666666',
+                borderWidth: 1,
+            },
+            emphasis: {
+                color: '#f7ac4f',
+            },
+        },
+        controlStyle: {
+            normal: {
+                color: '#666666',
+                borderColor: '#666666',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                color: '#666666',
+                borderColor: '#666666',
+                borderWidth: 0.5,
+            },
+        },
+        checkpointStyle: {
+            color: '#f7ac4f',
+            borderColor: 'rgba(254,198,77,0.6)',
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#666666',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: '#666666',
+                },
+            },
+        },
+    },
+    visualMap: {
+        color: [
+            '#305b9e',
+            '#0076a9',
+            '#1d8daa',
+            '#51a2a8',
+            '#7fb5aa',
+            '#aac6b4',
+            '#CFD8C8',
+            '#ECEBE4',
+        ],
+    },
+    dataZoom: {
+        backgroundColor: 'rgba(255,255,255,0)',
+        dataBackgroundColor: 'rgba(255,178,72,0.5)',
+        fillerColor: 'rgba(255,178,72,0.15)',
+        handleColor: '#ffb248',
+        handleSize: '100%',
+        textStyle: {
+            color: '#aaaaaa',
+        },
+    },
+    markPoint: {
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+        },
+    },
+};
+
+/* tslint:disable */
+var californiaCoast = {
+    color: ['#0098c9', '#6ab1d7', '#a0cae4', '#ffbb9c', '#fd986d', '#f3753f'],
+    backgroundColor: 'transparent',
+    textStyle: {},
+    title: {
+        textStyle: {
+            color: '#aaaaaa',
+        },
+        subtextStyle: {
+            color: '#aaaaaa',
+        },
+    },
+    tree: {
+        itemStyle: {
+            color: '#ffbb9c',
+            borderColor: '#0098c9',
+        },
+    },
+    line: {
+        itemStyle: {
+            normal: {
+                borderWidth: '2',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: '2',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    radar: {
+        itemStyle: {
+            normal: {
+                borderWidth: '2',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: '2',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    bar: {
+        itemStyle: {
+            normal: {
+                barBorderWidth: 0,
+                barBorderColor: '#ccc',
+            },
+            emphasis: {
+                barBorderWidth: 0,
+                barBorderColor: '#ccc',
+            },
+        },
+    },
+    pie: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    scatter: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    boxplot: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    parallel: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    sankey: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    funnel: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    gauge: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    candlestick: {
+        itemStyle: {
+            normal: {
+                color: '#f3753f',
+                color0: 'transparent',
+                borderColor: '#f3753f',
+                borderColor0: '#0098c9',
+                borderWidth: '2',
+            },
+        },
+    },
+    graph: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: 1,
+                color: '#aaaaaa',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+        color: ['#0098c9', '#6ab1d7', '#a0cae4', '#ffbb9c', '#fd986d', '#f3753f'],
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+        },
+    },
+    map: {
+        itemStyle: {
+            normal: {
+                areaColor: '#f3f3f3',
+                borderColor: '#999999',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                areaColor: 'rgba(254,198,77,1)',
+                borderColor: '#ecaf2b',
+                borderWidth: 1,
+            },
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#394851',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: 'rgb(57,72,81)',
+                },
+            },
+        },
+    },
+    geo: {
+        itemStyle: {
+            normal: {
+                areaColor: '#f3f3f3',
+                borderColor: '#999999',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                areaColor: 'rgba(254,198,77,1)',
+                borderColor: '#ecaf2b',
+                borderWidth: 1,
+            },
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#394851',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: 'rgb(57,72,81)',
+                },
+            },
+        },
+    },
+    categoryAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    valueAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    logAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    timeAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    toolbox: {
+        iconStyle: {
+            normal: {
+                borderColor: '#999999',
+            },
+            emphasis: {
+                borderColor: '#666666',
+            },
+        },
+    },
+    legend: {
+        textStyle: {
+            color: '#aaaaaa',
+        },
+    },
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+            crossStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+        },
+    },
+    timeline: {
+        lineStyle: {
+            color: '#666666',
+            width: 1,
+        },
+        itemStyle: {
+            normal: {
+                color: '#666666',
+                borderWidth: 1,
+            },
+            emphasis: {
+                color: '#fec64d',
+            },
+        },
+        controlStyle: {
+            normal: {
+                color: '#666666',
+                borderColor: '#666666',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                color: '#666666',
+                borderColor: '#666666',
+                borderWidth: 0.5,
+            },
+        },
+        checkpointStyle: {
+            color: '#f3753f',
+            borderColor: 'rgba(255,178,72,0.41)',
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#666666',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: '#666666',
+                },
+            },
+        },
+    },
+    visualMap: {
+        color: ['#0098c9', '#6ab1d7', '#a0cae4', '#FFBB9C', '#FD986D', '#F3753F'],
+    },
+    dataZoom: {
+        backgroundColor: 'rgba(255,255,255,0)',
+        dataBackgroundColor: 'rgba(255,178,72,0.5)',
+        fillerColor: 'rgba(255,178,72,0.15)',
+        handleColor: '#fec64d',
+        handleSize: '100%',
+        textStyle: {
+            color: '#aaaaaa',
+        },
+    },
+    markPoint: {
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+        },
+    },
+};
+
+/* tslint:disable */
+var hawaiianSunrise = {
+    color: ['#00b2b1', '#69c6c4', '#a0d9d7', '#ffbb9c', '#fd986d', '#f3753f'],
+    backgroundColor: 'transparent',
+    textStyle: {},
+    title: {
+        textStyle: {
+            color: '#aaaaaa',
+        },
+        subtextStyle: {
+            color: '#aaaaaa',
+        },
+    },
+    tree: {
+        itemStyle: {
+            color: '#a0d9d7',
+            borderColor: '#00b2b1',
+        },
+    },
+    line: {
+        itemStyle: {
+            normal: {
+                borderWidth: '2',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: '2',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    radar: {
+        itemStyle: {
+            normal: {
+                borderWidth: '2',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: '2',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    bar: {
+        itemStyle: {
+            normal: {
+                barBorderWidth: 0,
+                barBorderColor: '#ccc',
+            },
+            emphasis: {
+                barBorderWidth: 0,
+                barBorderColor: '#ccc',
+            },
+        },
+    },
+    pie: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    scatter: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    boxplot: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    parallel: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    sankey: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    funnel: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    gauge: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    candlestick: {
+        itemStyle: {
+            normal: {
+                color: '#f3753f',
+                color0: 'transparent',
+                borderColor: '#f3753f',
+                borderColor0: '#00b2b1',
+                borderWidth: '2',
+            },
+        },
+    },
+    graph: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: 1,
+                color: '#aaaaaa',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+        color: ['#00b2b1', '#69c6c4', '#a0d9d7', '#ffbb9c', '#fd986d', '#f3753f'],
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+        },
+    },
+    map: {
+        itemStyle: {
+            normal: {
+                areaColor: '#f3f3f3',
+                borderColor: '#999999',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                areaColor: 'rgba(254,198,77,1)',
+                borderColor: '#ecaf2b',
+                borderWidth: 1,
+            },
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#007373',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: 'rgb(0,115,115)',
+                },
+            },
+        },
+    },
+    geo: {
+        itemStyle: {
+            normal: {
+                areaColor: '#f3f3f3',
+                borderColor: '#999999',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                areaColor: 'rgba(254,198,77,1)',
+                borderColor: '#ecaf2b',
+                borderWidth: 1,
+            },
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#007373',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: 'rgb(0,115,115)',
+                },
+            },
+        },
+    },
+    categoryAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    valueAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    logAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    timeAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    toolbox: {
+        iconStyle: {
+            normal: {
+                borderColor: '#999999',
+            },
+            emphasis: {
+                borderColor: '#666666',
+            },
+        },
+    },
+    legend: {
+        textStyle: {
+            color: '#000000',
+        },
+    },
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+            crossStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+        },
+    },
+    timeline: {
+        lineStyle: {
+            color: '#666666',
+            width: 1,
+        },
+        itemStyle: {
+            normal: {
+                color: '#666666',
+                borderWidth: 1,
+            },
+            emphasis: {
+                color: '#fec64d',
+            },
+        },
+        controlStyle: {
+            normal: {
+                color: '#666666',
+                borderColor: '#666666',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                color: '#666666',
+                borderColor: '#666666',
+                borderWidth: 0.5,
+            },
+        },
+        checkpointStyle: {
+            color: '#f3753f',
+            borderColor: 'rgba(255,178,72,0.41)',
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#666666',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: '#666666',
+                },
+            },
+        },
+    },
+    visualMap: {
+        color: ['#00b2b1', '#69c6c4', '#a0d9d7', '#ffbb9c', '#fd986d', '#f3753f'],
+    },
+    dataZoom: {
+        backgroundColor: 'rgba(255,255,255,0)',
+        dataBackgroundColor: 'rgba(255,178,72,0.5)',
+        fillerColor: 'rgba(255,178,72,0.15)',
+        handleColor: '#fec64d',
+        handleSize: '100%',
+        textStyle: {
+            color: '#aaaaaa',
+        },
+    },
+    markPoint: {
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+        },
+    },
+};
+
+/* tslint:disable */
+var passionFlower = {
+    color: ['#007e7d', '#977ed2', '#d58a9c', '#97b6eb', '#ceccbb', '#f2dfd8'],
+    backgroundColor: 'transparent',
+    textStyle: {},
+    title: {
+        textStyle: {
+            color: '#aaaaaa',
+        },
+        subtextStyle: {
+            color: '#aaaaaa',
+        },
+    },
+    tree: {
+        itemStyle: {
+            color: '#f2dfd8',
+            borderColor: '#007e7d',
+        },
+    },
+    line: {
+        itemStyle: {
+            normal: {
+                borderWidth: '2',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: '2',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    radar: {
+        itemStyle: {
+            normal: {
+                borderWidth: '2',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: '2',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    bar: {
+        itemStyle: {
+            normal: {
+                barBorderWidth: 0,
+                barBorderColor: '#ccc',
+            },
+            emphasis: {
+                barBorderWidth: 0,
+                barBorderColor: '#ccc',
+            },
+        },
+    },
+    pie: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    scatter: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    boxplot: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    parallel: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    sankey: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    funnel: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    gauge: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    candlestick: {
+        itemStyle: {
+            normal: {
+                color: '#977ed2',
+                color0: 'transparent',
+                borderColor: '#977ed2',
+                borderColor0: '#007e7d',
+                borderWidth: '2',
+            },
+        },
+    },
+    graph: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: 1,
+                color: '#aaaaaa',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+        color: ['#007e7d', '#977ed2', '#d58a9c', '#97b6eb', '#ceccbb', '#f2dfd8'],
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+        },
+    },
+    map: {
+        itemStyle: {
+            normal: {
+                areaColor: '#f3f3f3',
+                borderColor: '#999999',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                areaColor: 'rgba(254,198,77,1)',
+                borderColor: '#ecaf2b',
+                borderWidth: 1,
+            },
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#00475e',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: 'rgb(0,71,94)',
+                },
+            },
+        },
+    },
+    geo: {
+        itemStyle: {
+            normal: {
+                areaColor: '#f3f3f3',
+                borderColor: '#999999',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                areaColor: 'rgba(254,198,77,1)',
+                borderColor: '#ecaf2b',
+                borderWidth: 1,
+            },
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#00475e',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: 'rgb(0,71,94)',
+                },
+            },
+        },
+    },
+    categoryAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    valueAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    logAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    timeAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    toolbox: {
+        iconStyle: {
+            normal: {
+                borderColor: '#999999',
+            },
+            emphasis: {
+                borderColor: '#666666',
+            },
+        },
+    },
+    legend: {
+        textStyle: {
+            color: '#999999',
+        },
+    },
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+            crossStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+        },
+    },
+    timeline: {
+        lineStyle: {
+            color: '#666666',
+            width: 1,
+        },
+        itemStyle: {
+            normal: {
+                color: '#666666',
+                borderWidth: 1,
+            },
+            emphasis: {
+                color: '#f7ac4f',
+            },
+        },
+        controlStyle: {
+            normal: {
+                color: '#666666',
+                borderColor: '#666666',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                color: '#666666',
+                borderColor: '#666666',
+                borderWidth: 0.5,
+            },
+        },
+        checkpointStyle: {
+            color: '#f7ac4f',
+            borderColor: 'rgba(254,198,77,0.6)',
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#666666',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: '#666666',
+                },
+            },
+        },
+    },
+    visualMap: {
+        color: ['#007e7d', '#977ed2', '#d58a9c', '#97b6eb', '#ceccbb', '#f2dfd8'],
+    },
+    dataZoom: {
+        backgroundColor: 'rgba(255,255,255,0)',
+        dataBackgroundColor: 'rgba(255,178,72,0.5)',
+        fillerColor: 'rgba(255,178,72,0.15)',
+        handleColor: '#ffb248',
+        handleSize: '100%',
+        textStyle: {
+            color: '#aaaaaa',
+        },
+    },
+    markPoint: {
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+        },
+    },
+};
+
+/* tslint:disable */
+var razzleberryPie = {
+    color: [
+        '#523e85',
+        '#8b4f8f',
+        '#b96595',
+        '#e0829a',
+        '#ffa3a2',
+        '#f9b8a3',
+        '#f1ccb1',
+        '#ebddc8',
+    ],
+    backgroundColor: 'transparent',
+    textStyle: {},
+    title: {
+        textStyle: {
+            color: '#aaaaaa',
+        },
+        subtextStyle: {
+            color: '#aaaaaa',
+        },
+    },
+    tree: {
+        itemStyle: {
+            color: '#ffa3a2',
+            borderColor: '#523e85',
+        },
+    },
+    line: {
+        itemStyle: {
+            normal: {
+                borderWidth: '2',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: '2',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    radar: {
+        itemStyle: {
+            normal: {
+                borderWidth: '2',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: '2',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    bar: {
+        itemStyle: {
+            normal: {
+                barBorderWidth: 0,
+                barBorderColor: '#ccc',
+            },
+            emphasis: {
+                barBorderWidth: 0,
+                barBorderColor: '#ccc',
+            },
+        },
+    },
+    pie: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    scatter: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    boxplot: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    parallel: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    sankey: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    funnel: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    gauge: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    candlestick: {
+        itemStyle: {
+            normal: {
+                color: '#8b4f8f',
+                color0: '#ffa3a2',
+                borderColor: '#8b4f8f',
+                borderColor0: '#ffa3a2',
+                borderWidth: '2',
+            },
+        },
+    },
+    graph: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: 1,
+                color: '#aaaaaa',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+        color: [
+            '#523e85',
+            '#8b4f8f',
+            '#b96595',
+            '#e0829a',
+            '#ffa3a2',
+            '#f9b8a3',
+            '#f1ccb1',
+            '#ebddc8',
+        ],
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+        },
+    },
+    map: {
+        itemStyle: {
+            normal: {
+                areaColor: '#f3f3f3',
+                borderColor: '#999999',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                areaColor: 'rgba(255,178,72,1)',
+                borderColor: '#eb8146',
+                borderWidth: 1,
+            },
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#523e85',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: 'rgb(82,62,133)',
+                },
+            },
+        },
+    },
+    geo: {
+        itemStyle: {
+            normal: {
+                areaColor: '#f3f3f3',
+                borderColor: '#999999',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                areaColor: 'rgba(255,178,72,1)',
+                borderColor: '#eb8146',
+                borderWidth: 1,
+            },
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#523e85',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: 'rgb(82,62,133)',
+                },
+            },
+        },
+    },
+    categoryAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    valueAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    logAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    timeAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    toolbox: {
+        iconStyle: {
+            normal: {
+                borderColor: '#999999',
+            },
+            emphasis: {
+                borderColor: '#666666',
+            },
+        },
+    },
+    legend: {
+        textStyle: {
+            color: '#000000',
+        },
+    },
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+            crossStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+        },
+    },
+    timeline: {
+        lineStyle: {
+            color: '#523e85',
+            width: 1,
+        },
+        itemStyle: {
+            normal: {
+                color: '#523e85',
+                borderWidth: 1,
+            },
+            emphasis: {
+                color: '#ffb248',
+            },
+        },
+        controlStyle: {
+            normal: {
+                color: '#523e85',
+                borderColor: '#523e85',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                color: '#523e85',
+                borderColor: '#523e85',
+                borderWidth: 0.5,
+            },
+        },
+        checkpointStyle: {
+            color: '#eb8146',
+            borderColor: 'rgba(255,178,72,0.41)',
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#523e85',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: '#523e85',
+                },
+            },
+        },
+    },
+    visualMap: {
+        color: [
+            '#523e85',
+            '#8b4f8f',
+            '#b96595',
+            '#e0829a',
+            '#ffa3a2',
+            '#f9b8a3',
+            '#f1ccb1',
+            '#ebddc8',
+        ],
+    },
+    dataZoom: {
+        backgroundColor: 'rgba(255,255,255,0)',
+        dataBackgroundColor: 'rgba(255,178,72,0.5)',
+        fillerColor: 'rgba(255,178,72,0.15)',
+        handleColor: '#ffb248',
+        handleSize: '100%',
+        textStyle: {
+            color: '#aaaaaa',
+        },
+    },
+    markPoint: {
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+        },
+    },
+};
+
+/* tslint:disable */
+var teradataClassic = {
+    color: [
+        '#005e7d',
+        '#c54b17',
+        '#009392',
+        '#f5bb3c',
+        '#0098c9',
+        '#f58b5e',
+        '#59cecd',
+        '#fee2a6',
+    ],
+    backgroundColor: 'transparent',
+    textStyle: {},
+    title: {
+        textStyle: {
+            color: '#aaaaaa',
+        },
+        subtextStyle: {
+            color: '#aaaaaa',
+        },
+    },
+    tree: {
+        itemStyle: {
+            color: '#fee2a6',
+            borderColor: '#005e7d',
+        },
+    },
+    line: {
+        itemStyle: {
+            normal: {
+                borderWidth: '2',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: '2',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    radar: {
+        itemStyle: {
+            normal: {
+                borderWidth: '2',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: '2',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    bar: {
+        itemStyle: {
+            normal: {
+                barBorderWidth: 0,
+                barBorderColor: '#ccc',
+            },
+            emphasis: {
+                barBorderWidth: 0,
+                barBorderColor: '#ccc',
+            },
+        },
+    },
+    pie: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    scatter: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    boxplot: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    parallel: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    sankey: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    funnel: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    gauge: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    candlestick: {
+        itemStyle: {
+            normal: {
+                color: '#0098c9',
+                color0: 'transparent',
+                borderColor: '#0098c9',
+                borderColor0: '#c54b17',
+                borderWidth: '2',
+            },
+        },
+    },
+    graph: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: 1,
+                color: '#aaaaaa',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+        color: [
+            '#005e7d',
+            '#c54b17',
+            '#009392',
+            '#f5bb3c',
+            '#0098c9',
+            '#f58b5e',
+            '#59cecd',
+            '#fee2a6',
+        ],
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+        },
+    },
+    map: {
+        itemStyle: {
+            normal: {
+                areaColor: '#f3f3f3',
+                borderColor: '#999999',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                areaColor: 'rgba(254,198,77,1)',
+                borderColor: '#ecaf2b',
+                borderWidth: 1,
+            },
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#00475e',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: 'rgb(0,71,94)',
+                },
+            },
+        },
+    },
+    geo: {
+        itemStyle: {
+            normal: {
+                areaColor: '#f3f3f3',
+                borderColor: '#999999',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                areaColor: 'rgba(254,198,77,1)',
+                borderColor: '#ecaf2b',
+                borderWidth: 1,
+            },
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#00475e',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: 'rgb(0,71,94)',
+                },
+            },
+        },
+    },
+    categoryAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    valueAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    logAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    timeAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    toolbox: {
+        iconStyle: {
+            normal: {
+                borderColor: '#999999',
+            },
+            emphasis: {
+                borderColor: '#666666',
+            },
+        },
+    },
+    legend: {
+        textStyle: {
+            color: '#999999',
+        },
+    },
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+            crossStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+        },
+    },
+    timeline: {
+        lineStyle: {
+            color: '#666666',
+            width: 1,
+        },
+        itemStyle: {
+            normal: {
+                color: '#666666',
+                borderWidth: 1,
+            },
+            emphasis: {
+                color: '#f7ac4f',
+            },
+        },
+        controlStyle: {
+            normal: {
+                color: '#666666',
+                borderColor: '#666666',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                color: '#666666',
+                borderColor: '#666666',
+                borderWidth: 0.5,
+            },
+        },
+        checkpointStyle: {
+            color: '#f7ac4f',
+            borderColor: 'rgba(254,198,77,0.6)',
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#666666',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: '#666666',
+                },
+            },
+        },
+    },
+    visualMap: {
+        color: [
+            '#005e7d',
+            '#c54b17',
+            '#009392',
+            '#f5bb3c',
+            '#0098c9',
+            '#f58b5e',
+            '#59cecd',
+            '#fee2a6',
+        ],
+    },
+    dataZoom: {
+        backgroundColor: 'rgba(255,255,255,0)',
+        dataBackgroundColor: 'rgba(255,178,72,0.5)',
+        fillerColor: 'rgba(255,178,72,0.15)',
+        handleColor: '#ffb248',
+        handleSize: '100%',
+        textStyle: {
+            color: '#aaaaaa',
+        },
+    },
+    markPoint: {
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+        },
+    },
+};
+
+/* tslint:disable */
+var teradataDefault = {
+    color: ['#4d5b62', '#008ab6', '#f3753f', '#2cc0bf', '#fed887'],
+    backgroundColor: 'transparent',
+    textStyle: {},
+    title: {
+        textStyle: {
+            color: '#aaaaaa',
+        },
+        subtextStyle: {
+            color: '#aaaaaa',
+        },
+    },
+    tree: {
+        itemStyle: {
+            color: '#fed887',
+            borderColor: '#4d5b62',
+        },
+    },
+    line: {
+        itemStyle: {
+            normal: {
+                borderWidth: '2',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: '2',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    radar: {
+        itemStyle: {
+            normal: {
+                borderWidth: '2',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: '2',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    bar: {
+        itemStyle: {
+            normal: {
+                barBorderWidth: 0,
+                barBorderColor: '#ccc',
+            },
+            emphasis: {
+                barBorderWidth: 0,
+                barBorderColor: '#ccc',
+            },
+        },
+    },
+    pie: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    scatter: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    boxplot: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    parallel: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    sankey: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    funnel: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    gauge: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    candlestick: {
+        itemStyle: {
+            normal: {
+                color: '#977ed2',
+                color0: 'transparent',
+                borderColor: '#977ed2',
+                borderColor0: '#009d9c',
+                borderWidth: '2',
+            },
+        },
+    },
+    graph: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: 1,
+                color: '#aaaaaa',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+        color: ['#4d5b62', '#008ab6', '#f3753f', '#2cc0bf', '#fed887'],
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+        },
+    },
+    map: {
+        itemStyle: {
+            normal: {
+                areaColor: '#f3f3f3',
+                borderColor: '#999999',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                areaColor: 'rgba(254,198,77,1)',
+                borderColor: '#ecaf2b',
+                borderWidth: 1,
+            },
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#00475e',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: 'rgb(0,71,94)',
+                },
+            },
+        },
+    },
+    geo: {
+        itemStyle: {
+            normal: {
+                areaColor: '#f3f3f3',
+                borderColor: '#999999',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                areaColor: 'rgba(254,198,77,1)',
+                borderColor: '#ecaf2b',
+                borderWidth: 1,
+            },
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#00475e',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: 'rgb(0,71,94)',
+                },
+            },
+        },
+    },
+    categoryAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    valueAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    logAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    timeAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    toolbox: {
+        iconStyle: {
+            normal: {
+                borderColor: '#999999',
+            },
+            emphasis: {
+                borderColor: '#666666',
+            },
+        },
+    },
+    legend: {
+        textStyle: {
+            color: '#999999',
+        },
+    },
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+            crossStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+        },
+    },
+    timeline: {
+        lineStyle: {
+            color: '#666666',
+            width: 1,
+        },
+        itemStyle: {
+            normal: {
+                color: '#666666',
+                borderWidth: 1,
+            },
+            emphasis: {
+                color: '#f7ac4f',
+            },
+        },
+        controlStyle: {
+            normal: {
+                color: '#666666',
+                borderColor: '#666666',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                color: '#666666',
+                borderColor: '#666666',
+                borderWidth: 0.5,
+            },
+        },
+        checkpointStyle: {
+            color: '#f7ac4f',
+            borderColor: 'rgba(254,198,77,0.6)',
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#666666',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: '#666666',
+                },
+            },
+        },
+    },
+    visualMap: {
+        color: ['#4d5b62', '#008ab6', '#f3753f', '#2cc0bf', '#fed887'],
+    },
+    dataZoom: {
+        backgroundColor: 'rgba(255,255,255,0)',
+        dataBackgroundColor: 'rgba(255,178,72,0.5)',
+        fillerColor: 'rgba(255,178,72,0.15)',
+        handleColor: '#ffb248',
+        handleSize: '100%',
+        textStyle: {
+            color: '#aaaaaa',
+        },
+    },
+    markPoint: {
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+        },
+    },
+};
+
+/* tslint:disable */
+var urbanSunrise = {
+    color: ['#667279', '#979ea4', '#caced0', '#ffbb9c', '#fd986d', '#F3753F'],
+    backgroundColor: 'transparent',
+    textStyle: {},
+    title: {
+        textStyle: {
+            color: '#aaaaaa',
+        },
+        subtextStyle: {
+            color: '#aaaaaa',
+        },
+    },
+    tree: {
+        itemStyle: {
+            color: '#ffbb9c',
+            borderColor: '#667279',
+        },
+    },
+    line: {
+        itemStyle: {
+            normal: {
+                borderWidth: '2',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: '2',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    radar: {
+        itemStyle: {
+            normal: {
+                borderWidth: '2',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: '2',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    bar: {
+        itemStyle: {
+            normal: {
+                barBorderWidth: 0,
+                barBorderColor: '#ccc',
+            },
+            emphasis: {
+                barBorderWidth: 0,
+                barBorderColor: '#ccc',
+            },
+        },
+    },
+    pie: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    scatter: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    boxplot: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    parallel: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    sankey: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    funnel: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    gauge: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    candlestick: {
+        itemStyle: {
+            normal: {
+                color: '#f3753f',
+                color0: 'transparent',
+                borderColor: '#f3753f',
+                borderColor0: '#667279',
+                borderWidth: '2',
+            },
+        },
+    },
+    graph: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: 1,
+                color: '#aaaaaa',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+        color: ['#667279', '#979ea4', '#caced0', '#ffbb9c', '#fd986d', '#F3753F'],
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+        },
+    },
+    map: {
+        itemStyle: {
+            normal: {
+                areaColor: '#f3f3f3',
+                borderColor: '#999999',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                areaColor: 'rgba(254,198,77,1)',
+                borderColor: '#ecaf2b',
+                borderWidth: 1,
+            },
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#667279',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: 'rgb(102,114,121)',
+                },
+            },
+        },
+    },
+    geo: {
+        itemStyle: {
+            normal: {
+                areaColor: '#f3f3f3',
+                borderColor: '#999999',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                areaColor: 'rgba(254,198,77,1)',
+                borderColor: '#ecaf2b',
+                borderWidth: 1,
+            },
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#667279',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: 'rgb(102,114,121)',
+                },
+            },
+        },
+    },
+    categoryAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    valueAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    logAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    timeAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    toolbox: {
+        iconStyle: {
+            normal: {
+                borderColor: '#999999',
+            },
+            emphasis: {
+                borderColor: '#666666',
+            },
+        },
+    },
+    legend: {
+        textStyle: {
+            color: '#999999',
+        },
+    },
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+            crossStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+        },
+    },
+    timeline: {
+        lineStyle: {
+            color: '#666666',
+            width: 1,
+        },
+        itemStyle: {
+            normal: {
+                color: '#666666',
+                borderWidth: 1,
+            },
+            emphasis: {
+                color: '#fec64d',
+            },
+        },
+        controlStyle: {
+            normal: {
+                color: '#666666',
+                borderColor: '#666666',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                color: '#666666',
+                borderColor: '#666666',
+                borderWidth: 0.5,
+            },
+        },
+        checkpointStyle: {
+            color: '#f3753f',
+            borderColor: 'rgba(255,178,72,0.41)',
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#666666',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: '#666666',
+                },
+            },
+        },
+    },
+    visualMap: {
+        color: ['#667279', '#979ea4', '#caced0', '#ffbb9c', '#fd986d', '#F3753F'],
+    },
+    dataZoom: {
+        backgroundColor: 'rgba(255,255,255,0)',
+        dataBackgroundColor: 'rgba(255,178,72,0.5)',
+        fillerColor: 'rgba(255,178,72,0.15)',
+        handleColor: '#fec64d',
+        handleSize: '100%',
+        textStyle: {
+            color: '#aaaaaa',
+        },
+    },
+    markPoint: {
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+        },
+    },
+};
+
+/* tslint:disable */
+var volcanicEruption = {
+    color: ['#565a83', '#7c5c91', '#a85a90', '#cf5880', '#ea5f64', '#f3753f'],
+    backgroundColor: 'transparent',
+    textStyle: {},
+    title: {
+        textStyle: {
+            color: '#aaaaaa',
+        },
+        subtextStyle: {
+            color: '#aaaaaa',
+        },
+    },
+    tree: {
+        itemStyle: {
+            color: '#a85a90',
+            borderColor: '#565a83',
+        },
+    },
+    line: {
+        itemStyle: {
+            normal: {
+                borderWidth: '2',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: '2',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    radar: {
+        itemStyle: {
+            normal: {
+                borderWidth: '2',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: '2',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    bar: {
+        itemStyle: {
+            normal: {
+                barBorderWidth: 0,
+                barBorderColor: '#ccc',
+            },
+            emphasis: {
+                barBorderWidth: 0,
+                barBorderColor: '#ccc',
+            },
+        },
+    },
+    pie: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    scatter: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    boxplot: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    parallel: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    sankey: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    funnel: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    gauge: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+            emphasis: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+    },
+    candlestick: {
+        itemStyle: {
+            normal: {
+                color: '#f3753f',
+                color0: 'transparent',
+                borderColor: '#f3753f',
+                borderColor0: '#667279',
+                borderWidth: '2',
+            },
+        },
+    },
+    graph: {
+        itemStyle: {
+            normal: {
+                borderWidth: 0,
+                borderColor: '#ccc',
+            },
+        },
+        lineStyle: {
+            normal: {
+                width: 1,
+                color: '#aaaaaa',
+            },
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+        color: ['#565a83', '#7c5c91', '#a85a90', '#cf5880', '#ea5f64', '#f3753f'],
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+        },
+    },
+    map: {
+        itemStyle: {
+            normal: {
+                areaColor: '#f3f3f3',
+                borderColor: '#999999',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                areaColor: 'rgba(254,198,77,1)',
+                borderColor: '#ecaf2b',
+                borderWidth: 1,
+            },
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#667279',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: 'rgb(102,114,121)',
+                },
+            },
+        },
+    },
+    geo: {
+        itemStyle: {
+            normal: {
+                areaColor: '#f3f3f3',
+                borderColor: '#999999',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                areaColor: 'rgba(254,198,77,1)',
+                borderColor: '#ecaf2b',
+                borderWidth: 1,
+            },
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#667279',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: 'rgb(102,114,121)',
+                },
+            },
+        },
+    },
+    categoryAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    valueAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    logAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    timeAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#999999',
+            },
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    toolbox: {
+        iconStyle: {
+            normal: {
+                borderColor: '#999999',
+            },
+            emphasis: {
+                borderColor: '#666666',
+            },
+        },
+    },
+    legend: {
+        textStyle: {
+            color: '#000000',
+        },
+    },
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+            crossStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+        },
+    },
+    timeline: {
+        lineStyle: {
+            color: '#666666',
+            width: 1,
+        },
+        itemStyle: {
+            normal: {
+                color: '#666666',
+                borderWidth: 1,
+            },
+            emphasis: {
+                color: '#fec64d',
+            },
+        },
+        controlStyle: {
+            normal: {
+                color: '#666666',
+                borderColor: '#666666',
+                borderWidth: 0.5,
+            },
+            emphasis: {
+                color: '#666666',
+                borderColor: '#666666',
+                borderWidth: 0.5,
+            },
+        },
+        checkpointStyle: {
+            color: '#f3753f',
+            borderColor: 'rgba(255,178,72,0.41)',
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#666666',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: '#666666',
+                },
+            },
+        },
+    },
+    visualMap: {
+        color: ['#565a83', '#7c5c91', '#a85a90', '#cf5880', '#ea5f64', '#f3753f'],
+    },
+    dataZoom: {
+        backgroundColor: 'rgba(255,255,255,0)',
+        dataBackgroundColor: 'rgba(255,178,72,0.5)',
+        fillerColor: 'rgba(255,178,72,0.15)',
+        handleColor: '#fec64d',
+        handleSize: '100%',
+        textStyle: {
+            color: '#aaaaaa',
+        },
+    },
+    markPoint: {
+        label: {
+            normal: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+            emphasis: {
+                textStyle: {
+                    color: '#ffffff',
+                },
+            },
+        },
+    },
+};
+
+/**
+ * Function used to register a theme into echarts
+ * Theme name and theme object needed as stated in
+ * https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.registerTheme
+ */
+function registerTheme(themeName, theme) {
+    echarts.registerTheme(themeName, theme);
+}
+/**
+ * Function to register all default themes
+ * @internal
+ */
+function registerDefaultThemes() {
+    registerTheme('aqua-splash', aquaSplash);
+    registerTheme('california-coast', californiaCoast);
+    registerTheme('hawaiian-sunrise', hawaiianSunrise);
+    registerTheme('passion-flower', passionFlower);
+    registerTheme('razzleberry-pie', razzleberryPie);
+    registerTheme('teradata-classic', teradataClassic);
+    registerTheme('teradata-default', teradataDefault);
+    registerTheme('urban-sunrise', urbanSunrise);
+    registerTheme('volcanic-eruption', volcanicEruption);
+}
+/**
+ * Returns all the theme names bundled with covalent echarts.
+ */
+function getThemes() {
+    return [
+        'aqua-splash',
+        'california-coast',
+        'hawaiian-sunrise',
+        'passion-flower',
+        'razzleberry-pie',
+        'teradata-classic',
+        'teradata-default',
+        'urban-sunrise',
+        'volcanic-eruption',
+    ];
+}
+
+class TdChartComponent {
+    /**
+     * returns the echarts instance
+     */
+    get instance() {
+        return this._instance;
+    }
+    constructor(_changeDetectorRef, _elementRef, _optionsService) {
+        this._changeDetectorRef = _changeDetectorRef;
+        this._elementRef = _elementRef;
+        this._optionsService = _optionsService;
+        this._destroy = new Subject();
+        this._widthSubject = new Subject();
+        this._heightSubject = new Subject();
+        this._state = {};
+        this._options = {};
+        /**
+         * config?: any;
+         * Sets the JS config object if you choose to not use the property inputs.
+         * Note: [config] input properties will override input values
+         * https://ecomfe.github.io/echarts-doc/public/en/option.html
+         */
+        this.config = {};
+        /**
+         * renderer: 'svg' | 'canvas'
+         * sets the rendering mode for the chart.
+         * defaults to 'canvas'
+         * https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Render%20by%20Canvas%20or%20SVG
+         */
+        this.renderer = 'canvas';
+        this.chartClick = new EventEmitter();
+        this.chartDblclick = new EventEmitter();
+        this.chartContextmenu = new EventEmitter();
+        this.magicTypeChanged = new EventEmitter();
+        this.dataViewChanged = new EventEmitter();
+        this.datazoom = new EventEmitter();
+        this.restore = new EventEmitter();
+    }
+    ngAfterViewInit() {
+        this._initializeChart();
+    }
+    ngOnChanges(changes) {
+        if (this._instance) {
+            // destroy and reinitialize chart only when `renderer`, `themeName` and `group` changes
+            if (changes['renderer'] || changes['themeName'] || changes['group']) {
+                this._disposeChart();
+                this._initializeChart();
+            }
+            else {
+                this.render();
+            }
+        }
+    }
+    ngOnDestroy() {
+        this._disposeChart();
+        this._destroy.unsubscribe();
+    }
+    render() {
+        if (this._instance) {
+            this._instance.setOption(assignDefined(this._state, {
+                grid: {
+                    show: true,
+                    left: '20',
+                    right: '20',
+                    bottom: (this.config.toolbox &&
+                        typeof this.config.toolbox.bottom === 'number') ||
+                        (this._options.toolbox &&
+                            typeof this._options.toolbox.bottom === 'number')
+                        ? '40'
+                        : '10',
+                    top: (this.config.toolbox &&
+                        typeof this.config.toolbox.top === 'number') ||
+                        (this._options.toolbox &&
+                            typeof this._options.toolbox.top === 'number')
+                        ? '40'
+                        : '10',
+                    containLabel: true,
+                },
+            }, this._options, this.config ? this.config : {}), true);
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    _initializeChart() {
+        var _a;
+        this._instance = echarts.init(this._elementRef.nativeElement, (_a = this.themeName) !== null && _a !== void 0 ? _a : '', {
+            renderer: this.renderer,
+        });
+        fromEvent(this._instance, 'click')
+            .pipe(takeUntil(this._destroy))
+            .subscribe((params) => {
+            this.chartClick.next(params);
+        });
+        fromEvent(this._instance, 'dblclick')
+            .pipe(takeUntil(this._destroy))
+            .subscribe((params) => {
+            this.chartDblclick.next(params);
+        });
+        fromEvent(this._instance, 'contextmenu')
+            .pipe(takeUntil(this._destroy))
+            .subscribe((params) => {
+            this.chartContextmenu.next(params);
+        });
+        fromEvent(this._instance, 'magictypechanged')
+            .pipe(takeUntil(this._destroy))
+            .subscribe((params) => {
+            this.magicTypeChanged.next(params);
+        });
+        fromEvent(this._instance, 'dataviewchanged')
+            .pipe(takeUntil(this._destroy))
+            .subscribe((params) => {
+            this.dataViewChanged.next(params);
+        });
+        fromEvent(this._instance, 'datazoom')
+            .pipe(takeUntil(this._destroy))
+            .subscribe((params) => {
+            this.datazoom.next(params);
+        });
+        fromEvent(this._instance, 'restore')
+            .pipe(takeUntil(this._destroy))
+            .subscribe((params) => {
+            this.restore.next(params);
+        });
+        if (this.group) {
+            this._instance.group = this.group;
+            echarts.connect(this.group);
+            this._changeDetectorRef.markForCheck();
+        }
+        merge(fromEvent(window, 'resize').pipe(debounceTime(100)), this._widthSubject.asObservable().pipe(distinctUntilChanged()), this._heightSubject.asObservable().pipe(distinctUntilChanged()))
+            .pipe(takeUntil(this._destroy), debounceTime(100))
+            .subscribe(() => {
+            if (this._instance) {
+                this._instance.resize();
+                this._changeDetectorRef.markForCheck();
+            }
+        });
+        this._optionsService
+            .listen()
+            .pipe(tap((options) => {
+            assignDefined(this._options, options);
+        }), debounceTime(0), takeUntil(this._destroy))
+            .subscribe(() => {
+            this.render();
+        });
+        timer(500, 250)
+            .pipe(takeUntil(this._destroy))
+            .subscribe(() => {
+            if (this._elementRef && this._elementRef.nativeElement) {
+                this._widthSubject.next((this._elementRef.nativeElement).getBoundingClientRect().width);
+                this._heightSubject.next((this._elementRef.nativeElement).getBoundingClientRect().height);
+            }
+        });
+    }
+    _disposeChart() {
+        if (this._instance) {
+            this._instance.clear();
+            echarts.dispose(this._instance);
+        }
+        this._destroy.next(true);
+    }
+}
+TdChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdChartComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: TdChartOptionsService }], target: i0.ɵɵFactoryTarget.Component });
+TdChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TdChartComponent, selector: "td-chart", inputs: { config: "config", group: "group", themeName: "themeName", renderer: "renderer" }, outputs: { chartClick: "chartClick", chartDblclick: "chartDblclick", chartContextmenu: "chartContextmenu", magicTypeChanged: "magicTypeChanged", dataViewChanged: "dataViewChanged", datazoom: "datazoom", restore: "restore" }, providers: [CHART_PROVIDER], usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-chart', template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CHART_PROVIDER], styles: [":host{display:block;width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: TdChartOptionsService }]; }, propDecorators: { config: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], themeName: [{
+                type: Input
+            }], renderer: [{
+                type: Input
+            }], chartClick: [{
+                type: Output
+            }], chartDblclick: [{
+                type: Output
+            }], chartContextmenu: [{
+                type: Output
+            }], magicTypeChanged: [{
+                type: Output
+            }], dataViewChanged: [{
+                type: Output
+            }], datazoom: [{
+                type: Output
+            }], restore: [{
+                type: Output
+            }] } });
+
+class TdChartAxisDirective {
+    constructor(_axisOption, _optionsService) {
+        this._axisOption = _axisOption;
+        this._optionsService = _optionsService;
+        this._state = {};
+        this.config = {};
+        this.show = true;
+    }
+    ngOnInit() {
+        this._setOptions();
+    }
+    ngOnChanges() {
+        this._setOptions();
+    }
+    ngOnDestroy() {
+        this._removeOption();
+    }
+    _setOptions() {
+        const config = assignDefined(this._state, {
+            id: this.id,
+            show: this.show,
+            gridIndex: this.gridIndex,
+            position: this.position,
+            offset: this.offset,
+            type: this.type,
+            name: this.name,
+            nameLocation: this.nameLocation,
+            nameTextStyle: this.nameTextStyle,
+            nameGap: this.nameGap,
+            nameRotate: this.nameRotate,
+            inverse: this.inverse,
+            boundaryGap: this.boundaryGap,
+            min: this.min,
+            max: this.max,
+            scale: this.scale,
+            minInterval: this.minInterval,
+            interval: this.interval,
+            logBase: this.logBase,
+            silent: this.silent,
+            triggerEvent: this.triggerEvent,
+            axisLine: this.axisLine,
+            axisTick: this.axisTick,
+            axisLabel: this.axisLabel,
+            splitLine: this.splitLine,
+            splitArea: this.splitArea,
+            data: this.data,
+            axisPointer: this.axisPointer,
+            zlevel: this.zlevel,
+            z: this.z,
+        }, this.config ? this.config : {});
+        this._optionsService.setArrayOption(this._axisOption, config);
+    }
+    _removeOption() {
+        this._optionsService.clearOption(this._axisOption);
+    }
+}
+TdChartAxisDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdChartAxisDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+TdChartAxisDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TdChartAxisDirective, inputs: { config: "config", id: "id", show: "show", gridIndex: "gridIndex", offset: "offset", type: "type", name: "name", nameLocation: "nameLocation", nameTextStyle: "nameTextStyle", nameGap: "nameGap", nameRotate: "nameRotate", inverse: "inverse", boundaryGap: "boundaryGap", min: "min", max: "max", scale: "scale", minInterval: "minInterval", interval: "interval", logBase: "logBase", silent: "silent", triggerEvent: "triggerEvent", axisLine: "axisLine", axisTick: "axisTick", axisLabel: "axisLabel", splitLine: "splitLine", splitArea: "splitArea", data: "data", axisPointer: "axisPointer", zlevel: "zlevel", z: "z" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdChartAxisDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: undefined }, { type: TdChartOptionsService }]; }, propDecorators: { config: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], show: [{
+                type: Input
+            }], gridIndex: [{
+                type: Input
+            }], offset: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], nameLocation: [{
+                type: Input
+            }], nameTextStyle: [{
+                type: Input
+            }], nameGap: [{
+                type: Input
+            }], nameRotate: [{
+                type: Input
+            }], inverse: [{
+                type: Input
+            }], boundaryGap: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], scale: [{
+                type: Input
+            }], minInterval: [{
+                type: Input
+            }], interval: [{
+                type: Input
+            }], logBase: [{
+                type: Input
+            }], silent: [{
+                type: Input
+            }], triggerEvent: [{
+                type: Input
+            }], axisLine: [{
+                type: Input
+            }], axisTick: [{
+                type: Input
+            }], axisLabel: [{
+                type: Input
+            }], splitLine: [{
+                type: Input
+            }], splitArea: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], axisPointer: [{
+                type: Input
+            }], zlevel: [{
+                type: Input
+            }], z: [{
+                type: Input
+            }] } });
+
+class TdChartXAxisComponent extends TdChartAxisDirective {
+    constructor(_optionsService) {
+        super('xAxis', _optionsService);
+    }
+}
+TdChartXAxisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdChartXAxisComponent, deps: [{ token: TdChartOptionsService }], target: i0.ɵɵFactoryTarget.Component });
+TdChartXAxisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TdChartXAxisComponent, selector: "td-chart-x-axis", inputs: { config: "config", id: "id", show: "show", gridIndex: "gridIndex", offset: "offset", type: "type", name: "name", nameLocation: "nameLocation", nameTextStyle: "nameTextStyle", nameGap: "nameGap", nameRotate: "nameRotate", inverse: "inverse", boundaryGap: "boundaryGap", min: "min", max: "max", scale: "scale", minInterval: "minInterval", interval: "interval", logBase: "logBase", silent: "silent", triggerEvent: "triggerEvent", axisLine: "axisLine", axisTick: "axisTick", axisLabel: "axisLabel", splitLine: "splitLine", splitArea: "splitArea", data: "data", axisPointer: "axisPointer", zlevel: "zlevel", z: "z", position: "position" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdChartXAxisComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'td-chart-x-axis',
+                    template: '',
+                    inputs: [
+                        'config',
+                        'id',
+                        'show',
+                        'gridIndex',
+                        'offset',
+                        'type',
+                        'name',
+                        'nameLocation',
+                        'nameTextStyle',
+                        'nameGap',
+                        'nameRotate',
+                        'inverse',
+                        'boundaryGap',
+                        'min',
+                        'max',
+                        'scale',
+                        'minInterval',
+                        'interval',
+                        'logBase',
+                        'silent',
+                        'triggerEvent',
+                        'axisLine',
+                        'axisTick',
+                        'axisLabel',
+                        'splitLine',
+                        'splitArea',
+                        'data',
+                        'axisPointer',
+                        'zlevel',
+                        'z',
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: TdChartOptionsService }]; }, propDecorators: { position: [{
+                type: Input
+            }] } });
+
+class TdChartYAxisComponent extends TdChartAxisDirective {
+    constructor(_optionsService) {
+        super('yAxis', _optionsService);
+    }
+}
+TdChartYAxisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdChartYAxisComponent, deps: [{ token: TdChartOptionsService }], target: i0.ɵɵFactoryTarget.Component });
+TdChartYAxisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TdChartYAxisComponent, selector: "td-chart-y-axis", inputs: { config: "config", id: "id", show: "show", gridIndex: "gridIndex", offset: "offset", type: "type", name: "name", nameLocation: "nameLocation", nameTextStyle: "nameTextStyle", nameGap: "nameGap", nameRotate: "nameRotate", inverse: "inverse", boundaryGap: "boundaryGap", min: "min", max: "max", scale: "scale", minInterval: "minInterval", interval: "interval", logBase: "logBase", silent: "silent", triggerEvent: "triggerEvent", axisLine: "axisLine", axisTick: "axisTick", axisLabel: "axisLabel", splitLine: "splitLine", splitArea: "splitArea", data: "data", axisPointer: "axisPointer", zlevel: "zlevel", z: "z", position: "position" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdChartYAxisComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'td-chart-y-axis',
+                    template: '',
+                    inputs: [
+                        'config',
+                        'id',
+                        'show',
+                        'gridIndex',
+                        'offset',
+                        'type',
+                        'name',
+                        'nameLocation',
+                        'nameTextStyle',
+                        'nameGap',
+                        'nameRotate',
+                        'inverse',
+                        'boundaryGap',
+                        'min',
+                        'max',
+                        'scale',
+                        'minInterval',
+                        'interval',
+                        'logBase',
+                        'silent',
+                        'triggerEvent',
+                        'axisLine',
+                        'axisTick',
+                        'axisLabel',
+                        'splitLine',
+                        'splitArea',
+                        'data',
+                        'axisPointer',
+                        'zlevel',
+                        'z',
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: TdChartOptionsService }]; }, propDecorators: { position: [{
+                type: Input
+            }] } });
+
+class TdDatasetComponent {
+    constructor(_optionsService) {
+        this._optionsService = _optionsService;
+        this._state = {};
+        this.config = {};
+    }
+    ngOnChanges() {
+        this._setOptions();
+    }
+    ngOnDestroy() {
+        this._removeOption();
+    }
+    _setOptions() {
+        const config = assignDefined(this._state, {
+            id: this.id,
+            source: this.source,
+            dimensions: this.dimensions,
+            sourceHeader: this.sourceHeader,
+        }, this.config ? this.config : {});
+        // set dataset configuration in parent chart and render new configurations
+        this._optionsService.setOption('dataset', config);
+    }
+    _removeOption() {
+        this._optionsService.clearOption('dataset');
+    }
+}
+TdDatasetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdDatasetComponent, deps: [{ token: TdChartOptionsService }], target: i0.ɵɵFactoryTarget.Component });
+TdDatasetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TdDatasetComponent, selector: "td-chart-dataset", inputs: { id: "id", config: "config", source: "source", dimensions: "dimensions", sourceHeader: "sourceHeader" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdDatasetComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    selector: 'td-chart-dataset',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: TdChartOptionsService }]; }, propDecorators: { id: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], source: [{
+                type: Input
+            }], dimensions: [{
+                type: Input
+            }], sourceHeader: [{
+                type: Input
+            }] } });
+
+const BASE_MODULE_COMPONENTS = [
+    TdChartComponent,
+    TdChartXAxisComponent,
+    TdChartYAxisComponent,
+    TdDatasetComponent,
+];
+registerDefaultThemes();
+class CovalentBaseEchartsModule {
+}
+CovalentBaseEchartsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CovalentBaseEchartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CovalentBaseEchartsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CovalentBaseEchartsModule, declarations: [TdChartComponent,
+        TdChartXAxisComponent,
+        TdChartYAxisComponent,
+        TdDatasetComponent], imports: [CommonModule], exports: [TdChartComponent,
+        TdChartXAxisComponent,
+        TdChartYAxisComponent,
+        TdDatasetComponent] });
+CovalentBaseEchartsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CovalentBaseEchartsModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CovalentBaseEchartsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [BASE_MODULE_COMPONENTS],
+                    exports: [BASE_MODULE_COMPONENTS],
+                }]
+        }] });
+
+class TdSeriesDirective {
+    get type() {
+        return this._type;
+    }
+    constructor(type, optionsService) {
+        this.optionsService = optionsService;
+        this._state = {};
+        this._options = {};
+        this.config = {};
+        this._type = type;
+    }
+    ngOnInit() {
+        this._setOptions();
+    }
+    ngOnChanges() {
+        this._setOptions();
+    }
+    ngOnDestroy() {
+        this._removeOption();
+    }
+    setStateOption(option, value) {
+        this._options[option] = value;
+        this._setOptions();
+    }
+    removeStateOption(option) {
+        /* tslint:disable-next-line */
+        this._options[option] = null;
+        this._setOptions();
+    }
+    _setOptions() {
+        const config = assignDefined(this._state, {
+            id: this.id,
+            type: this.type,
+            name: this.name,
+            color: this.color,
+            data: this.data,
+            animation: this.animation,
+            animationThreshold: this.animationThreshold,
+            animationDuration: this.animationDuration,
+            animationEasing: this.animationEasing,
+            animationDelay: this.animationDelay,
+            animationDurationUpdate: this.animationDurationUpdate,
+            animationEasingUpdate: this.animationEasingUpdate,
+            animationDelayUpdate: this.animationDelayUpdate,
+            tooltip: this.tooltip,
+        }, this.getConfig(), this._options, this.config ? this.config : {});
+        this.optionsService.setArrayOption('series', config);
+    }
+    _removeOption() {
+        this.optionsService.removeArrayOption('series', this._state);
+    }
+}
+TdSeriesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdSeriesDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+TdSeriesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TdSeriesDirective, inputs: { config: "config", id: "id", name: "name", color: "color", data: "data", animation: "animation", animationThreshold: "animationThreshold", animationDuration: "animationDuration", animationEasing: "animationEasing", animationDelay: "animationDelay", animationDurationUpdate: "animationDurationUpdate", animationEasingUpdate: "animationEasingUpdate", animationDelayUpdate: "animationDelayUpdate", tooltip: "tooltip" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdSeriesDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: undefined }, { type: TdChartOptionsService }]; }, propDecorators: { config: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], animation: [{
+                type: Input
+            }], animationThreshold: [{
+                type: Input
+            }], animationDuration: [{
+                type: Input
+            }], animationEasing: [{
+                type: Input
+            }], animationDelay: [{
+                type: Input
+            }], animationDurationUpdate: [{
+                type: Input
+            }], animationEasingUpdate: [{
+                type: Input
+            }], animationDelayUpdate: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BASE_MODULE_COMPONENTS, CovalentBaseEchartsModule, TdChartAxisDirective, TdChartComponent, TdChartOptionsService, TdChartXAxisComponent, TdChartYAxisComponent, TdDatasetComponent, TdSeriesDirective, assignDefined, getThemes, registerDefaultThemes, registerTheme };
+//# sourceMappingURL=covalent-echarts-base.mjs.map