echarts通过bmap 使用个性化地图样式出现白屏

Question

各项版本

echarts：4.2.1
百度地图api: 3.0(开发者账号)
bmap github 最新版本

代码使用

const mapStyle = { styleJson: [个性化的json] }

const chart = echarts.init(this.$refs.chart)
      
      chart.setOption(
        extend(
          {},
          {
            bmap: {
              center: [120.13066322374, 30.240018034923],
              zoom: 14,
              roam: true,
              mapStyleV2: mapStyle // 方式1
            },
            series: [{
              type: 'scatter',
              // 使用百度地图坐标系
              coordinateSystem: 'bmap',
              // 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
              data: [ [120, 30, 1] ]
            }]
          }
        )
      );
      chart.on('finished', () => {
        var bmap = chart.getModel().getComponent('bmap').getBMap();
        /* bmap.setMapStyle({
          styleId: 'd4fe0f93ec8cfd18f6d8be362fb5baf6'
        }); */ // 方式2
        // bmap.setMapStyleV2(mapStyle); 方式3
      })

效果

使用样式之前

使用样式之后

结语

无报错无警告

Answer 1

看了一下代码，基本上没什么大问题。应该逐步的跟踪一下，如果你是放在vue或者其他前端框架的话，先在框架外把代码调试通了再逐步移植，否则调试很费劲。
以下代码修改自https://www.echartsjs.com/exa... 和你的代码，复制一下进去看看吧。我觉得可能$Ref那边有问题。

app.title = '北京公交路线 - 百度地图';

