关于geo3D中使用scatter3D和lines3D的渲染问题ECharts Gallery

20:11:45图表已生成
代码
const typePool = ['line', 'scatter'];
const dataSet = [];

const seriesOptions = {
    line: {
        name: 'line',
        type: 'lines3D',
        coordinateSystem: 'geo3D',
        lineStyle: {
            width: 2.5,
            color: (set) => set.value[2],
            opacity: 0.3
        },
        blendMode: 'lighter',
        effect: {
            "show": true,
            "period": 1,
            "trailWidth": 0.5,
            "trailLength": 0.1,
            "trailOpacity": 0.8
        },
    },
    scatter: {
        name: 'scatter',
        type: 'scatter3D',
        coordinateSystem: 'geo3D',
        symbol: 'pin',
        symbolSize: (value) => value[3] * 10,
        itemStyle: {
            color: (set) => set.value[4],
        },
        blendMode: 'lighter',
    },
};

const dataOptions = {
    "scatter": [
        [121.48,31.22,"上海",3,"#00a2ff"],
        [114.109497,22.396428,"香港",2,"#00a2ff"],
        [121.565418,25.032969,"台北",2,"#00a2ff"],
        [116.46,39.92,"北京",3,"#00a2ff"],
        [114.31,30.52,"武汉",1,"#ffde03"],
        [113.23,23.16,"广州",2,"#00a2ff"],
        [108.95,34.27,"西安",1,"#00a2ff"],
        [84.77,45.59,"克拉玛依",1,"#00a2ff"],
        [13.404954,52.520007,"柏林",2,"#00a2ff"],
        [55.270783,25.204849,"迪拜",2,"#00a2ff"],
        [-0.127758,51.507351,"伦敦",2,"#00a2ff"],
        [-118.243685,34.052234,"洛杉矶",2,"#00a2ff"],
        [-122.374889,37.618972,"旧金山",2,"#00a2ff"],
        [72.877656,19.075984,"孟买",2,"#00a2ff"],
        [-74.005941,40.712784,"纽约",2,"#00a2ff"],
        [2.352222,48.856614,"巴黎",2,"#00a2ff"],
        [12.496366,41.902783,"罗马",2,"#00a2ff"],
        [126.977969,37.566535,"首尔",2,"#00a2ff"],
        [103.819836,1.352083,"新加坡",2,"#00a2ff"],
        [151.209296,-33.86882,"悉尼",2,"#00a2ff"],
        [139.691706,35.689487,"东京",2,"#ffde03"]
    ],
    "line": [
        {"coords":[[121.48,31.22],[116.46,39.92]],"value":50,"lineStyle":{"color":"#00a2ff"}},
        {"coords":[[121.48,31.22],[113.23,23.16]],"value":50,"lineStyle":{"color":"#00a2ff"}},
        {"coords":[[121.48,31.22],[114.31,30.52]],"value":50,"lineStyle":{"color":"#00a2ff"}},
        {"coords":[[114.31,30.52],[121.48,31.22]],"value":50,"lineStyle":{"color":"#ffde03"}},
        {"coords":[[121.48,31.22],[139.691706,35.689487]],"value":50,"lineStyle":{"color":"#00a2ff"}},
        {"coords":[[139.691706,35.689487],[121.48,31.22]],"value":50,"lineStyle":{"color":"#ffde03"}},
        {"coords":[[121.48,31.22],[126.977969,37.566535]],"value":50,"lineStyle":{"color":"#00a2ff"}},
        {"coords":[[121.48,31.22],[13.404954,52.520007]],"value":50,"lineStyle":{"color":"#ff9703"}},
        {"coords":[[121.48,31.22],[55.270783,25.204849]],"value":50,"lineStyle":{"color":"#00a2ff"}},
        {"coords":[[121.48,31.22],[-0.127758,51.507351]],"value":50,"lineStyle":{"color":"#00a2ff"}},
        {"coords":[[121.48,31.22],[-118.243685,34.052234]],"value":50,"lineStyle":{"color":"#00a2ff"}},
        {"coords":[[121.48,31.22],[-122.374889,37.618972]],"value":50,"lineStyle":{"color":"#00a2ff"}},
        {"coords":[[121.48,31.22],[-74.005941,40.712784]],"value":50,"lineStyle":{"color":"#00a2ff"}},
        {"coords":[[121.48,31.22],[2.352222,48.856614]],"value":50,"lineStyle":{"color":"#00a2ff"}},
        {"coords":[[121.48,31.22],[12.496366,41.902783]],"value":50,"lineStyle":{"color":"#00a2ff"}},
        {"coords":[[121.48,31.22],[151.209296,-33.86882]],"value":50,"lineStyle":{"color":"#00a2ff"}},
        {"coords":[[113.23,23.16],[72.877656,19.075984]],"value":50,"lineStyle":{"color":"#00a2ff"}},
        {"coords":[[113.23,23.16],[114.109497,22.396428]],"value":50,"lineStyle":{"color":"#00a2ff"}},
        {"coords":[[113.23,23.16],[121.565418,25.032969]],"value":50,"lineStyle":{"color":"#00a2ff"}},
        {"coords":[[113.23,23.16],[103.819836,1.352083]],"value":50,"lineStyle":{"color":"#00a2ff"}},
        {"coords":[[114.31,30.52],[108.95,34.27]],"value":50,"lineStyle":{"color":"#00a2ff"}},
        {"coords":[[108.95,34.27],[84.77,45.59]],"value":50,"lineStyle":{"color":"#00a2ff"}}
    ]
}

const optionDefault = {
    geo3D: {
        map: 'world',
        left: -60,
        shading: 'lambert',
        // lambertMaterial: {
        //     detailTexture: '/asset/get/s/data-1491896059428-B1QbPbq6e.jpg',
        //     textureTiling: 10
        // },
        postEffect: {
            enable: false,
            SSAO: {
                enable: true,
                radius: 1
            }
        },
        light: {
            // main: {
            //     intensity: 1,
            //     shadow: true
            // },
            ambient: {
                intensity: 0.5
            }
        },
        viewControl: {
            alpha: 70,
        },
        itemStyle: {
            areaColor: 'rgba(0, 50, 100, 0.3)',
            borderColor: 'rgba(0, 200, 235, 0.8)',
            borderWidth: 0.5
        },
        regionHeight: 0.1
    },
    series: []
}

typePool.map((type) => {
    if (seriesOptions[type]) {
        optionDefault.series.push(seriesOptions[type]);
        if (dataOptions[type]) {
            dataSet.push({
                name: type,
                data: dataOptions[type]
            });
        }
    }
});

myChart.setOption(optionDefault);

myChart.setOption({
    series: dataSet
})
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
