echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点

您所在的位置：网站首页 › echarts设置背景图片 › echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点

echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点

2023-06-14 01:37| 来源: 网络整理| 查看: 265

echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点一、设置地图外边框二、地图背景渐变三、地图阴影,增加立体感四、地图上打点

一、设置地图外边框

给地图添加外边框，同时地图中的区域添加细一点的边框。效果图如下：在这里插入图片描述这里涉及两种边框，分别在 geo 和 series 种设置。主要代码如下：

option = { backgroundColor: '#000',//画布背景颜色 geo: { show: true, map: 'china', label: { show: false }, roam: false, itemStyle: { normal: { areaColor: '#000', borderWidth: 4, //设置外层边框 borderColor:'#f8911b', }, emphasis: { show: false, // areaColor: '#01215c' } } }, series: [ { type: 'map', map: 'china', label: { show: false }, roam: false, itemStyle: { normal: { areaColor: '#000', borderColor: '#a18a3a', borderWidth: 1 }, emphasis: { show: false, areaColor: null } }, } ] } 二、地图背景渐变

需要给地图整体添加渐变色，而不是给让地图中某一块区域进行渐变，效果图如下：在这里插入图片描述根据 echart 官网 areaColor 配置项，我们可以看出官方提供了 API 来填充地图区域的颜色。不仅支持纯色之外，还支持渐变色和纹理填充。主要代码实现如下：

itemStyle: { normal: { areaColor: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [{ offset: 0, color: '#24a0fa' }, { offset: 1, color: '#15072a' }], global: false } }, borderColor: '#a18a3a', borderWidth: 1, }, emphasis: { show: false, areaColor: null } }, 三、地图阴影,增加立体感

效果图如下: 在这里插入图片描述主要代码如下:

geo: { itemStyle: { normal: { shadowColor: 'rgba(1, 39, 44, 1)', shadowOffsetX: 0, shadowOffsetY: 8 } } }, 四、地图上打点

效果图如下：在这里插入图片描述

主要代码如下：

option = { ... series: [ { type: 'scatter', coordinateSystem: 'geo', data: convertData(data), symbolSize: 20, symbol: 'image://https://pic.ulecdn.com/item/user_0102/desc20190115/1fb19e0cf39aafef_-1x-1.png', symbolRotate: 35, label: { normal: { formatter: '{b}', position: 'right', show: false }, emphasis: { show: true } }, itemStyle: { normal: { color: '#F06C00' } } }, ... ] }

【本文地址】

echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点

echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点

今日新闻

推荐新闻