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

<script>
/**
 * @file chart-bar-compare
 * @author liuxiaoning03 <liuxiaoning03@baidu.com>
 * @date 2018-07-10
 */

import * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
export default {
    name: 'chart-bar-compare',
    data() {
        return {
            compareData: {}
        };
    },
    mounted() {
        this.getCompareData();
    },
    watch: {
        compareData: {
            deep: true,
            handler() {
                this.init();
            }
        }
    },
    methods: {
        init() {
            echarts.init(this.$refs.chart, 'echartsTheme');
            this.setOption(this.compareData);
        },
        // 设置option
        setOption(data) {
            let option = {
                backgroundColor: '#fff',
                title: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 16,
                    },
                    subtext: '',
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    }
                },
                grid: [
                    {
                        show: false,
                        left: '4%',
                        top: 60,
                        bottom: 20,
                        containLabel: true,
                        width: '44%',
                    },
                    {
                        show: false,
                        left: '50.5%',
                        top: 80,
                        bottom: 20,
                        width: '0%',
                    },
                    {
                        show: false,
                        right: '4%',
                        top: 60,
                        bottom: 20,
                        containLabel: true,
                        width: '44%',
                    }
                ],
                xAxis: [
                    {
                        type: 'value',
                        inverse: true,
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        position: 'top',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#B2B2B2',
                                fontSize: 12,
                            },
                            formatter(res) {
                                return (res * 100).toFixed(0) + '%';
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#ccc',
                                width: 1,
                                type: 'solid',
                            },
                        },
                    },
                    {
                        gridIndex: 1,
                        show: false,
                    },
                    {
                        gridIndex: 2,
                        type: 'value',
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        position: 'top',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#B2B2B2',
                                fontSize: 12,
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#ccc',
                                width: 1,
                                type: 'solid',
                            },
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        inverse: true,
                        position: 'right',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                            margin: 8,
                            textStyle: {
                                color: '#9D9EA0',
                                fontSize: 12,
                            }
                        },
                        data: data.content,
                    },
                    {
                        gridIndex: 1,
                        type: 'category',
                        inverse: true,
                        position: 'left',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#9D9EA0',
                                fontSize: 12,
                            },

                        },
                        data: data.content.map(value => {
                            return {
                                value: value,
                                textStyle: {
                                    align: 'center',
                                }
                            }
                        }),
                    },
                    {
                        gridIndex: 2,
                        type: 'category',
                        inverse: true,
                        position: 'left',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                            textStyle: {
                                color: '#9D9EA0',
                                fontSize: 12,
                            },

                        },
                        data: data.content,
                    }
                ],
                series: [
                    {
                        name: '用户占比',
                        type: 'bar',
                        barGap: 20,
                        barMaxWidth: 40,
                        label: {
                            normal: {
                                show: false,
                            },
                            emphasis: {
                                show: true,
                                position: 'left',
                                offset: [0, 0],
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 14,
                                },
                            },
                        },
                        itemStyle: {
                            emphasis: {
                                color: '#4C32F8',
                            },
                        },
                        data: data.proportion
                    },
                    {
                        name: 'TGI',
                        type: 'bar',
                        barGap: 20,
                        barMaxWidth: 40,
                        xAxisIndex: 2,
                        yAxisIndex: 2,
                        label: {
                            normal: {
                                show: false,
                            },
                            emphasis: {
                                show: true,
                                position: 'right',
                                offset: [0, 0],
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 14,
                                },
                            },
                        },
                        itemStyle: {
                            emphasis: {
                                color: '#F90404',
                            },
                        },
                        markLine: {
                            silent: true,
                            label: '行业',
                            lineStyle: {
                                normal: {
                                    type: 'dashed',
                                    color: '#999'
                                }
                            },
                            data: [{
                                xAxis: 100
                            }]
                        },
                        data: data.tgi,
                    }
                ]
            }
            let scatterChart = echarts.getInstanceByDom(this.$refs.chart);
            scatterChart.setOption(option);
        },
        // 加载数据
        getCompareData(chart) {
            this.$http.get('./chart/comparedata', {
                params: {}
            }).then(res => {
               this.compareData = res.data.series;
            })
        }

    }
};
</script>
<style lang="less" src="./index.less">

</style>

