echarts geo 下的regions 单独修改地图省份界

废话不多说直接上图片与代码:

1593867638(1).jpg

import echarts from 'ecahrts'; // 引入echarts文件
import "./china"  // 引入中国js文件

const chartsChina = (that, el, chartData, Fun = () =>{} ) => {
    that.chart = echarts.init(document.getElementById(el);
    that.chart.on('click', function(params) { // 通过ecahrts的点击事件,将点击的信息传给函数 Fun;
        Fun(params);
    }
    chartData = [
        {
            name:"广东省",
            coord: [ 113.12244, 23.009505 ],
            value: 1
        }
    ]
    const convertData = function(data) { // 根据数据设置地图圆点的颜色
       let res = [];
       for(var i = 0; i < data.length; i++) {
          res.push({
              name: data[i].name;
              value: data[i].coord,  // 坐标
              data:  data[i].value,
              itemStyle: {
                  normal:{ color: data[i].value == "1" ? "#0090FF" : data[i].value == "2" ? "#E59800" :  "#F24949" }
              }
            });
         }
        return res;
    }

     option = {
                backgroundColor: '#000',
                title: {
                    top: 20,
                    text: '中国地图',
                    subtext: '',
                    x: 'center',
                    textStyle: {
                        color: '#ccc'
                    }
                },
                legend: {
                    show: false
                },
                tooltip: {
                    show: false
                },
                geo: {
                    map: 'china',
                    aspectScale: 0.75, //长宽比
                    roam: false,
                    show: true,
                    silent: true,
                    zlevel: 1,
                    top: '10%',
                    left: '20%',
                    regions: [{ // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
                        name: "广东省", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
                        itemStyle: {
                            normal: {
                                opacity: 1, // 透明度
                                borderColor: "#fff", // 省份界线颜色
                                borderWidth: 3, // 省份界线的宽度
                                areaColor: 'red', // 整个省份的颜色
                            },
                        },
                    }],
                    itemStyle: { // 设置地图的样式
                        normal: {
                            // areaColor: '#013C62', // 地图样色
                            // shadowColor: '#182f68', // 阴影
                            // shadowOffsetX: 0,
                            // shadowOffsetY: 25
                            borderColor: "#000404",
                            borderWidth:3,
                            areaColor: {
                                type: 'linear-gradient',
                                x: 1000,
                                y: 600,
                                x2: 1000,
                                y2: 0,
                                colorStops:[{
                                    offset: 0,
                                    color: '#0A155D' // 0%处颜色
                                },{
                                    offset: 1,
                                    color: '#007Ac1'
                                }],
                                global: true // 缺省为 false
                            },
                            opacity:1,
                        },
                        emphasis: {
                            show: false,
                            areaColor: '#FF8420'
                        }
                    }
                },
                series: [
                    {
                        type: 'map',
                        map: 'china', 
                        roam: false,
                        show: true,
                        silent: true,
                        top: '11%',
                        left: '20.5%',
                        aspectScale: .75, //长宽比
                        label: {                            
                            emphasis: {
                                textStyle: {
                                    color: '#fff',
                                    show: true
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: "rgba(147, 235, 248, 0)",
                                borderWidth:0,
                                areaColor: {
                                    x: 1000,
                                    y: 600,
                                    x2: 1000,
                                    y2: 0,
                                    colorStops:[{
                                        offset: 0,
                                        color: '#082248' // 0%处颜色
                                    },{
                                        offset: 1,
                                        color: '#082248'
                                    }],
                                    global: true // 缺省为 false
                                },
                                opacity:1,
                            },
                            emphasis: {
                                areaColor: '#0882248',
                                show: false,
                            }
                        },
                        
                        z: 1,
                    },
                    {
                        type: 'scatter',
                        name: 'light',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        symbolSize: 20,
                        data: convertData(chartData),
                        itemStyle: {
                            normal: {
                                color: '#ffff',
                            }
                        },
                        label: {
                            normal: {
                                fontSize: 15,
                                fontWeight: 'bolder',
                                formatter(params) {
                                    return (params.name + ':' + params.data.data)
                                },
                                position: 'right',
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        }
                    }

                ]
            };
            data: convertData(chartData)
          }

        ]
    };
}

在这里插入图片描述

其实省份界线的样色特别的容易修改,只需要修改 geo.regions 下的属性即可,但是有一个问题,就是regions的设置 只能在geo中设置,series中不可以设置,所以用到地图立体效果的时候还需要注意层级的设置,z:1 的层级小于 zlevel:1,如果不需要设置立体地图,则不需要注意这一点,可以直接设置 .
如果这篇文章对您有所帮助,请帮忙点一个小小的赞,如果大家有更好的解决方法或者有任何疑问都可以私信我,
菜鸟一枚,如果有不对的地方,请在下面留言,我会尽快改正!!