Detailed explanation of the application of charts generated by echarts in three.js

Recently, several people in the group asked how to paste the echarts chart on the three.js model. This problem is actually very simple, because both are rendered into canvas, and you can directly use the canvas generated by echarts as a texture.

The method is sure to be feasible, then we will start coding directly.

Let’s first build a basic scene of three, which I won’t repeat here.

Then create a new plane, and we can paste the picture on this plane.

[Related course recommendations: JavaScript Video Tutorial]

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

Set the angle of the camera. At this time, there is a whiteboard in the scene.

Then open the official website of echarts, find the case, and create a dashboard. Copy the code. start running.

For the convenience of demonstration, I created two divs in the body as containers for three and the chart respectively. In actual development, the container of the chart does not need to be displayed, nor does it need to be added to the 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/>{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();

At this time I saw the following page:

Method 1: CanvasTexture

three.js has a api:CanvasTexture. You can pass in a canvas object and use this method to complete the above tasks.

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

The running results are as follows, which are indeed unclear and are the same as the problems they encountered. Try to draw echarts larger, but this is adaptive, resulting in an ugly dashboard, which is not what you imagined. If you draw the table yourself, you can deal with it this way.

Method 2: getDataURL

Since echarts also renders canvas, look at the API, there should be a way to export images. It is the API below, and there are optional parameters to set the resolution.

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)

Setting the resolution to 4 is indeed much clearer.

The following three pictures are the comparison of the effects of resolution 1, resolution 4 and method 1 respectively.

##The difference between the three pictures is obvious, method 2>method 1. It is already clear which method to use.

The following is a dynamic picture. There is no texture at first, then the texture generated by method 1 is pasted, then it flashes, and it is replaced by the texture generated by method 2, resolution 4. It's still very clear when zoomed in.

Final question: Many charts in echarts have buffer animations. If you want to refresh the map in real time, is it feasible? Can the frame rate keep up?

All 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>

This article comes from the

js tutorial column, welcome to learn!

The above is the detailed content of Detailed explanation of the application of charts generated by echarts in three.js. For more information, please follow other related articles on the PHP Chinese website!