echartsで生成したチャートをthree.jsで応用する詳しい説明-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

echartsで生成したチャートをthree.jsで応用する詳しい説明

angryTom

Nov 30, 2019 pm 03:20 PM

echarts

echartsで生成したチャートをthree.jsで応用する詳しい説明

最近、グループ内の数人が echarts チャートをthree.js モデルに貼り付ける方法を質問しました。どちらもキャンバスにレンダリングされ、echart によって生成されたキャンバスをテクスチャとして直接使用できるため、この問題は実際には非常に単純です。

この方法は確実に実行可能であるため、直接コーディングを開始します。

まず、3 つの基本的なシーンを構築しましょう。ここでは繰り返しません。

次に、新しい平面を作成すると、この平面に画像を貼り付けることができます。

[関連コースの推奨: 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で生成したチャートをthree.jsで応用する詳しい説明

次に、echarts の公式 Web サイトを開いてケースを見つけ、ダッシュボードを作成します。コードをコピーします。走り始めます。

デモンストレーションの便宜上、本体内に 3 つの div とチャートのコンテナーとして 2 つの div を作成しました。実際の開発ではチャートのコンテナを表示する必要はありませんし、ボディに追加する必要もありません。

<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(&#39;echart&#39;));
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();

この時点で、次のページが表示されました:

echartsで生成したチャートをthree.jsで応用する詳しい説明

方法 1: CanvasTexture

three.js API:CanvasTexture があります。 Canvas オブジェクトを渡し、このメソッドを使用して上記のタスクを完了できます。

CanvasTexture( Canvas : HTMLElement, マッピング : 定数, WrapS : 定数, WrapT : 定数, magFilter : 定数, minFilter : 定数, format : 定数, type : 定数, anisotropy : Number )

changeTextureT(texture){
    this.plane.material.map = new THREE.CanvasTexture(texture)
    this.plane.material.needsUpdate = true  
    var thiscancas = document.getElementById("echart").getElementsByTagName(&#39;canvas&#39;)[0]
    scene.changeTextureT(thiscancas)
}

## ＃実行結果は次のとおりですが、確かに不明瞭で、遭遇した問題と同じです。 echart をより大きく描画しようとしますが、これは適応的なものであり、ダッシュボードが見苦しくなり、想像したものと異なります。テーブルを自分で描画する場合は、この方法で対処できます。

echartsで生成したチャートをthree.jsで応用する詳しい説明

#方法 2: getDataURL

echart はキャンバスもレンダリングするので、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: &#39;#fff&#39;
}); 
scene.changeTextureE(texture)

解像度を 4 に設定すると、実際より鮮明になります。

#次の 3 つの図は、それぞれ解像度 1、解像度 4、および方法 1 の効果を比較したものです。 echartsで生成したチャートをthree.jsで応用する詳しい説明

echartsで生成したチャートをthree.jsで応用する詳しい説明

3 つの写真の違いは明らかです (方法 2 > 方法 1)。どの方法を使用するかはすでに明らかです。

echartsで生成したチャートをthree.jsで応用する詳しい説明

以下は動的な画像です。最初はテクスチャがありません。その後、方法 1 で生成されたテクスチャが貼り付けられ、点滅し、方法 2、解像度で生成されたテクスチャに置き換えられます。 4.拡大しても非常に鮮明です。

最後の質問: echart の多くのチャートにはバッファーアニメーションがあります。リアルタイムでマップを更新したい場合、それは可能ですか?フレームレートは維持できるでしょうか？

echartsで生成したチャートをthree.jsで応用する詳しい説明すべてのコード:

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

この記事は

js チュートリアル

列からのものです。ぜひ学習してください。

以上がechartsで生成したチャートをthree.jsで応用する詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事はCSDNで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

Python vs. JavaScript：パフォーマンスと効率の考慮事項Apr 30, 2025 am 12:08 AM

PythonとJavaScriptのパフォーマンスと効率の違いは、主に以下に反映されています。1）解釈された言語として、Pythonはゆっくりと実行されますが、開発効率が高く、迅速なプロトタイプ開発に適しています。 2）JavaScriptはブラウザ内の単一のスレッドに限定されていますが、マルチスレッドおよび非同期I/Oを使用してnode.jsのパフォーマンスを改善でき、両方とも実際のプロジェクトで利点があります。

JavaScriptの起源：その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。

舞台裏：JavaScriptをパワーする言語は何ですか？Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1）解析段階で抽象的構文ツリー（AST）を生成します。 2）ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3）実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの未来：傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

See all articles