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)

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335

推荐阅读更多精彩内容