博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
echarts中国地图散点涟漪效果
阅读量:4585 次
发布时间:2019-06-09

本文共 2430 字,大约阅读时间需要 8 分钟。

echarts中国地图例子:

代码:

var data = [{        name: '郑州',        value: 100 //扩散的大小    },    {        name: '北京',        value: 100    },    {        name: '香港',        value: 100    },    {        name: '上海',        value: 100    },];var geoCoordMap = {    '郑州': [113.649638, 34.75659],    '香港': [114.186133, 22.29343],    '北京': [116.395645, 39.92998],    '上海': [121.487884, 31.24910]};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 = {    backgroundColor: '#404a59',    tooltip: {        trigger: 'item',        formatter: function(obj) {            return obj.name + ':' + obj.value[0] + ',' + obj.value[1];        },        textStyle: {            fontSize: 18        }    },    series: [{        type: 'effectScatter',        coordinateSystem: 'geo',        data: convertData(data.sort(function(a, b) {            return b.value - a.value;        }).slice(0, 6)),        symbolSize: function(val) {            return val[2] / 10;        },        showEffectOn: 'render',        zlevel: 2,        rippleEffect: {            period: 2.5, //波纹秒数            brushType: 'fill', //stroke(涟漪)和fill(扩散),两种效果            scale: 20 //波纹范围        },        hoverAnimation: true,        label: {            normal: {                formatter: '{b}',                position: 'top',                show: true            }        },        itemStyle: {            normal: {                show: true,                color: "#0579FA", //字体和点颜色                label: {                    textStyle: {                        fontWeight: 'bold', //字体                        fontSize: 18, //字体大小                        color: "#023AFD"                    }                },            }        },    }],    geo: {        map: 'china',        label: {            emphasis: {                show: false            }        },        roam: true,        layoutCenter: ['50%', '50%'],        layoutSize: "130%",        itemStyle: {            normal: {                color: '#51FFFF',                borderColor: '#0285FF'            },            emphasis: {                color: '#004881'            }        }    }};

 

转载于:https://www.cnblogs.com/raitorei/p/9933588.html

你可能感兴趣的文章
每天一道Java题[9]
查看>>
结对编程2——单元测试
查看>>
python 函数/列表的应用
查看>>
C#与MES
查看>>
LR接口测试---Java Vuser之jdbc查询(调试前)
查看>>
SQL Server 各版本安装包分享
查看>>
.net项目移植后的虚拟目录的配置问题
查看>>
JSP页面中引入另一个JSP页面
查看>>
Android笔记——活动的生命周期
查看>>
springmvc使用包装的pojo接收商品信息的查询条件
查看>>
【Linux】【Services】【Configuration】puppet
查看>>
poj 1002:487-3279(水题,提高题 / hash)
查看>>
RAC环境上搭建DG
查看>>
OS X Mountain Lion高手进阶
查看>>
初识电流环
查看>>
MySQL每天自动增加分区
查看>>
在线生成坐标值,方便布局使用
查看>>
ab测试工具的使用
查看>>
RTL基本知识:编译命令指定隐性线网类型
查看>>
java中BigDecimal在金融行业中的使用
查看>>