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

<script>
/**
 * @file chart-graph
 * @author zhangping15
 * @date 2018-06-15
 */
import * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/graph';
import 'echarts/lib/component/tooltip';

// 颜色配置表
const COLOR = ['#60ACFC', '#48BECE', '#61D7D3', '#32D3EB', '#5BC49F', '#A1A9EB', '#63D5B2', '#828CE4', '#AEE498', '#39B3EA'];

export default {
    name: 'chart-graph',
    data() {
        return {
            datasource: null,
            chart: {
                tooltip: {
                    formatter: '{b}'
                },
                color: COLOR,
                animationDuration: 1000,
                animationEasingUpdate: 'quinticInOut',
                series: [{
                    name: '场所',
                    type: 'graph',
                    layout: 'force',
                    force: {
                        repulsion: 80,
                        //gravity: 0.1,
                        edgeLength: [40, 70],
                        layoutAnimation: true
                    },
                    symbol: 'circle',
                    focusNodeAdjacency: true,
                    roam: false,
                    itemStyle: {
                        normal: {
                            color: COLOR,
                            borderWidth: 0
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            formatter: '{b}',
                            fontSize: 10,
                            fontStyle: '400',
                            color: '#666'
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    lineStyle: {
                        normal: {
                            width: 1,
                            color: '#cccccc',
                            curveness: 0,
                            type: 'solid'
                        }
                    },
                    categories: [],
                    data: []
                }]
            },
            // 子分类 label和color默认配置
            categoriesItemDefault: {
                label: {
                    normal: {
                        fontSize: 14,
                        color: '#ffffff'
                    }
                }
            }
        };
    },
    watch: {
        datasource: {
            deep: true,
            handler() {
                this.initChart();
            }
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            this.$http.get('./chart/getgraph', {
                params: {}
            }).then(res => {
                this.datasource = res.data;
            });
        },
        initChart() {
            if (!this.datasource) {
                return;
            }

            this.chart.series[0].categories = this.datasource.categories.map((item, index) => {
                if (index < COLOR.length) {

                    return {
                        ...item,
                        ...this.categoriesItemDefault,
                        itemStyle: {
                            normal: {
                                color: COLOR[index + 1]
                            }
                        }
                    };
                }
                // 颜色不足情况下，可自己扩充COLOR数组，不扩充，就使用系统默认配色
                return {
                    ...item,
                    ...this.categoriesItemDefault
                };
            });

            this.chart.series[0].links = this.datasource.links;
            this.chart.series[0].data = this.datasource.series;
            echarts.init(this.$refs.chart).setOption(this.chart);
        }
    }
}
;
</script>
<style lang="less" src="./index.less">

</style>

