echarts生成的图表怎么在three.js中使用
创始人
2024-12-17 09:41:44
0次

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

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

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

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

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中的。

var myChart = echarts.init(document.getElementById('echart'));option = {    tooltip: {        formatter: "{a} 
{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的图表很多都是有缓冲动画的,如果也想在贴图上实时刷新,可行吗。帧率能跟上吗。

全部代码:

                three.js使用Echarts贴图                
    
    

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...