当前位置：Gxlcms > 前端框架 > echarts生成的图表在three.js中的应用详解

echarts生成的图表在three.js中的应用详解

时间：2021-07-01 10:21:17 帮助过：55人阅读

最近群里有几个人问，如何把echarts的图表贴在three.js的模型上。这个问题其实很简单，因为二者都是渲染成canvas的，直接用echarts生成的canvas当作贴图就可以了。

方法确定可行，那么我们就直接开始撸代码。

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

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

【相关课程推荐：JavaScript视频教程】 

  1. addPlane() {
  2.     var geometry = new THREE.PlaneGeometry(10,10);
  3.     var material = new THREE.MeshBasicMaterial({ 
  4.         side: THREE.DoubleSide,
  5.         // transparent:true
  6.     });
  7.     this.plane = new THREE.Mesh(geometry, material);
  8.     this.scene.add(this.plane);
  9. }

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

1.jpg

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

为了方便演示，我在body中创建了2个div，分别作为three和图表的容器。实际开发中图表的容器不需要显示出来的，也不需要添加到body中的。

  1. <div id="webgl" style="width:512px;height: 512px;float: left;"></div>
  2. <div id="echart" style="width:512px;height: 512px;margin-left: 620px;"></div>
  1. var myChart = echarts.init(document.getElementById('echart'));
  2. option = {
  3.     tooltip: {
  4.         formatter: "{a} <br/>{b} : {c}%"
  5.     },
  6.     //toolbox会在右上角生成两个功能按钮，咱们不需要，直接干掉。
  7.     // toolbox: { 
  8.     //     feature: {
  9.     //         restore: {},
  10.     //         saveAsImage: {}
  11.     //     }
  12.     // },
  13.     series: [
  14.         {
  15.             name: '业务指标',
  16.             type: 'gauge',
  17.             detail: { formatter: '{value}%' },
  18.             data: [{ value: 50, name: '完成率' }]
  19.         }
  20.     ]
  21. };
  22. option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
  23. myChart.setOption(option, true);
  24. const dom = document.getElementById("webgl");
  25. const scene = new Basescene(dom);
  26. scene.addPlane();

此时看到下面页面：

2.jpg

方法一：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 )

  1. changeTextureT(texture){
  2.     this.plane.material.map = new THREE.CanvasTexture(texture)
  3.     this.plane.material.needsUpdate = true  
  4.     var thiscancas = document.getElementById("echart").getElementsByTagName('canvas')[0]
  5.     scene.changeTextureT(thiscancas)
  6. }

运行结果如下，确实不清晰，和他们遇到的问题的一样。尝试把echarts绘制大点，但是这个是自适应的，导致仪表板很丑，不是想象的样子，如果是自己绘制的表格，就可以这样处理了。

3.jpg

方法二：getDataURL

既然echarts也是渲染canvas，看看api，应该有方法导出图片。就是下面的api，而且有可选参数，可以设置分辨率。

4.jpg

  1. changeTextureE(texture){
  2.     this.plane.material.map = new THREE.TextureLoader().load(texture)
  3.     this.plane.material.needsUpdate = true  
  4. }
  5. var texture = myChart.getDataURL({
  6.     pixelRatio: 4,
  7.     backgroundColor: '#fff'
  8. }); 
  9. scene.changeTextureE(texture)

分辨率设置为4确实清晰多了。

5.jpg

下面三个图分别是分辨率1，分辨率4以及方法1绘制的效果对比。

6.jpg7.jpg

8.jpg

3个图区别很明显，方法2>方法1。该使用什么方法已经很明白了。

下面是动态图片，开始没有贴图，然后贴上方法1生成的贴图，接着闪一下，换成方法2分辨率4生成的贴图。放大还是很清晰的。

9.gif

最后问题：echarts的图表很多都是有缓冲动画的，如果也想在贴图上实时刷新，可行吗。帧率能跟上吗。

全部代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>three.js使用Echarts贴图</title>
  8.     <script src="../js/three.js"></script>
  9.     <script src="../js/controls/OrbitControls.js"></script>
  10.     <script src="./echarts.js"></script>
  11. </head>
  12. <body>
  13.     <div id="webgl" style="width:512px;height: 512px;float: left;"></div>
  14.     <div id="echart" style="width:512px;height: 512px;margin-left: 620px;"></div>
  15.     <script>
  16.         var myChart = echarts.init(document.getElementById('echart'));
  17.         option = {
  18.             tooltip: {
  19.                 formatter: "{a} <br/>{b} : {c}%"
  20.             },
  21.             // toolbox: {
  22.             //     feature: {
  23.             //         restore: {},
  24.             //         saveAsImage: {}
  25.             //     }
  26.             // },
  27.             series: [
  28.                 {
  29.                     name: '业务指标',
  30.                     type: 'gauge',
  31.                     detail: { formatter: '{value}%' },
  32.                     data: [{ value: 50, name: '完成率' }]
  33.                 }
  34.             ]
  35.         };
  36.         option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
  37.         myChart.setOption(option, true);
  38.         class Basescene {
  39.             constructor(dom) {
  40.                 this.id = (new Date()).getTime();
  41.                 this.dom = dom;
  42.                 this.divWidth = this.dom.offsetWidth;
  43.                 this.divHeight = this.dom.offsetHeight;
  44.                 this.scene = new THREE.Scene();
  45.                 this.camera = new THREE.PerspectiveCamera(45, this.divWidth / this.divHeight, 1, 2000);
  46.                 this.renderer = new THREE.WebGLRenderer({
  47.                     alpha: true,
  48.                     antialias: true
  49.                 });
  50.                 this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
  51.                 this.init();
  52.             }
  53.             init() {
  54.                 this.camera.position.set(0, 0, 20);
  55.                 this.camera.lookAt(this.scene.position);
  56.                 this.renderer.setClearColor(0x222222);
  57.                 this.renderer.setSize(this.divWidth, this.divHeight);
  58.                 this.dom.appendChild(this.renderer.domElement);
  59.                 // this.scene.add(new THREE.AxesHelper(10));
  60.                 this.animate();
  61.                 this.addLight();
  62.                 console.log(this.scene);
  63.             }
  64.             addLight() {
  65.                 const light = new THREE.AmbientLight(0xffffff);
  66.                 this.scene.add(light);
  67.             }
  68.             render() {
  69.                 this.renderer.render(this.scene, this.camera);
  70.             }
  71.             animate = () => {
  72.                 this.request = requestAnimationFrame(this.animate);
  73.                 this.render();
  74.             }
  75.             addPlane() {
  76.                 var geometry = new THREE.PlaneGeometry(10, 10);
  77.                 var material = new THREE.MeshBasicMaterial({
  78.                     side: THREE.DoubleSide,
  79.                     // transparent:true
  80.                 });
  81.                 this.plane = new THREE.Mesh(geometry, material);
  82.                 this.scene.add(this.plane);
  83.             }
  84.             changeTextureE(texture) {
  85.                 this.plane.material.map = new THREE.TextureLoader().load(texture)
  86.                 this.plane.material.needsUpdate = true
  87.             }
  88.             changeTextureT(texture) {
  89.                 this.plane.material.map = new THREE.CanvasTexture(texture)
  90.                 this.plane.material.needsUpdate = true
  91.             }
  92.         }
  93.         const dom = document.getElementById("webgl");
  94.         const scene = new Basescene(dom);
  95.         scene.addPlane();
  96.         setTimeout(() => {
  97.             var thiscancas = document.getElementById("echart").getElementsByTagName('canvas')[0]
  98.             scene.changeTextureT(thiscancas)
  99.         }, 2000);
  100.         setTimeout(() => {
  101.             var texture = myChart.getDataURL({
  102.                 pixelRatio: 4,
  103.                 backgroundColor: '#fff'
  104.             });
  105.             scene.changeTextureE(texture)
  106.         }, 4000);
  107.     </script>
  108. </body>
  109. </html>

本文来自 js教程 栏目，欢迎学习！

以上就是echarts生成的图表在three.js中的应用详解的详细内容，更多请关注Gxlcms其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！