<template>
<div class='xp-chart-scatter-bubble-diagram' ref='chart'>
</div>
</template>

<script>
/**
 * @file chart-scatter-bubble-diagram
 * @author liuxiaoning03 <liuxiaoning03@baidu.com>
 * @date 2018-07-11
 */

import * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/scatter';
import 'echarts/lib/component/tooltip';
export default {
    name: 'chart-scatter-bubble-diagram',
    data() {
        return {
            chartData: [],
            chart: {
                legend: {
                    right: '10%',
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 25,
                    textStyle: {
                        color: '#333',
                        padding: [0, 0, 0, 5]
                    },
                    data: []
                },
                tooltip: {
                    show: true
                },
                grid: {
                    containLabel: false,
                    left: '92px',
                    right: '10%'
                },
                xAxis: {
                    name: '展现',
                    splitLine: {
                        show: false,
                        lineStyle: {
                            type: 'dashed'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    }
                },
                yAxis: {
                    name: '点击',
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    },
                    axisLabel: {

                    }
                },
                series: [
                    {
                        type: 'scatter',
                        name: '',
                        data: [],
                        label: {
                            normal: {
                                formatter: '{a}',
                                position: 'right',
                                show: true
                            }
                        }
                    },
                    {
                        type: 'scatter',
                        name: '',
                        data: [],
                        label: {
                            normal: {
                                formatter: '{a}',
                                position: 'right',
                                show: true
                            }
                        }
                    },
                    {
                        type: 'scatter',
                        name: '',
                        data: [],
                        label: {
                            normal: {
                                formatter: '{a}',
                                position: 'right',
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        }
                    }
                ]
            }



        };
    },
    mounted() {
        this.getData();
    },
    watch: {
        chartData: {
            deep: true,
            handler() {
                this.init();
            }
        }
    },
    methods: {
        init() {
            let scatterChart = echarts.init(this.$refs.chart);
            scatterChart.setOption(this.chart);
        },
        getData() {
            this.$http.get('./chart/bubbledata', {
                params: {}
            }).then(res => {
                this.chartData = res.data.series;
                this.chartData.map((item, index) => {
                    this.chart.legend.data.push(item.name);
                    this.chart.series[index].data.push(item.data);
                    this.chart.series[index].name = item.name

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

</style>

