How to use the chart generated by echarts in three.js

This article will explain in detail how to use the charts generated by echarts in three.js. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

How to paste echarts's chart on three.js 's model. This problem is actually very simple, because both are rendered as canvas, and you can just use the canvas generated by echarts as a map.

The method is determined to be feasible, so let's just start playing with the code.

Let's first set up a basic scene of three, which is not repeated here.

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

AddPlane () {var geometry = new THREE.PlaneGeometry (10Power10); 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, and there is a whiteboard in the scene.

Then open the echarts website, find a case, and have a dashboard. Copy the code. Let's run.

For demonstration purposes, I created two div in body, which act as containers for three and charts, respectively. The actual development of the chart container does not need to be displayed, nor does it need to be added to body.

Var myChart = echarts.init (document.getElementById ('echart')); option = {tooltip: {formatter: "{a} {b}: {c}%"}, / / toolbox will generate two function buttons in the upper right corner, which we don't need, just kill them. / / toolbox: {/ / feature: {/ / restore: {}, / / saveAsImage: {} / /} / /}, series: [{name: 'business metrics', type: 'gauge', detail: {formatter:' {value}%'} Data: [{value: 50, name: 'completion rate'}]} 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 ()

You will see the following page:

Method 1: CanvasTexture

Three.js has an api:CanvasTexture. You can pass in a canvas object, and you can accomplish the above task with this method.

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 really not clear, just like the problems they encountered. Try to make the echarts bigger, but this is adaptive, which makes the dashboard ugly and not what it looks like. If you draw the table yourself, you can do it this way.

Method 2: getDataURL

Since echarts is also a rendering canvas, take a look at api, there should be a way to export images. This 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)

The resolution setting to 4 is really much clearer.

The following three images are the comparison of resolution 1, resolution 4 and method 1.

The difference between the three graphs is obvious, method 2 > method 1. It is clear what method to use.

The following is a dynamic picture, where there is no map at first, then paste the map generated by method 1, then flash and replace it with the map generated by method 2 resolution 4. The zoom in is still very clear.

Final question: many echarts charts have buffered animation, if you also want to refresh the map in real time, is it feasible? Can the frame rate keep up.

All codes:

Three.js uses the Echarts map var myChart = echarts.init (document.getElementById ('echart')) Option = {tooltip: {formatter: "{a} {b}: {c}%"}, / / toolbox: {/ / feature: {/ / restore: {} / / saveAsImage: {} / /} / /}, series: [{name: 'business metrics', type: 'gauge', detail: {formatter:' {value}%'} Data: [{value: 50, name: 'completion rate'}]} 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) On "echarts generated charts how to use in three.js" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.