2019-08-07 地图自动轮播

var mapName = 'china'

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}]},

];

/*获取地图数据*/

myChart.showLoading();

var mapFeatures = echarts.getMap(mapName).geoJson.features;

myChart.hideLoading();

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;

};

option = {

    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:200px;height:200px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'

            +'<div style="width:80%;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:10px">'

            +'<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

        },

    ]

};

var index = 0; //播放所在下标

myChart.dispatchAction({

type: 'showTip',

seriesIndex: 0,

dataIndex: index

});

var timerout = setInterval(function() {

    myChart.dispatchAction({

type: 'showTip',

seriesIndex: 0,

dataIndex: index

});

index++;

if(index > data.length) {

index = 0;

}

},3000)