$.get(ROOT_PATH + 'data/asset/data/lines-bus.json', function(data) {
    var busLines = [].concat.apply([], data.map(function (busLine, idx) {
        var prevPt;
        var points = [];
        for (var i = 0; i < busLine.length; i += 2) {
            var pt = [busLine[i], busLine[i + 1]];
            if (i > 0) {
                pt = [
                    prevPt[0] + pt[0],
                    prevPt[1] + pt[1]
                ];
            }
            prevPt = pt;

            points.push([pt[0] / 1e4, pt[1] / 1e4]);
        }
        return {
            coords: points
        };
    }));
    myChart.setOption(option = {
        bmap: {
            center: [120.13066322374, 30.240018034923],
              zoom: 14,
              roam: true,
            mapStyle: {
              styleJson: [
        {
            'featureType': 'land',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'on',
                'color': '#ffffffff'
            }
        }, {
            'featureType': 'water',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'on',
                'color': '#ff5400ff'
            }
        }, {
            'featureType': 'green',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'on',
                'color': '#ff54006e'
            }
        }, {
            'featureType': 'building',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'on'
            }
        }, {
            'featureType': 'building',
            'elementType': 'geometry.fill',
            'stylers': {
                'color': '#ffffffb3'
            }
        }, {
            'featureType': 'building',
            'elementType': 'geometry.stroke',
            'stylers': {
                'color': '#dadadab3'
            }
        }, {
            'featureType': 'subwaystation',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'on',
                'color': '#b15454B2'
            }
        }, {
            'featureType': 'education',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'on',
                'color': '#e4f1f1ff'
            }
        }, {
            'featureType': 'medical',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'on',
                'color': '#f0dedeff'
            }
        }, {
            'featureType': 'scenicspots',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'on',
                'color': '#e2efe5ff'
            }
        }, {
            'featureType': 'highway',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'on',
                'weight': 4
            }
        }, {
            'featureType': 'highway',
            'elementType': 'geometry.fill',
            'stylers': {
                'color': '#f7c54dff'
            }
        }, {
            'featureType': 'highway',
            'elementType': 'geometry.stroke',
            'stylers': {
                'color': '#fed669ff'
            }
        }, {
            'featureType': 'highway',
            'elementType': 'labels',
            'stylers': {
                'visibility': 'on'
            }
        }, {
            'featureType': 'highway',
            'elementType': 'labels.text.fill',
            'stylers': {
                'color': '#8f5a33ff'
            }
        }, {
            'featureType': 'highway',
            'elementType': 'labels.text.stroke',
            'stylers': {
                'color': '#ffffffff'
            }
        }, {
            'featureType': 'highway',
            'elementType': 'labels.icon',
            'stylers': {
                'visibility': 'on'
            }
        }, {
            'featureType': 'arterial',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'on',
                'weight': 2
            }
        }, {
            'featureType': 'arterial',
            'elementType': 'geometry.fill',
            'stylers': {
                'color': '#d8d8d8ff'
            }
        }, {
            'featureType': 'arterial',
            'elementType': 'geometry.stroke',
            'stylers': {
                'color': '#ffeebbff'
            }
        }, {
            'featureType': 'arterial',
            'elementType': 'labels',
            'stylers': {
                'visibility': 'on'
            }
        }, {
            'featureType': 'arterial',
            'elementType': 'labels.text.fill',
            'stylers': {
                'color': '#525355ff'
            }
        }, {
            'featureType': 'arterial',
            'elementType': 'labels.text.stroke',
            'stylers': {
                'color': '#ffffffff'
            }
        }, {
            'featureType': 'local',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'on',
                'weight': 1
            }
        }, {
            'featureType': 'local',
            'elementType': 'geometry.fill',
            'stylers': {
                'color': '#d8d8d8ff'
            }
        }, {
            'featureType': 'local',
            'elementType': 'geometry.stroke',
            'stylers': {
                'color': '#ffffffff'
            }
        }, {
            'featureType': 'local',
            'elementType': 'labels',
            'stylers': {
                'visibility': 'on'
            }
        }, {
            'featureType': 'local',
            'elementType': 'labels.text.fill',
            'stylers': {
                'color': '#979c9aff'
            }
        }, {
            'featureType': 'local',
            'elementType': 'labels.text.stroke',
            'stylers': {
                'color': '#ffffffff'
            }
        }, {
            'featureType': 'railway',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'on',
                'weight': 1
            }
        }, {
            'featureType': 'railway',
            'elementType': 'geometry.fill',
            'stylers': {
                'color': '#949494ff'
            }
        }, {
            'featureType': 'railway',
            'elementType': 'geometry.stroke',
            'stylers': {
                'color': '#ffffffff'
            }
        }, {
            'featureType': 'subway',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'on',
                'weight': 1
            }
        }, {
            'featureType': 'subway',
            'elementType': 'geometry.fill',
            'stylers': {
                'color': '#d8d8d8ff'
            }
        }, {
            'featureType': 'subway',
            'elementType': 'geometry.stroke',
            'stylers': {
                'color': '#ffffffff'
            }
        }, {
            'featureType': 'subway',
            'elementType': 'labels',
            'stylers': {
                'visibility': 'on'
            }
        }, {
            'featureType': 'subway',
            'elementType': 'labels.text.fill',
            'stylers': {
                'color': '#979c9aff'
            }
        }, {
            'featureType': 'subway',
            'elementType': 'labels.text.stroke',
            'stylers': {
                'color': '#ffffffff'
            }
        }, {
            'featureType': 'continent',
            'elementType': 'labels',
            'stylers': {
                'visibility': 'on'
            }
        }, {
            'featureType': 'continent',
            'elementType': 'labels.icon',
            'stylers': {
                'visibility': 'on'
            }
        }, {
            'featureType': 'continent',
            'elementType': 'labels.text.fill',
            'stylers': {
                'color': '#333333ff'
            }
        }, {
            'featureType': 'continent',
            'elementType': 'labels.text.stroke',
            'stylers': {
                'color': '#ffffffff'
            }
        }, {
            'featureType': 'city',
            'elementType': 'labels.icon',
            'stylers': {
                'visibility': 'on'
            }
        }, {
            'featureType': 'city',
            'elementType': 'labels',
            'stylers': {
                'visibility': 'on'
            }
        }, {
            'featureType': 'city',
            'elementType': 'labels.text.fill',
            'stylers': {
                'color': '#454d50ff'
            }
        }, {
            'featureType': 'city',
            'elementType': 'labels.text.stroke',
            'stylers': {
                'color': '#ffffffff'
            }
        }, {
            'featureType': 'town',
            'elementType': 'labels.icon',
            'stylers': {
                'visibility': 'on'
            }
        }, {
            'featureType': 'town',
            'elementType': 'labels',
            'stylers': {
                'visibility': 'on'
            }
        }, {
            'featureType': 'town',
            'elementType': 'labels.text.fill',
            'stylers': {
                'color': '#454d50ff'
            }
        }, {
            'featureType': 'town',
            'elementType': 'labels.text.stroke',
            'stylers': {
                'color': '#ffffffff'
            }
        }, {
            'featureType': 'road',
            'elementType': 'geometry.fill',
            'stylers': {
                'color': '#47434c8a'
            }
        }, {
            'featureType': 'road',
            'elementType': 'labels',
            'stylers': {
                'visibility': 'off'
            }
        }, {
            'featureType': 'road',
            'elementType': 'labels.text.stroke',
            'stylers': {
                'color': '#ffffff00'
            }
        }, {
            'featureType': 'poilabel',
            'elementType': 'labels',
            'stylers': {
                'visibility': 'off'
            }
        }, {
            'featureType': 'poilabel',
            'elementType': 'labels.icon',
            'stylers': {
                'visibility': 'off'
            }
        }, {
            'featureType': 'poilabel',
            'elementType': 'labels.text.stroke',
            'stylers': {
                'color': '#ffffff00'
            }
        }, {
            'featureType': 'road',
            'elementType': 'labels.text.fill',
            'stylers': {
                'color': '#8f8899ff'
            }
        }, {
            'featureType': 'districtlabel',
            'elementType': 'labels.icon',
            'stylers': {
                'visibility': 'off'
            }
        }, {
            'featureType': 'districtlabel',
            'elementType': 'labels',
            'stylers': {
                'visibility': 'on'
            }
        }, {
            'featureType': 'manmade',
            'elementType': 'geometry',
            'stylers': {
                'color': '#47434c24'
            }
        }
    ]
            }
        },
        series: [{
             type: 'scatter',
              // 使用百度地图坐标系
              coordinateSystem: 'bmap',
              // 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
              data: [ [120, 30, 2] ,[120.1, 30, 1],[120.1, 30.1, 5]
              ]
              
        }]
    });
});
myChart.on('finished', () => {
        var bmap = myChart.getModel().getComponent('bmap').getBMap();
         bmap.setMapStyle({
          styleId: 'd4fe0f93ec8cfd18f6d8be362fb5baf6'
        });  // 方式2
         bmap.setMapStyleV2(mapStyle); 方式3
      })