echarts地图整体渐变色

地图整体设置渐变色，会设置到每一块都是颜色渐变，并不是整体一个颜色渐变过去。如下图：

显然这不是我们想要的效果。

网上大部分地图渐变色案例，是使用的visualMap比例尺效果实现的，但是这个效果是依据地图块对应的 value 数值的大小自动分配颜色，对于一些想自定义整体渐变色的场景不是很方便了。

通过echarts官方的配置文档发现geo中的一个属性regions，此属性的作用是：在地图中对特定的区域配置样式。

以汕头市地图为例，颜色：深蓝----浅蓝渐变，方向：左下----右上。

此方法麻烦之处是，需要UI提供一下每个块的渐变颜色和渐变方向，然后单独设置每个块的渐变色，最后整体效果就可以达到想要的效果了。

 geo: {type: 'map',map: '汕头',selectedMode: 'single', //是否支持多个选中，single单选，multiple多选aspectScale: 0.8,  //地图长度比roam: false,zoom: 1,regions: [{name: '潮南区',itemStyle: {normal: {areaColor: { //地图色type: 'linear',x: 0,y: 1,x2: 0,y2: 0,colorStops: [{offset: 0, color: '#003ddf' // 0% 处的颜色}, {offset: 1, color: '#0069e6' // 100% 处的颜色}],global: false // 缺省为 false},},}},{name: '潮阳区',itemStyle: {normal: {areaColor: { //地图色type: 'linear',x: 0,y: 1,x2: 0,y2: 0,colorStops: [{offset: 0, color: '#004fdd' // 0% 处的颜色}, {offset: 1, color: '#0096f6' // 100% 处的颜色}],global: false // 缺省为 false},},emphasis: {areaColor: '#0036bf' //鼠标悬停的颜色}}},{name: '濠江区',itemStyle: {normal: {areaColor: { //地图色type: 'linear',x: 0,y: 1,x2: 0,y2: 0,colorStops: [{offset: 0, color: '#0059e0' // 0% 处的颜色}, {offset: 1, color: '#0075eb' // 100% 处的颜色}],global: false // 缺省为 false},},emphasis: {areaColor: '#0036bf' //鼠标悬停的颜色}}},{name: '金平区',itemStyle: {normal: {areaColor: { //地图色type: 'linear',x: 0,y: 1,x2: 0,y2: 0,colorStops: [{offset: 0, color: '#0071e9' // 0% 处的颜色}, {offset: 1, color: '#008ff4' // 100% 处的颜色}],global: false // 缺省为 false},},emphasis: {areaColor: '#0036bf' //鼠标悬停的颜色}}},{name: '龙湖区',itemStyle: {normal: {areaColor: { //地图色type: 'linear',x: 0,y: 1,x2: 0,y2: 0,colorStops: [{offset: 0, color: '#0073ea' // 0% 处的颜色}, {offset: 1, color: '#0091f4' // 100% 处的颜色}],global: false // 缺省为 false},},emphasis: {areaColor: '#0036bf' //鼠标悬停的颜色}}},{name: '澄海区',itemStyle: {normal: {areaColor: { //地图色type: 'linear',x: 0,y: 1,x2: 0,y2: 0,colorStops: [{offset: 0, color: '#0082ef' // 0% 处的颜色}, {offset: 1, color: '#00aeff' // 100% 处的颜色}],global: false // 缺省为 false},},emphasis: {areaColor: '#0036bf' //鼠标悬停的颜色}}},{name: '南澳县',itemStyle: {normal: {areaColor: { //地图色type: 'linear',x: 0,y: 1,x2: 0,y2: 0,colorStops: [{offset: 0, color: '#0083f0' // 0% 处的颜色}, {offset: 1, color: '#0096f6' // 100% 处的颜色}],global: false // 缺省为 false},},emphasis: {areaColor: '#0036bf' //鼠标悬停的颜色}}}]}

其中x,y,x2,y2四个属性，相当于坐标系中的方向，范围从 0 - 1，相当于在图形包围盒中的百分比。

可以试着修改四个值，感受一下方向和效果的变化，找到自己想要的效果。

echarts地图整体渐变色相关推荐

echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点
一.设置地图外边框给地图添加外边框,同时地图中的区域添加细一点的边框.效果图如下: 这里涉及两种边框 ,分别在 geo 和 series 种设置 .主要代码如下: option = {backgr ...
echarts地图更改具体某省份颜色以及更改地图整体颜色 china.js echarts geo map
一.首先,更改地图整体背景颜色效果如下: 具体实现方法是修改echarts的option.geo.itemStyle.normal.areaColor let option = {geo: {it ...
echarts 地图上如何打点
这里介绍如何在地图上进行打点.首先我们想到的是 scatter (散点图).这里 echarts 设置地图外边框.地图背景渐变色和地图阴影,增加立体感以及在地图上打点有详细介绍,请参考.这里我介绍另 ...
echarts 地图九状线显示钓鱼岛系列（3）之 vue项目
我引入的是 "echarts": "^4.2.1" (地图对比) (china.js) (china1.js) 1.首先需要在node_modul ...
Echarts地图初体验
根据黑马pink老师的视频制作的echarts地图最近沉迷P社的钢4,断断续续几天才做好效果预览 echart拿来做这种动态图还是不错的官网百度的echarts 仓库地址链接: link. h ...
cocos2d-x游戏实例（10）-塔防游戏（修改地图图素，地图整体缩放）
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 塔防游戏在目前的智能机游戏中占据很重要的部分, ...
mysql+地图网格数据下载_echarts 中国各省市 echarts地图数据，含世界地图
[实例简介] echarts 中国各省市 echarts地图数据,含世界地图,含各省地市数据 [实例截图] [核心代码] echarts_map_data ├── anhui │ ├── anhu ...
Echarts地图详细镇区的划分_echarts乡镇地图,echarts地图街道-算法与数据结构文档
Echarts地图详细镇区的划分_echarts乡镇地图,echarts地图街道-算法与数据结构文档类资源-CSDN下载
echarts asp mysql 源码_如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)...
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 本文将结合实例 ...
echarts 地图常见效果
echarts 地图常见效果!! 引入echarts包(最全的那个,不要下简易版的)和地图包 ----------------------------------------------------- ...

echarts地图整体渐变色

echarts地图整体渐变色相关推荐

最新文章

热门文章