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

<script>
/**
 * @file chart-line-basic
 * @author yangzongjun
 * @date 2018-06-14
 */

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-line-basic',
    data() {
        return {
            chart: {
                color: ['#60ACFC', '#32D3EB', '#5BC49F', '#FEB64D', '#FF7B7B', '#9287E7', '#00C1E0', '#9CDC82'],
                grid: {
                    borderWidth: 0,
                    left: 0,
                    right: 0,
                    top: 50,
                    bottom: 10,
                    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'
                        }
                    }
                },
                series: []
            },
            seriesItemDefault: {
                type: 'line',
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        color: 'rgb(57, 152, 252)'
                    },
                    emphasis: {
                        borderWidth: 2
                    }
                },
                lineStyle: {
                    normal: {
                        width: 2
                    }
                },
                symbolSize: 3,
                symbol: 'emptyCircle',
                showSymbol: false,
                smooth: true
            },
            seriesItemColor: ['rgb(57, 152, 252)', '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) => {
                    // 可以自己扩充 seriesItemColor 中的颜色，默认两种颜色，> seriesItemColor.length 条线时颜色随机取
                    let colorIndex = index > this.seriesItemColor.length - 1
                        ? Math.floor(Math.random() * this.seriesItemColor.length)
                        : index;
                    let itemStyle = {
                        itemStyle: {
                            normal: {
                                color: this.seriesItemColor[colorIndex]
                            }
                        }
                    };
                    return {
                        ...item,
                        ...this.seriesItemDefault,
                        ...itemStyle
                    };
                });

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

</style>

