<template>
    <div :class="className" class="echart" :style="echartWidth">
    </div>
</template>
<script>
    let ECharts = require('echarts-lib');

    import _ from 'lodash';
    require('echarts-tooltip');
    require('echarts-legend');
    require('echarts-line');
    require('echarts-pie');
    require('echarts/theme/macarons');

    export default {
        name: 'EChart',
        props: ['className', 'echartParams', 'bigFlag', 'echartWidth'],
        data() {
            return {
            };
        },
        mounted() {
            setTimeout(() => {
                this.initChart();
            }, 1000);
        },
        watch: {
            echartParams: {
                handler() {
                    this.initChart();
                },
                deep: true
            }
        },
        methods: {
            seriesData(opt) {
                let option = {
                    name: opt.name,
                    type: opt.type ? opt.type : 'line',
                    data: opt.data,
                    smooth: false,
                    itemStyle: {
                        normal: {
                            label: {
                                show: opt.isShow ? opt.isShow : false,
                                position: 'top'
                            },
                            labelLine: {
                                show: true
                            }
                        }
                    }
                };

                if (opt.areaStyle) {
                    option.itemStyle.normal = _.assign(option.itemStyle.normal, opt.areaStyle);
                }

                if (opt.yAxisIndex) {
                    option.yAxisIndex = opt.yAxisIndex;
                }

                return option;
            },
            initChart() {
                let yAxis = [], series = [], opt = {};
                let data = [];

                if (!this.myEchart && document.querySelector(`.${this.className}`)) {
                    this.myEchart = ECharts.init(document.querySelector(`.${this.className}`), 'macarons');
                }

                this.$nextTick(() => {
                    if (this.myEchart) {
                        this.myEchart.resize();
                    }
                });

                if (!this.echartParams.series) {
                    return;
                }

                _.each(this.echartParams.series, (item) => {
                    data = data.concat(item.data);
                    series.push(this.seriesData(item));
                });

                _.each(this.echartParams.yAxis, (item) => {
                    yAxis.push({
                        type: 'value',
                        name: item,
                        min: 0,

                        // max: _.max(data),
                        axisLine: {
                            lineStyle: {
                                color: '#2d2d2d',
                                width: 1
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            formatter: '{value}' + (this.echartParams.v || ''),
                            lineStyle: {
                                color: '#2d2d2d',
                                width: 1
                            }
                        }
                    });
                });

                opt = {
                    title: {
                        text: this.echartParams.title,
                        x: 'center',
                        textStyle: {
                            color: this.echartParams.color
                        },
                        y: 'top'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        borderColor: '#2d2d2d',
                        feature: {
                        }
                    },
                    legend: {
                        data: this.echartParams.legend,
                        textStyle: {
                            color: '#2d2d2d'
                        },
                        x: 'center',
                        y: '35px'
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: this.echartParams.xAxis,
                            axisPointer: {
                                type: 'shadow',
                                lineStyle: {
                                    color: '#2d2d2d',
                                    width: 1
                                }
                            }
                        }
                    ],
                    yAxis: yAxis,
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '70',
                        containLabel: true
                    },
                    series: series,
                    textStyle: {
                        color: '#2d2d2d'
                    }
                };

                this.myEchart.setOption(opt, true);

                window.addEventListener('resize', () => {
                    this.myEchart.resize();
                });
            }
        }
    };
</script>
<style lang="scss">
    .echart {
        width: 100%;
        height: 350px !important;
        margin: 0 auto;
    }
</style>