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

<script>
/**
 * @file chart-line-area
 * @author yangzongjun
 * @date 2018-06-15
 */
import * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/dataZoom';

export default {
    name: 'chart-line-area',
    data() {
        return {
            chart: {
                color: ['#60ACFC', '#32D3EB', '#5BC49F', '#FEB64D', '#FF7B7B', '#9287E7', '#00C1E0', '#9CDC82'],
                grid: {
                    borderWidth: 0,
                    left: 0,
                    right: 0,
                    top: 50,
                    bottom: 50,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    show: true,
                    borderRadius: 0,
                    padding: 10,
                    backgroundColor: 'rgba(51, 51, 51, 0.8)',
                    textStyle: {
                        fontSize: 12,
                        color: '#fff'
                    },
                    axisPointer: {
                        type: 'line',
                        lineStyle: {
                            color: 'rgb(181, 181, 181)',
                            width: 1
                        },
                        crossStyle: {
                            color: 'rgb(181, 181, 181)',
                            width: 1
                        }
                    }
                },
                legend: {
                    show: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgb(219, 219, 219)',
                            width: 2
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        margin: 10,
                        showMaxLabel: false,
                        textStyle: {
                            color: 'rgb(153, 153, 153)',
                            align: 'left'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'rgb(153, 153, 153)'
                        },
                        inside: true,
                        showMinLabel: false,
                        margin: 0
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: [
                                'rgb(231, 231, 231)'
                            ],
                            type: 'dashed'
                        }
                    }
                },
                dataZoom: [{
                    type: 'inside',
                    zoomOnMouseWheel: false,
                    start: 0,
                    end: 100
                }, {
                    type: 'slider',
                    start: 0,
                    end: 100,
                    backgroundColor: '#FCFCFC',
                    dataBackground: {
                        areaStyle: {
                            color: '#eeeeee'
                        }
                    },
                    borderColor: '#E7E7E7',
                    fillerColor: 'rgba(188,188,188,0.3)',
                    handleIcon: 'M9,0 C13.9705627,-9.13077564e-16 18,4.02943725 18,9 L18,17 C18,21.9705627 13.9705627,26 9,26 L9,26 C4.02943725,26 9.49050257e-15,21.9705627 8.8817842e-15,17 L0,9 L0,9 C-6.08718376e-16,4.02943725 4.02943725,9.13077564e-16 9,0 Z M6,10 L6,11 L12,11 L12,10 L6,10 Z M6,13 L6,14 L12,14 L12,13 L6,13 Z M6,16 L6,17 L12,17 L12,16 L6,16 Z',
                    handleSize: '90%',
                    handleStyle: {
                        borderType: 'solid',
                        borderWidth: 1,
                        color: '#ffffff'
                    },
                    left: 10,
                    right: 10,
                    dataBackgroundColor: 'rgba(47,69,84,0.3)',
                    handleColor: '#a7b7cc',
                    textStyle: {
                        color: '#333'
                    }
                }],
                series: []
            },
            seriesItemDefault: {
                type: 'line',
                areaStyle: {
                    normal: {
                        color: 'rgba(57,152,252,0.10)'
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgb(57, 152, 252)'
                    }
                },
                emphasis: {
                    borderWidth: 1
                },
                symbolSize: 3,
                symbol: 'emptyCircle',
                showSymbol: false,
                smooth: true
            },
            seriesColorConfig: [{
                areaStyleColor: 'rgba(57, 152, 252, 0.1)',
                itemStyleColor: 'rgb(57, 152, 252)'
            }, {
                areaStyleColor: 'rgba(91, 196, 159, 0.1)',
                itemStyleColor: 'rgb(91, 196, 159)'
            }],
            echartInstance: null
        };
    },
    created() {
        this.getData();
    },
    methods: {
        setChart() {
            if (!this.rightechartInstance) {
                this.echartInstance = echarts.init(this.$refs.chart);
            }
            this.echartInstance.setOption(this.chart);
        },
        getData() {
            this.$http.get('./chart/getbardata', {
                params: {}
            }).then(res => {
                let data = res.data;
                this.chart.legend.data = data.series.map(item => item.name);
                this.chart.xAxis.data = data.xAxis;
                this.chart.series = data.series.map((item, index) => {
                    // 可以自己扩充 seriesColorConfig 中的颜色，默认两组颜色，> seriesColorConfig.length 条线时颜色随机取
                    let colorIndex = index > this.seriesColorConfig.length - 1
                        ? Math.floor(Math.random() * this.seriesColorConfig.length)
                        : index;
                    let itemStyle = {
                        itemStyle: {
                            normal: {
                                color: this.seriesColorConfig[colorIndex].itemStyleColor
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: this.seriesColorConfig[colorIndex].areaStyleColor
                            }
                        }
                    };
                    return {
                        ...item,
                        ...this.seriesItemDefault,
                        ...itemStyle
                    };
                });

                this.setChart();
            }).catch(res => {
                console.log(res);
            });
        }
    }
};
</script>
<style lang="less" src="./index.less" scoped>

</style>

