<template>
<div ref="chart" class="xp-chart-area"></div>
</template>

<script>
/**
 * @file chart-area
 * @author zhangping15
 * @date 2018-05-16
 */

import * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';

export default {
    name: 'chart-area',
    data() {
        return {
            datasource: null,
            chart: {
                grid: {
                    left: '3%',
                    right: '3%',
                    bottom: 60,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    textStyle: {
                        fontSize: 12
                    }
                },
                color: ['#60ACFC', '#4EBECD', '#63D5B2', '#A1E497', '#DCEF7A'],
                legend: {
                    data: [],
                    itemHeight: 8,
                    right: 50,
                    top: ''
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    nameGap: 10,
                    boundaryGap: false,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgb(219, 219, 219)',
                            width: 2
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#333',
                        fontSize: 12,
                        margin: 10
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: ['#e7e7e7']
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#333',
                        fontSize: 12,
                        formatter: '{value}'
                    }
                },
                series: []
            },
            seriesItemDefault: {
                type: 'line',
                stack: '总量',
                areaStyle: {normal: {}}
            }
        };
    },
    watch: {
        datasource: {
            deep: true,
            handler() {
                this.initChart();
            }
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            this.$http.get('./chart/getareadata', {
                params: {}
            }).then(res => {
                this.datasource = res.data;
            });
        },
        initChart() {
            if (!this.datasource) {
                return;
            }

            this.chart.legend.data = this.datasource.series.map(item => item.name);
            this.chart.xAxis.data = this.datasource.xAxis;
            this.chart.series = this.datasource.series.map(item => {
                return {
                    ...item,
                    ...this.seriesItemDefault
                };
            });
            echarts.init(this.$refs.chart).setOption(this.chart);
        }
    }
};
</script>

<style lang="less" src="./index.less">

</style>
