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

<script>
/**
 * @file chart-scatter-diagram
 * @author liuxiaoning03 <liuxiaoning03@baidu.com>
 * @date 2018-07-09
 */
import * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/scatter';
import 'echarts/lib/component/tooltip';
export default {
    name: 'chart-scatter-diagram',
    data() {
        return {
            datasource: null,
            chart: {
                color: ['#F93707', '#07A9F9'],
                legend: {
                    width: '15%',
                    right: '80px',
                    tooltip: {
                        show: true
                    },
                    data: ['广告主', '内容类型']
                },
                dataZoom: [{
                    type: 'inside',
                    start: 0,
                    end: 100
                }, {
                    start: 0,
                    end: 100,
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '80%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }],
                xAxis: {
                    splitLine: {
                        show: true,
                        lineStyle: {type: 'solid'}
                    },
                    axisLine: {
                        lineStyle: {color: '#ccc'}
                    }
                },
                yAxis: {
                    splitLine: {
                        lineStyle: {type: 'solid'}
                    },
                    axisLine: {
                        lineStyle: {color: '#ccc'}
                    },
                },
                grid: {containLabel: false, left: '80px', right: '80px'},
                tooltip: {
                    formatter(param) {
                        return param.data[2];
                    }
                },
                series: [{
                    name: '广告主',
                    symbolSize: 10,
                    data: this.targetArr,
                    type: 'scatter',
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#555'
                            },
                            position: 'bottom',
                            formatter: function(param) {
                                if (param.data[2].length > 6) {
                                    return param.data[2].substring(0,6) + '...';
                                } else {
                                    return param.data[2];
                                }
                            },
                        },
                    }
                },
                {
                    name: '内容类型',
                    symbolSize: 10,
                    data: this.compArr,
                    type: 'scatter',
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#555'
                            },
                            position: 'bottom',
                            formatter: function(param) {
                                if (param.data[2].length > 6) {
                                    return param.data[2].substring(0,6) + '...';
                                } else {
                                    return param.data[2];
                                }
                            },
                        },
                    }
                }]
            }

        };
    },
    mounted() {
        this.getScatterData();
    },
    watch: {
        datasource: {
            deep: true,
            handler() {
                this.init();
            }
        }
    },
    methods: {
        init() {
            if (!this.datasource) {
                return;
            }
            this.chart.series[0].data = this.datasource.series;
            this.chart.series[1].data = this.datasource.series1;
            echarts.init(this.$refs.chart).setOption(this.chart);

        },
        // 获取散点图数据
        getScatterData() {
            this.$http.get('./chart/scatterdata', {
                params: {}
            }).then(res => {
                this.datasource = res.data;
            })
        }

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

</style>

