如何将echarts集成到我ThreeJS的场景中

this.signChart.on('finished',function () {
        var spriteMap = new
THREE.TextureLoader().load(signFihishchart.getDataURL() );
        var spriteMaterial = new THREE.SpriteMaterial({
            map: spriteMap,
            side: THREE.DoubleSide
        });
        var sprite = new THREE.Sprite( spriteMaterial );
        sprite.scale.set(250, 250, 1)
        sprite.position.set(option.Position.X, y, option.Position.Z);
        store3D.addObject(sprite);
})

eg:

function StoreSign(option,store3D) {
    let optionCube = {
        length: option.Length, // 仓库的长
        width: option.Width, // 仓库的宽
        height: option.Height, // 仓库的高
        position: { // 仓库的位置
            x: option.Position.X,
            y: option.Position.Y,
            z: option.Position.Z
        },
        style: { // 仓库的样式
            transparent:1,
            opacity:0.2,
            color: 0x17CEBC,
            depthTest:0
        },
    };
    let div=document.createElement("div"); // 创建标签
    div.style.width="400px"; // 设置创建元素的宽
    div.style.height="400px"; // 设置创建元素的高

    this.signChart=echarts.init(div); // 初始化eCharts图表
    let optionChart = {

        title: { // 中间的文字
            text: option.Name, // 仓库的名称
            textStyle: { // 文字的样式
                color: '#fff', // 颜色白色
                fontSize: 30, // 文字大小 30
                fontWeight: 'bold' // 字体加粗
            },
            left: 'center',  // 设置title位置 左右居中
            bottom: '42%', // 距离下面有42%的距离
        },
        tooltip: {
            show: false, // 是否显示工具栏
        },
        series: [{ // 设置具体的轴
            type: 'pie', // 饼图
            radius: [0, "35%"], // 饼图的半径，内半径和外半径
            data: [{ // 数据
                value: 0, // 数据  这里没有数据 只是使用了title
                itemStyle: {
                    normal: {
                        color: "rgba(20,198,249,1)" // 设置底图
                    }
                }
            }, ]
        },
        ]
    };
    this.signChart.setOption(optionChart); // 生成图表
    /**
     * 下面就是要将图表的图片作为精灵系统的材质
     */
    let signFihishchart=this.signChart;
    window.onresize = function(){
        signFihishchart.resize();
    }
    this.signChart.on('finished',function () { // 当图表加载完成之后,
        // 获取这个图表的图片作为纹理贴图
        var spriteMap = new THREE.TextureLoader().load(signFihishchart.getDataURL() );
        // 作为精灵系统的材质
        var spriteMaterial = new THREE.SpriteMaterial({
            transparent: true,
            map: spriteMap,
            side: THREE.DoubleSide
        });

        var sprite = new THREE.Sprite( spriteMaterial );
        sprite.type='StoreSign';
        sprite.scale.set(250, 250, 1) // 设置精灵系统的大小
        let y= option.Height+50;
        sprite.position.set(option.Position.X, y, option.Position.Z); // 设置精灵系统的位置
        store3D.objectLockPointer.push(sprite);
        store3D.addObject(sprite); // 放入场景中
    })

}