echarts有涟漪效果的世界地图

项目要求实现一个带涟漪效果的世界地图。
设计要求哪个区域有值，哪个区域就高亮，颜色不要求，全部设成同一种就行。
我参考了echats官网的样例，官网样例是这样的：

附官网地址：
https://echarts.apache.org/examples/zh/editor.html?c=effectScatter-map
其实和我想要的效果已经很接近了，再改成世界地图，有数值的国家高亮就ok了。

任务：
1.改成世界地图
2.假设只有中国有数据，则中国地区出现涟漪圆点，并且国家颜色变黑

我改造的结果如下：

option = {backgroundColor: '#404a59',tooltip : {trigger: 'item'},geo: {map: 'world',roam: true,// 是否开启鼠标缩放和平移漫游zoom: 1.2,// 将地图放大1.2倍label: {show: false},itemStyle: {areaColor: '#323c48',borderColor: '#111'},emphasis: {label: {show: false},itemStyle: {areaColor: '#2a333d'}},// 有值的区域设置成相同的areaColor，用visualMap不太好操控，所以我用了regions。// 国家记得首字母大写，否则不起效regions: [{name: 'China',itemStyle: {areaColor: '#111'}}]},series : [{name: 'Top 5',type: 'effectScatter',coordinateSystem: 'geo',// 指定使用地理坐标系data: [{name:'China',value:[104.195397,35.86166,100]}],// 用来指定value数组中的第三个数字才是value值encode: {value: 2},//设置圆圈大小symbolSize: 4,//设置涟漪大小等rippleEffect: {brushType: 'stroke',scale:5},hoverAnimation: true,itemStyle: {color: '#f4e925',shadowBlur: 10,shadowColor: '#333'},zlevel: 1}]
};

最终效果图

echarts有涟漪效果的世界地图相关推荐

Echarts绘制Tree树图的涟漪效果effectScatter
1. 问题描述 Echarts绘制图表是支持涟漪效果的,但是搜了材料,有地图.折线图.散点图等,不支持树图. 本文方法实现了一种可以任意Echarts图的涟漪效果 2. 效果展示将树图的一级节点全部 ...
html5基于Echarts制作3D炫酷世界地图地球制作，地图勾起动画，非常炫酷。
❉ html5基于echarts.js制作3D炫酷世界地图地球仪动画 `html5基于echarts.js制作3D炫酷世界地图地球仪动画,业务迁移热点显示动画,地图勾起动画,非常炫酷.ps:涉及跨域, ...
echart关系图(graph)添加波点涟漪效果
这个是直接用echarts 的官网的实例改的,可以直接放到上面去看效果. 涟漪效果需要指定坐标系.(cartesian2d --->二维直角坐标系.polar --->极坐标系.geo-- ...
Android 水波效果 | 涟漪效果实现
在Xml 里面实现给Button设置一个background <Buttonandroid:text="Ripple水波纹Background"android:layout ...
mysql+地图网格数据下载_echarts 中国各省市 echarts地图数据，含世界地图
[实例简介] echarts 中国各省市 echarts地图数据,含世界地图,含各省地市数据 [实例截图] [核心代码] echarts_map_data ├── anhui │ ├── anhu ...
echarts 地图常见效果
echarts 地图常见效果!! 引入echarts包(最全的那个,不要下简易版的)和地图包 ----------------------------------------------------- ...
html涟漪效果,涟漪效果.html
涟漪效果 .video-player a { display: inline-block; width: 80px; height: 80px; border-radius: 50%; line-he ...
android 涟漪背景,Android 水波效果 | 涟漪效果实现
在Xml 里面实现给Button设置一个background ripple_background 内容如下: ripple 的Color属性,就是设置水波效果的颜色. ripple 的子节点可以设置 ...
html涟漪动画效果,CSS 在按钮上做个涟漪效果（Ripple Animation）
作为一个 CSS 渣,这次在看到一个 Vue 组件库的按钮里有个点按之后的效果之后跃跃欲试. 效果大概长这样: 首先先观察了一番,大概得到以下特征: 以鼠标按下的位置为原点,以某个值为半径进行扩散 ...

echarts有涟漪效果的世界地图

echarts有涟漪效果的世界地图相关推荐

最新文章

热门文章