echart多样实现

echart3D地球上贴2D组件

2019-12-20  本文已影响0人  你好赵大宝

globe与geo完美结合

globe

// 使用 echarts 绘制世界地图的实例作为纹理
var canvas = document.createElement('canvas');
var mapChart = echarts.init(canvas, null, {
    width: 4096, height: 2048
});
mapChart.setOption({
    series : [
        {
            type: 'map',
            map: 'world',
            // 绘制完整尺寸的 echarts 实例
            top: 0, left: 0,
            right: 0, bottom: 0,
            boundingCoords: [[-180, 90], [180, -90]]
        }
    ]
});
...
baseTexture: mapChart

自定义的地图可以使用geoJSON,也可以放在地球上,实现将地球区域性遮盖的效果
echart文档详实全面,可以仔细研究https://www.echartsjs.com/zh/option-gl.html#globe.baseTexture

上一篇下一篇

猜你喜欢

热点阅读