hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

echarts生成的图表在three.js中的运用详解_WEB前端开发

2019-12-03后端开发ki4网27°c
A+ A-

近来群里有几个人问,怎样把echarts的图表贴在three.js的模子上。这个问题实在很简单,由于两者都是衬着成canvas的,直接用echarts生成的canvas看成贴图就能够了。

要领肯定可行,那末我们就直接入手下手撸代码。

先搭建一个three的基础场景起来,这里不在复述。

然后新建一个平面,我们把图片贴在这个平面上即可。

【相干课程引荐: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);
}

摆好相机的角度,此时场景中是一个白板。

然后翻开echarts的官网,找到案例,来个仪表盘吧。代码拷贝下来。跑起来。

为了轻易演示,我在body中创建了2个div,离别作为three和图表的容器。现实开发中图表的容器不需要显示出来的,也不需要添加到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: '营业目标',
            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();

此时看到下面页面:

要领一:CanvasTexture

three.js有一个api:CanvasTexture。能够传入一个canvas对象,用这个要领能够完成上面的使命。

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

运转结果以下,确切不清楚,和他们碰到的问题的一样。尝试把echarts绘制大点,然则这个是自适应的,致使仪表板很丑,不是设想的模样,假如是本身绘制的表格,就能够如许处理了。

要领二:getDataURL

既然echarts也是衬着canvas,看看api,应该有要领导出图片。就是下面的api,而且有可选参数,能够设置分辨率。

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)

分辨率设置为4确切清楚多了。

下面三个图离别是分辨率1,分辨率4以及要领1绘制的结果对照。

3个图区分很明显,要领2>要领1。该运用什么要领已很邃晓了。

下面是动态图片,入手下手没有贴图,然后贴上要领1生成的贴图,接着闪一下,换成要领2分辨率4生成的贴图。放大照样很清楚的。

末了问题:echarts的图表许多都是有缓冲动画的,假如也想在贴图上及时革新,可行吗。帧率能跟上吗。

悉数代码:

<!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/>{b} : {c}%"
            },
            // toolbox: {
            //     feature: {
            //         restore: {},
            //         saveAsImage: {}
            //     }
            // },
            series: [
                {
                    name: '营业目标',
                    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>

本文来自 js教程 栏目,迎接进修!

以上就是echarts生成的图表在three.js中的运用详解的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
echarts生成的图表在three.js中的运用详解_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>