<template>
  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from 'echarts';
import mixins from '@/mixins';
import 'china';
export default {
    mixins: [mixins],
    data () {
        return {
        };
    },
    methods: {
        updateChart () {
            var data = [
                {name:'北京',value:199},
                {name:'天津',value:42},
                {name:'河北',value:102},
                {name:'山西',value:81},
                {name:'内蒙古',value:47},
                {name:'辽宁',value:67},
                {name:'吉林',value:82},
                {name:'黑龙江',value:123},
                {name:'上海',value:24},
                {name:'江苏',value:92},
                {name:'浙江',value:114},
                {name:'安徽',value:109},
                {name:'福建',value:116},
                {name:'江西',value:91},
                {name:'山东',value:119},
                {name:'河南',value:137},
                {name:'湖北',value:116},
                {name:'湖南',value:114},
                {name:'重庆',value:91},
                {name:'四川',value:125},
                {name:'贵州',value:62},
                {name:'云南',value:83},
                {name:'西藏',value:9},
                {name:'陕西',value:80},
                {name:'甘肃',value:56},
                {name:'青海',value:10},
                {name:'宁夏',value:18},
                {name:'新疆',value:180},
                {name:'广东',value:123},
                {name:'广西',value:59},
                {name:'海南',value:14},
            ];

            var geoCoordMap = {};
            var toolTipData = [
                {name:'北京',value:[{name:'科技人才总数',value:95},{name:'理科',value:82}]},
                {name:'天津',value:[{name:'文科',value:22},{name:'理科',value:20}]},
                {name:'河北',value:[{name:'文科',value:60},{name:'理科',value:42}]},
                {name:'山西',value:[{name:'文科',value:40},{name:'理科',value:41}]},
                {name:'内蒙古',value:[{name:'文科',value:23},{name:'理科',value:24}]},
                {name:'辽宁',value:[{name:'文科',value:39},{name:'理科',value:28}]},
                {name:'吉林',value:[{name:'文科',value:41},{name:'理科',value:41}]},
                {name:'黑龙江',value:[{name:'文科',value:35},{name:'理科',value:31}]},
                {name:'上海',value:[{name:'文科',value:12},{name:'理科',value:12}]},
                {name:'江苏',value:[{name:'文科',value:47},{name:'理科',value:45}]},
                {name:'浙江',value:[{name:'文科',value:57},{name:'理科',value:57}]},
                {name:'安徽',value:[{name:'文科',value:57},{name:'理科',value:52}]},
                {name:'福建',value:[{name:'文科',value:59},{name:'理科',value:57}]},
                {name:'江西',value:[{name:'文科',value:49},{name:'理科',value:42}]},
                {name:'山东',value:[{name:'文科',value:67},{name:'理科',value:52}]},
                {name:'河南',value:[{name:'文科',value:69},{name:'理科',value:68}]},
                {name:'湖北',value:[{name:'文科',value:60},{name:'理科',value:56}]},
                {name:'湖南',value:[{name:'文科',value:62},{name:'理科',value:52}]},
                {name:'重庆',value:[{name:'文科',value:47},{name:'理科',value:44}]},
                {name:'四川',value:[{name:'文科',value:65},{name:'理科',value:60}]},
                {name:'贵州',value:[{name:'文科',value:32},{name:'理科',value:30}]},
                {name:'云南',value:[{name:'文科',value:42},{name:'理科',value:41}]},
                {name:'西藏',value:[{name:'文科',value:5},{name:'理科',value:4}]},
                {name:'陕西',value:[{name:'文科',value:38},{name:'理科',value:42}]},
                {name:'甘肃',value:[{name:'文科',value:28},{name:'理科',value:28}]},
                {name:'青海',value:[{name:'文科',value:5},{name:'理科',value:5}]},
                {name:'宁夏',value:[{name:'文科',value:10},{name:'理科',value:8}]},
                {name:'新疆',value:[{name:'文科',value:36},{name:'理科',value:31}]},
                {name:'广东',value:[{name:'文科',value:63},{name:'理科',value:60}]},
                {name:'广西',value:[{name:'文科',value:29},{name:'理科',value:30}]},
                {name:'海南',value:[{name:'文科',value:8},{name:'理科',value:6}]},
            ];

            /*获取地图数据*/
            var mapFeatures = echarts.getMap('china').geoJson.features;
            mapFeatures.forEach(function(v) {
                // 地区名称
                var name = v.properties.name;
                // 地区经纬度
                geoCoordMap[name] = v.properties.cp;

            });

            console.log(data);
            console.log(toolTipData);
            var max = 480,
                min = 9; // todo
            var maxSize4Pin = 100,
                minSize4Pin = 20;

            var convertData = function(data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value),
                        });
                    }
                }
                return res;
            };
            const options = {
                tooltip: {
                    padding: 0,
                    enterable: true,
                    transitionDuration: 1,
                    textStyle: {
                        color: '#000',
                        decoration: 'none',
                    },
                    // position: function (point, params, dom, rect, size) {
                    //   return [point[0], point[1]];
                    // },
                    formatter: function(params) {
                        // console.log(params)
                        var tipHtml = '';
                        tipHtml = '<div style="width:280px;height:180px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'
                            +'<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">'+'<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">'+'</i>'
                            +'<span style="margin-left:10px;color:#fff;font-size:16px;">'+params.name+'</span>'+'</div>'
                            +'<div style="padding:20px">'
                            +'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">'+'</i>'
                            +'单位总数：'+'<span style="color:#11ee7d;margin:0 6px;">'+toolTipData.length+'</span>'+'个'+'</p>'
                            +'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">'+'</i>'
                            +'总人数：'+'<span style="color:#f48225;margin:0 6px;">'+toolTipData.length+'</span>'+'个'+'</p>'
                            +'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">'+'</i>'
                            +'总人数：'+'<span style="color:#f4e925;margin:0 6px;">'+toolTipData.length+'</span>'+'个'+'</p>'
                            +'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">'+'</i>'
                            +'总人数：'+'<span style="color:#25f4f2;margin:0 6px;">'+toolTipData.length+'</span>'+'个'+'</p>'
                            +'</div>'+'</div>';
                        setTimeout(function() {
                            tooltipCharts(params.name);
                        }, 10);
                        return tipHtml;
                    }

                },

                visualMap: {
                    show: true,
                    min: 0,
                    max: 200,
                    left: '10%',
                    top: 'bottom',
                    calculable: true,
                    seriesIndex: [1],
                    inRange: {
                        color: ['#04387b', '#467bc0'] // 蓝绿
                    }
                },
                geo: {
                    show: true,
                    map: mapName,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false,
                        }
                    },
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: '#023677',
                            borderColor: '#1180c7',
                        },
                        emphasis: {
                            areaColor: '#4499d0',
                        }
                    }
                },
                series: [{
                    name: '散点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    symbolSize: function(val) {
                        return val[2] / 10;
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#fff'
                        }
                    }
                },
                {
                    type: 'map',
                    map: mapName,
                    geoIndex: 0,
                    aspectScale: 0.75, //长宽比
                    showLegendSymbol: false, // 存在legend时显示
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#031525',
                            borderColor: '#3B5077',
                        },
                        emphasis: {
                            areaColor: '#2B91B7'
                        }
                    },
                    animation: false,
                    data: data
                },
                {
                    name: '点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    zlevel: 6,
                },
                {
                    name: 'Top 5',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: convertData(data.sort(function(a, b) {
                        return b.value - a.value;
                    }).slice(0, 10)),
                    symbolSize: function(val) {
                        return val[2] / 10;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'left',
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'yellow',
                            shadowBlur: 10,
                            shadowColor: 'yellow'
                        }
                    },
                    zlevel: 1
                },

                ]
            };
            this.chart.setOption(options, true);
        }
    }
};
</script>
