Echarts地图之——如何给地图添加背景图片

在车上在路上

已于 2024-03-21 13:55:34 修改

阅读量8.2k

点赞数 8

分类专栏： echarts地图样式整理文章标签： echarts 前端 javascript

于 2024-03-21 11:31:52 首次发布

本文链接：https://blog.csdn.net/weixin_45685252/article/details/136902738

版权

上期我们已经给地图添加了一个阴影3d的效果，但是背景纯色的感觉还是不怎么好看，希望能给地图加个背景图。

一般来说给地图加背景图的情况较少，加个渐变色或者根据数据的情况给某些省份设置不一样的背景色，这样的做法是比较多的。

因为如果给整张地图加一个背景是会有错位的情况的，所以这种做法不推荐，只是提供一种如何这么做的方式，而且我们这里的这张背景图片正好颜色比较相似就把边界的横线模糊掉了，没那么明显。

在这里插入图片描述
如果我们全局设置一个背景图，它会被切分成这样子，是不能保证原图的，所以也是不推荐这样做的原因。

下面看下应该怎么设置

geo: [
    {
        map: 'china',
        aspectScale: 0.85,
        zoom: 1.2,
        top: '9%',
        left: '11%',
        roam: false,
        regions: [
            { // 隐藏南海诸岛
                name: '南海诸岛',
                itemStyle: {
                // 隐藏地图
                    normal: {
                    opacity: 0 // 为 0 时不绘制该图形
                    }
                },
                label: {
                    show: false // 隐藏文字