echarts的3d地球怎么设置背景透明？

Question

<div id="main" style="width: 1000px;height:1000px;"></div>
<script>
    var myChart = echarts.init(document.getElementById('main'));
    $.getJSON('src/data/data-cTe.json', function (data) {
        var airports = data.airports.map(function (item) {
            // console.log('item[3]=='+item[3]+'：item[4]=='+item[4]);
            return {
                coord: [item[3], item[4]]
            }
        });

        function getAirportCoord(idx) {
            return [data.airports[idx][3], data.airports[idx][4]];
        }

        // Route: [airlineIndex, sourceAirportIndex, destinationAirportIndex]
        var routesGroupByAirline = {};
        data.routes.forEach(function (route) {
            var airline = data.airlines[route[0]];
            var airlineName = airline[0];
            if (!routesGroupByAirline[airlineName]) {
                routesGroupByAirline[airlineName] = [];
            }
            routesGroupByAirline[airlineName].push(route);
        });

        var pointsData = [];
        data.routes.forEach(function (airline) {
            pointsData.push(getAirportCoord(airline[1]));
            pointsData.push(getAirportCoord(airline[2]));
        });

        var series = data.airlines.map(function (airline) {
            var airlineName = airline[0];
            var routes = routesGroupByAirline[airlineName];

            if (!routes) {
                return null;
            }
            return {
                type: 'lines3D',
                name: airlineName,

                effect: {
                    show: true,
                    trailWidth: 2,
                    trailLength: 0.15,
                    trailOpacity: 1,
                    //trailColor: 'rgb(30, 30, 60)'
                    trailColor: 'red'
                },

                lineStyle: {
                    width: 1,
                    // color: 'rgb(50, 50, 150)',
                    // color: [1, 1, 1, 1],
                    // color: 'rgb(118, 233, 241)',
                    opacity: 0.1
                },
                blendMode: 'lighter',

                data: routes.map(function (item) {
                    //console.log([airports[item[1]].coord, airports[item[2]].coord]+'==');
                    //return [airports[item[1]].coord, airports[item[2]].coord];
                    return [airports[item[1]].coord, airports[item[2]].coord];
                })
            };
        }).filter(function (series) {
            return !!series;
        });

        series.push({
            type: 'scatter3D', // 三维散点 scatter 散开
            coordinateSystem: 'globe', // 使用地球坐标系，通过 globeIndex 指定相应的地球坐标系组件
            blendMode: 'lighter',
            symbolSize: 2,
            itemStyle: {
                //color: 'rgb(50, 50, 150)',
                opacity: 0
            },
            data: pointsData
        });

        myChart.setOption({
            legend: {
                selectedMode: 'single',
                left: 'left',
                data: Object.keys(routesGroupByAirline),
                orient: 'vertical',
                textStyle: {
                    //color: '#fff'
                }
            },
            globe: {// 地球组件。组件提供了地球的绘制以及相应的坐标系

                // environment: 'src/data/data-1491837999815-H1_44Qtal.jpg',

                // 地球的高度纹理。高度纹理可以用于凹凸贴图表现地球表面的明暗细节。
                // heightTexture: 'src/data/data-1491837512042-rJlLfXYax.jpg',

                displacementScale: 0.1,
                displacementQuality: 'high',

                // baseColor: '#000',
                baseColor: 'rgba(0,0,0,0)',

                shading: 'realistic',
                realisticMaterial: {
                    //roughness: 0.2,
                    //metalness: 0
                },

                postEffect: {
                    enable: true,
                    depthOfField: {
                        enable: false,
                        focalDistance: 150
                    }
                },
                temporalSuperSampling: {
                    enable: true
                },
                light: {
                    ambient: {
                        intensity: 0
                    },
                    main: {
                        intensity: 0.1,
                        shadow: false
                    },
                    ambientCubemap: {
                        texture: 'src/data/data-1491837984109-r1u7NmY6e.hdr',
                        exposure: 1,
                        diffuseIntensity: 0.5,
                        specularIntensity: 2
                    }
                },
                viewControl: {
                    //autoRotate: false
                    autoRotate: false
                },
                silent: true
            },
            series: series
        });
        window.addEventListener('keydown', function () { // 按钮被按下时，发生 keydown 事件
            series.forEach(function (series, idx) {
                myChart.dispatchAction({
                    type: 'lines3DToggleEffect',
                    seriesIndex: idx
                });
            })
        })
    })
</script>

Answer 1

globe 配置里的 environment 属性设置成 'none' 就行了

Answer 2

globe 配置里的 environment 属性设置成 'none' 就行了