Explication détaillée de l'application des graphiques générés par echarts dans three.js-js tutoriel-php.cn

Explication détaillée de l'application des graphiques générés par echarts dans three.js

angryTom

Libérer： 2019-11-30 15:20:33

avant

5059 Les gens l'ont consulté

Explication détaillée de l'application des graphiques générés par echarts dans three.js

Récemment, plusieurs personnes du groupe ont demandé comment coller le graphique echarts sur le modèle three.js. Ce problème est en fait très simple, car les deux sont rendus dans un canevas et vous pouvez directement utiliser le canevas généré par les echarts comme texture.

La méthode est confirmée réalisable, puis nous commencerons à coder directement.

Construisons d'abord une scène de base de trois, que je ne répéterai pas ici.

Créez ensuite un nouveau plan, et nous pourrons coller l'image sur ce plan.

[Recommandations de cours associées : Tutoriel vidéo JavaScript]

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);
}

Copier après la connexion

Définissez l'angle de la caméra. À ce stade, la scène est un tableau blanc.

Explication détaillée de lapplication des graphiques générés par echarts dans three.js

Ensuite, ouvrez le site officiel d'echarts, recherchez le cas et créez un tableau de bord. Copiez le code. Commencez à courir.

Pour faciliter la démonstration, j'ai créé deux divs dans le corps comme conteneurs pour trois et le graphique respectivement. Dans le développement réel, le conteneur du graphique n'a pas besoin d'être affiché ni d'être ajouté au corps.

<div id="webgl"   style="max-width:90%"></div>
<div id="echart" style="width:512px;height: 512px;margin-left: 620px;"></div>

Copier après la connexion

var myChart = echarts.init(document.getElementById(&#39;echart&#39;));
option = {
    tooltip: {
        formatter: "{a} <br/>{b} : {c}%"
    },
    //toolbox会在右上角生成两个功能按钮，咱们不需要，直接干掉。
    // toolbox: { 
    //     feature: {
    //         restore: {},
    //         saveAsImage: {}
    //     }
    // },
    series: [
        {
            name: &#39;业务指标&#39;,
            type: &#39;gauge&#39;,
            detail: { formatter: &#39;{value}%&#39; },
            data: [{ value: 50, name: &#39;完成率&#39; }]
        }
    ]
};
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();

Copier après la connexion

À ce moment, vous voyez la page suivante :

Explication détaillée de lapplication des graphiques générés par echarts dans three.js

Méthode 1 : CanvasTexture

trois.js a une API : CanvasTexture. Vous pouvez transmettre un objet canevas et utiliser cette méthode pour effectuer les tâches ci-dessus.

CanvasTexture( canvas : HTMLElement, mapping : Constant, wrapS : Constant, wrapT : Constant, magFilter : Constant, minFilter : Constant, format : Constant, type : Constant, anisotropie : Number )

changeTextureT(texture){
    this.plane.material.map = new THREE.CanvasTexture(texture)
    this.plane.material.needsUpdate = true  
    var thiscancas = document.getElementById("echart").getElementsByTagName(&#39;canvas&#39;)[0]
    scene.changeTextureT(thiscancas)
}

Copier après la connexion

Les résultats d'exécution sont les suivants, qui ne sont effectivement pas clairs et sont les mêmes que les problèmes rencontrés. Essayez de dessiner des graphiques plus grands, mais cela est adaptatif, ce qui donne un tableau de bord moche, ce qui n'est pas ce que vous imaginiez. Si vous dessinez le tableau vous-même, vous pouvez le gérer de cette façon.

Explication détaillée de lapplication des graphiques générés par echarts dans three.js

Méthode 2 : getDataURL

Puisque les echarts restituent également le canevas, regardez l'API, il devrait y avoir un moyen pour exporter des images. Il s'agit de l'API ci-dessous et il existe des paramètres facultatifs pour définir la résolution.

Explication détaillée de lapplication des graphiques générés par echarts dans three.js

changeTextureE(texture){
    this.plane.material.map = new THREE.TextureLoader().load(texture)
    this.plane.material.needsUpdate = true  
}
var texture = myChart.getDataURL({
    pixelRatio: 4,
    backgroundColor: &#39;#fff&#39;
}); 
scene.changeTextureE(texture)

Copier après la connexion

Régler la résolution sur 4 est en effet bien plus clair.

Explication détaillée de lapplication des graphiques générés par echarts dans three.js

Les trois images suivantes sont la comparaison des effets de la résolution 1, de la résolution 4 et de la méthode 1 respectivement.

Explication détaillée de lapplication des graphiques générés par echarts dans three.js

La différence entre les trois images est évidente, méthode 2> La méthode à utiliser est déjà claire.

Ce qui suit est une image dynamique. Il n'y a pas de texture au début, puis la texture générée par la méthode 1 est collée, puis elle clignote, et elle est remplacée par la texture générée par la méthode 2, résolution. 4. C'est toujours très clair lorsqu'on zoome.

Explication détaillée de lapplication des graphiques générés par echarts dans three.js

Dernière question : De nombreux graphiques dans les graphiques ont des animations de tampon. Si vous souhaitez actualiser la carte en temps réel, est-ce faisable ? La fréquence d’images peut-elle suivre ?

Tous les codes :

<!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(&#39;echart&#39;));
        option = {
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            // toolbox: {
            //     feature: {
            //         restore: {},
            //         saveAsImage: {}
            //     }
            // },
            series: [
                {
                    name: &#39;业务指标&#39;,
                    type: &#39;gauge&#39;,
                    detail: { formatter: &#39;{value}%&#39; },
                    data: [{ value: 50, name: &#39;完成率&#39; }]
                }
            ]
        };
        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(&#39;canvas&#39;)[0]
            scene.changeTextureT(thiscancas)
        }, 2000);
        setTimeout(() => {
            var texture = myChart.getDataURL({
                pixelRatio: 4,
                backgroundColor: &#39;#fff&#39;
            });
            scene.changeTextureE(texture)
        }, 4000);
    </script>
</body>
</html>

Copier après la connexion

Cet article provient de la rubrique tutoriel js, bienvenue pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!