@covalent/echarts 4.0.0-alpha.0 → 4.0.0-beta.4

package/fesm2015/covalent-echarts-base.mjs

@@ -0,0 +1,4864 @@
+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();
+    }
+}
+/** @nocollapse */ /** @nocollapse */ TdChartOptionsService.ɵfac = function TdChartOptionsService_Factory(t) { return new (t || TdChartOptionsService)(); };
+/** @nocollapse */ /** @nocollapse */ TdChartOptionsService.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: TdChartOptionsService, factory: TdChartOptionsService.ɵfac });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdChartOptionsService, [{
+            type: Injectable
+        }], null, null);
+})();
+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 {
+    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();
+    }
+    /**
+     * returns the echarts instance
+     */
+    get instance() {
+        return this._instance;
+    }
+    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() {
+        this._instance = echarts.init(this._elementRef.nativeElement, this.themeName, {
+            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);
+    }
+}
+/** @nocollapse */ /** @nocollapse */ TdChartComponent.ɵfac = function TdChartComponent_Factory(t) { return new (t || TdChartComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(TdChartOptionsService)); };
+/** @nocollapse */ /** @nocollapse */ TdChartComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdChartComponent, selectors: [["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" }, features: [i0.ɵɵProvidersFeature([CHART_PROVIDER]), i0.ɵɵNgOnChangesFeature], decls: 0, vars: 0, template: function TdChartComponent_Template(rf, ctx) { }, styles: ["[_nghost-%COMP%]{display:block;width:100%}"], changeDetection: 0 });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdChartComponent, [{
+            type: Component,
+            args: [{ selector: 'td-chart', template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CHART_PROVIDER], styles: [":host{display:block;width:100%}\n"] }]
+        }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: TdChartOptionsService }]; }, { 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);
+    }
+}
+/** @nocollapse */ /** @nocollapse */ TdChartAxisDirective.ɵfac = function TdChartAxisDirective_Factory(t) { i0.ɵɵinvalidFactory(); };
+/** @nocollapse */ /** @nocollapse */ TdChartAxisDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ 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" }, features: [i0.ɵɵNgOnChangesFeature] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdChartAxisDirective, [{
+            type: Directive
+        }], function () { return [{ type: undefined }, { type: TdChartOptionsService }]; }, { 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);
+    }
+}
+/** @nocollapse */ /** @nocollapse */ TdChartXAxisComponent.ɵfac = function TdChartXAxisComponent_Factory(t) { return new (t || TdChartXAxisComponent)(i0.ɵɵdirectiveInject(TdChartOptionsService)); };
+/** @nocollapse */ /** @nocollapse */ TdChartXAxisComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdChartXAxisComponent, selectors: [["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" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function TdChartXAxisComponent_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 0 });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdChartXAxisComponent, [{
+            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,
+                }]
+        }], function () { return [{ type: TdChartOptionsService }]; }, { position: [{
+                type: Input
+            }] });
+})();
+
+class TdChartYAxisComponent extends TdChartAxisDirective {
+    constructor(_optionsService) {
+        super('yAxis', _optionsService);
+    }
+}
+/** @nocollapse */ /** @nocollapse */ TdChartYAxisComponent.ɵfac = function TdChartYAxisComponent_Factory(t) { return new (t || TdChartYAxisComponent)(i0.ɵɵdirectiveInject(TdChartOptionsService)); };
+/** @nocollapse */ /** @nocollapse */ TdChartYAxisComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdChartYAxisComponent, selectors: [["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" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function TdChartYAxisComponent_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 0 });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdChartYAxisComponent, [{
+            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,
+                }]
+        }], function () { return [{ type: TdChartOptionsService }]; }, { 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');
+    }
+}
+/** @nocollapse */ /** @nocollapse */ TdDatasetComponent.ɵfac = function TdDatasetComponent_Factory(t) { return new (t || TdDatasetComponent)(i0.ɵɵdirectiveInject(TdChartOptionsService)); };
+/** @nocollapse */ /** @nocollapse */ TdDatasetComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdDatasetComponent, selectors: [["td-chart-dataset"]], inputs: { id: "id", config: "config", source: "source", dimensions: "dimensions", sourceHeader: "sourceHeader" }, features: [i0.ɵɵNgOnChangesFeature], decls: 0, vars: 0, template: function TdDatasetComponent_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 0 });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDatasetComponent, [{
+            type: Component,
+            args: [{
+                    template: '',
+                    selector: 'td-chart-dataset',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], function () { return [{ type: TdChartOptionsService }]; }, { 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 {
+}
+/** @nocollapse */ /** @nocollapse */ CovalentBaseEchartsModule.ɵfac = function CovalentBaseEchartsModule_Factory(t) { return new (t || CovalentBaseEchartsModule)(); };
+/** @nocollapse */ /** @nocollapse */ CovalentBaseEchartsModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: CovalentBaseEchartsModule });
+/** @nocollapse */ /** @nocollapse */ CovalentBaseEchartsModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ imports: [[CommonModule]] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentBaseEchartsModule, [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [BASE_MODULE_COMPONENTS],
+                    exports: [BASE_MODULE_COMPONENTS],
+                }]
+        }], null, null);
+})();
+(function () {
+    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentBaseEchartsModule, { declarations: [TdChartComponent,
+            TdChartXAxisComponent,
+            TdChartYAxisComponent,
+            TdDatasetComponent], imports: [CommonModule], exports: [TdChartComponent,
+            TdChartXAxisComponent,
+            TdChartYAxisComponent,
+            TdDatasetComponent] });
+})();
+
+class TdSeriesDirective {
+    constructor(type, optionsService) {
+        this.optionsService = optionsService;
+        this._state = {};
+        this._options = {};
+        this.config = {};
+        this._type = type;
+    }
+    get type() {
+        return this._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);
+    }
+}
+/** @nocollapse */ /** @nocollapse */ TdSeriesDirective.ɵfac = function TdSeriesDirective_Factory(t) { i0.ɵɵinvalidFactory(); };
+/** @nocollapse */ /** @nocollapse */ TdSeriesDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ 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" }, features: [i0.ɵɵNgOnChangesFeature] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdSeriesDirective, [{
+            type: Directive
+        }], function () { return [{ type: undefined }, { type: TdChartOptionsService }]; }, { 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