溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細(xì)講解有關(guān)echarts生成的圖表怎么在three.js中使用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
如何把echarts的圖表貼在three.js的模型上。這個(gè)問(wèn)題其實(shí)很簡(jiǎn)單，因?yàn)槎叨际卿秩境蒫anvas的，直接用echarts生成的canvas當(dāng)作貼圖就可以了。
方法確定可行，那么我們就直接開(kāi)始擼代碼。
先搭建一個(gè)three的基本場(chǎng)景起來(lái)，這里不在復(fù)述。
然后新建一個(gè)平面，我們把圖片貼在這個(gè)平面上即可。
addPlane() { var geometry = new THREE.PlaneGeometry(10,10); var material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, // transparent:true }); this.plane = new THREE.Mesh(geometry, material); this.scene.add(this.plane);}擺好相機(jī)的角度，此時(shí)場(chǎng)景中是一個(gè)白板。
然后打開(kāi)echarts的官網(wǎng)，找到案例，來(lái)個(gè)儀表盤吧。代碼拷貝下來(lái)。跑起來(lái)。
為了方便演示，我在body中創(chuàng)建了2個(gè)div，分別作為three和圖表的容器。實(shí)際開(kāi)發(fā)中圖表的容器不需要顯示出來(lái)的，也不需要添加到body中的。
<div id="webgl" style="width:512px;height: 512px;float: left;"></div><div id="echart" style="width:512px;height: 512px;margin-left: 620px;"></div>
var myChart = echarts.init(document.getElementById('echart'));option = { tooltip: { formatter: "{a} <br/> : {c}%" }, //toolbox會(huì)在右上角生成兩個(gè)功能按鈕，咱們不需要，直接干掉。 // toolbox: { // feature: { // restore: {}, // saveAsImage: {} // } // }, series: [ { name: '業(yè)務(wù)指標(biāo)', type: 'gauge', detail: { formatter: '{value}%' }, data: [{ value: 50, name: '完成率' }] } ]};option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;myChart.setOption(option, true);const dom = document.getElementById("webgl");const scene = new Basescene(dom);scene.addPlane();此時(shí)看到下面頁(yè)面：
方法一：CanvasTexture
three.js有一個(gè)api:CanvasTexture?？梢詡魅胍粋€(gè)canvas對(duì)象，用這個(gè)方法可以完成上面的任務(wù)。
CanvasTexture( canvas : HTMLElement, mapping : Constant, wrapS : Constant, wrapT : Constant, magFilter : Constant, minFilter : Constant, format : Constant, type : Constant, anisotropy : Number )
changeTextureT(texture){ this.plane.material.map = new THREE.CanvasTexture(texture) this.plane.material.needsUpdate = true var thiscancas = document.getElementById("echart").getElementsByTagName('canvas')[0] scene.changeTextureT(thiscancas)}運(yùn)行結(jié)果如下，確實(shí)不清晰，和他們遇到的問(wèn)題的一樣。嘗試把echarts繪制大點(diǎn)，但是這個(gè)是自適應(yīng)的，導(dǎo)致儀表板很丑，不是想象的樣子，如果是自己繪制的表格，就可以這樣處理了。
方法二：getDataURL
既然echarts也是渲染canvas，看看api，應(yīng)該有方法導(dǎo)出圖片。就是下面的api，而且有可選參數(shù)，可以設(shè)置分辨率。
changeTextureE(texture){ this.plane.material.map = new THREE.TextureLoader().load(texture) this.plane.material.needsUpdate = true }var texture = myChart.getDataURL({ pixelRatio: 4, backgroundColor: '#fff'}); scene.changeTextureE(texture)分辨率設(shè)置為4確實(shí)清晰多了。
下面三個(gè)圖分別是分辨率1，分辨率4以及方法1繪制的效果對(duì)比。
3個(gè)圖區(qū)別很明顯，方法2>方法1。該使用什么方法已經(jīng)很明白了。
下面是動(dòng)態(tài)圖片，開(kāi)始沒(méi)有貼圖，然后貼上方法1生成的貼圖，接著閃一下，換成方法2分辨率4生成的貼圖。放大還是很清晰的。
最后問(wèn)題：echarts的圖表很多都是有緩沖動(dòng)畫的，如果也想在貼圖上實(shí)時(shí)刷新，可行嗎。幀率能跟上嗎。
全部代碼：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>three.js使用Echarts貼圖</title> <script src="../js/three.js"></script> <script src="../js/controls/OrbitControls.js"></script> <script src="./echarts.js"></script></head><body> <div id="webgl" style="width:512px;height: 512px;float: left;"></div> <div id="echart" style="width:512px;height: 512px;margin-left: 620px;"></div> <script> var myChart = echarts.init(document.getElementById('echart')); option = { tooltip: { formatter: "{a} <br/> : {c}%" }, // toolbox: { // feature: { // restore: {}, // saveAsImage: {} // } // }, series: [ { name: '業(yè)務(wù)指標(biāo)', type: 'gauge', detail: { formatter: '{value}%' }, data: [{ value: 50, name: '完成率' }] } ] }; option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; myChart.setOption(option, true); class Basescene { constructor(dom) { this.id = (new Date()).getTime(); this.dom = dom; this.divWidth = this.dom.offsetWidth; this.divHeight = this.dom.offsetHeight; this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(45, this.divWidth / this.divHeight, 1, 2000); this.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement); this.init(); } init() { this.camera.position.set(0, 0, 20); this.camera.lookAt(this.scene.position); this.renderer.setClearColor(0x222222); this.renderer.setSize(this.divWidth, this.divHeight); this.dom.appendChild(this.renderer.domElement); // this.scene.add(new THREE.AxesHelper(10)); this.animate(); this.addLight(); console.log(this.scene); } addLight() { const light = new THREE.AmbientLight(0xffffff); this.scene.add(light); } render() { this.renderer.render(this.scene, this.camera); } animate = () => { this.request = requestAnimationFrame(this.animate); this.render(); } addPlane() { var geometry = new THREE.PlaneGeometry(10, 10); var material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, // transparent:true }); this.plane = new THREE.Mesh(geometry, material); this.scene.add(this.plane); } changeTextureE(texture) { this.plane.material.map = new THREE.TextureLoader().load(texture) this.plane.material.needsUpdate = true } changeTextureT(texture) { this.plane.material.map = new THREE.CanvasTexture(texture) this.plane.material.needsUpdate = true } } const dom = document.getElementById("webgl"); const scene = new Basescene(dom); scene.addPlane(); setTimeout(() => { var thiscancas = document.getElementById("echart").getElementsByTagName('canvas')[0] scene.changeTextureT(thiscancas) }, 2000); setTimeout(() => { var texture = myChart.getDataURL({ pixelRatio: 4, backgroundColor: '#fff' }); scene.changeTextureE(texture) }, 4000); </script></body></html>關(guān)于“echarts生成的圖表怎么在three.js中使用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