Threejs 结合Echarts（V4）生成静态的数据展示信息

关键代码

var customEchart = echarts.init($("<canvas width='512' height='512'></canvas>")[0]);
	
	var optionEchart = {
    
    

		//关键代码，不然在网格中生成图片的背景为黑色
		backgroundColor: '#cce0ff',
		//...
	};
	
	customEchart.setOption(optionEchart);
	
	//必须在渲染完成后才可以去获取图片信息
	customEchart.on('finished', function () {
    
    
		
		//customEchart.getDataURL()  返回base64编码的图片信息
		// 或者利用 new THREE.CanvasTexture(customEchart.getDom())
		var infoEchart = new THREE.TextureLoader().load( customEchart.getDataURL() ); 
		
	
		var infoEchartMaterial = new THREE.MeshBasicMaterial({
    
    
			
			map: infoEchart,
			
			color: 0xffffff
			
		});
		
		var echartPlane = new THREE.Mesh(new THREE.PlaneGeometry(2,2),infoEchartMaterial);
				
		scene.add(echartPlane);

	});

注意： 页面上demo,鼠标在Echarts生成的图表上移动的时候会触发finished事件