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

<script>
/**
 * @file chart-map
 * @author zhangping15
 * @date 2018-06-15
 */
require('echarts/map/js/china');
import * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/map';
import 'echarts/lib/component/tooltip';

export default {
    name: 'chart-map',
    data() {
        return {
            datasource: null,
            chart: {
                grid: {
                    left: '3%',
                    right: '3%',
                    bottom: 60,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'item'
                },
                visualMap: {
                    type: 'continuous',
                    min: 0,
                    max: 100,
                    text: ['多', '少'],
                    realtime: false,
                    itemWidth: 16,
                    itemHeight: 120,
                    left: 0,
                    calculable: true,
                    inRange: {
                        color: ['#60ACFC', 'rgba(159,205,253,0.70)'],
                        symbolSize: [100, 100]
                    },
                    outOfRange: {
                        color: ['#EEEEEE'],
                        symbolSize: [100, 100]
                    }
                },
                series: [{
                    name: '人数',
                    type: 'map',
                    mapType: 'china',
                    roam: 'move',
                    mapValueCalculation: 'sum',
                    zoom: 1,
                    selectedMode: false,
                    showLegendSymbol: false,
                    label: {
                        normal: {
                            textStyle: {
                                color: '#666'
                            }
                        },
                        emphasis: {
                            textStyle: {
                                color: '#234EA5'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#EEEEEE',
                            borderColor: '#FFFFFF'
                        },
                        emphasis: {
                            areaColor: '#E5F39B'
                        }
                    },
                    data: []
                }]
            }
        };
    },
    watch: {
        datasource: {
            deep: true,
            handler() {
                this.initChart();
            }
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            this.$http.get('./chart/getmap', {
                params: {}
            }).then(res => {
                this.datasource = res.data;
            });
        },
        initChart() {
            if (!this.datasource) {
                return;
            }

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

</style>

