echarts中国地图散点涟漪效果

echarts中国地图例子：http://gallery.echartsjs.com/editor.html?c=effectScatter-map

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'}}}
};

echarts中国地图散点涟漪效果相关推荐

echarts中国地图散点实现自定义动画
前言:文章不知为何突然审核不通过,现在重新编辑再次分享给大伙,天下之大,能帮一点是一点 github链接:svg-chinamap-scatter-echart/echartcomponent.vue ...
【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图前置条件,必看首先你需要安装echarts并引入然后你需要下载china.json文件并注册引入,不然不生效当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
Echarts绘制Tree树图的涟漪效果effectScatter
1. 问题描述 Echarts绘制图表是支持涟漪效果的,但是搜了材料,有地图.折线图.散点图等,不支持树图. 本文方法实现了一种可以任意Echarts图的涟漪效果 2. 效果展示将树图的一级节点全部 ...
Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
Echarts中国地图三级钻取
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站:https://www.captainai.net/dongkelun 前言最近其实一直在用Echa ...
Echarts中国地图背景颜色渐变
摘要:关于Echarts地图的问题,在第一篇就说过引入等相关问题(如还有疑惑请先看之前的文章传送门).地图的背景颜色如何实现渐变呢?主要利用的是Echarts中的geo和visualMap结合实现.v ...
Echarts中国地图修改
前言在使用Echarts图表时需要修改中国地图中的样式以及内容,在网上查找了一些资料并且整理了一下. Echarts中国地图地图样式修改标题修改数值功能删除,但保留数据计算按钮功能去除地图 ...
echarts 中国地图世界地图
最近项目中用到了echarts 中国地图世界地图,特在这记录一下. world.js 下载链接(world_new.js带有中国地区名称,另一个只是用来显示中国地图) 链接:https://pan. ...
VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...

echarts中国地图散点涟漪效果

echarts中国地图散点涟漪效果相关推荐

最新文章

热门文章