Echarts 凡例コンポーネントのプロパティとソース コード

Echarts 凡例コンポーネントのプロパティとソース コード

凡例コンポーネントは、ECharts でよく使用されるコンポーネントです。シリーズ マーカーの名前を異なる色で区別し、データとグラフの関係を表現するために使用されます。操作時に、ユーザーは凡例をクリックして、どのデータ シリーズを表示するか、または表示しないかを制御できます。

ECharts 3.x/ECharts 4.x では、単一の ECharts インスタンスに複数の凡例コンポーネントを含めることができるため、複数の凡例のレイアウトが容易になります。凡例が多すぎる場合は、スクロールしてページをめくることができます。

EChartsでは、凡例コンポーネントのプロパティは表に表示されます。

凡例コンポーネントのプロパティの概略図を図に示します

特定の年の蒸発量、降水量、最低気温、最高気温のデータを使用して列マッシュアップ チャートを描画し、チャートの凡例コンポーネントを構成します。
凡例が多すぎる場合や凡例が長すぎる場合は、垂直スクロール凡例または水平スクロール凡例を使用できます。legend.type プロパティを参照してください。このとき、type 属性の値を「scroll」に設定します。これは、凡例が 1 行のみで表示され、余分な部分は図に示すように自動的にスクロール効果として表示されることを意味します。

図からわかるように、右上のスライドアイコンは凡例のスクロールアイコンであり、凡例をスクロール効果で表示できます。

凡例のソースコードは次のとおりです。

<html>

<ヘッド>
    <メタ文字セット="utf-8">
    <!--ECharts スクリプトの紹介-->
    <script src="js/echarts.js"></script>
</head>

<本文>
    <!---ECharts のサイズ (幅と高さ) を持つ DOM を準備します -->
    <div id="main" style="幅: 600px; 高さ: 600px"></div>
    <script type="text/javascript">
        //準備された DOM に基づいて、ECharts チャートを初期化します。var myChart = echarts.init(document.getElementById("main"));
        //チャートの設定項目とデータを指定する var option = {
            color: ["red", 'green', 'blue', 'grey'], // 独自の定義済み色を使用する legend: {
                方向: '水平'、// '垂直'
                x: '右', //'中央'|'左'|{数値},
                y: '上'、//'中央'|'下'|{数値}
                背景色: '#eee',
                境界線の色: 'rgba(178,34,34,0.8)',
                境界線の幅: 4,
                パディング: 10,
                アイテムギャップ: 20、テキストスタイル: { 色: '赤' }、
            },
            xAxis: { //x軸座標系データを設定します: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
            },
            yAxis: [ //y軸の座標系を設定します { //最初のy軸を設定します type: 'value',
                    axisLabel: { フォーマッタ: '{value} ml' }
                },
                { //2番目のy軸のタイプを設定します: 'value',
                    axisLabel: { フォーマッタ: '{value} °C' },
                    分割線: { 表示: false }
                }
            ]、
            series: [ //データシリーズを構成する { //データシリーズ1を設定する
                    名前: '特定の年の蒸発量'、タイプ: 'バー'、
                    データ: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
                },
                { //データ系列2を設定
                    名前: '特定の年の降水量'、スムーズ: true、
                    タイプ: 'line'、yAxisIndex: 1、データ: [11, 11, 15, 13, 12, 13, 10]
                },
                { //データ系列3を設定
                    名前: '特定の年の最高気温'、タイプ: 'バー'、
                    データ: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]
                },
                { //データ系列4を設定
                    名前: '特定の年の最低気温'、スムーズ: true、
                    タイプ: 'line'、yAxisIndex: 1、データ: [-2, 1, 2, 5, 3, 2, 0]
                }
            ]
        };
        // 指定した構成項目とデータを使用してチャートを表示します。myChart.setOption(option); 
    </スクリプト>
</本文>

</html>

要約する

Echarts 凡例コンポーネントのプロパティとソースコードに関するこの記事はこれで終わりです。Echarts 凡例コンポーネントの関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • echarts で凡例の色とマップの背景色を設定する例
  • Pyechartsは凡例と各セクション間の位置と間隔を調整します
  • echartsでは、凡例と座標系グリッドが左右のレイアウト例を実現します
  • Python pyecharts に基づく複数の凡例コード解析の実装

<<:  バッチモードでtopコマンドを実行する方法

>>:  MySQLデータのエクスポートとインポートに関する知識ポイントの簡単な分析

推薦する

vue+antv でレーダーチャートを実装するためのサンプルコード

1. 依存関係をダウンロードするnpm インストール @antv/データセットnpm インストール ...

MySQL グラフィカル管理ツール Navicat のインストール手順

目次序文1. 全員にインストールパッケージを用意する2. Navicatをインストールし、Navic...

CentOS8 jdk8 / java8 のインストールチュートリアル(推奨)

序文最初はCentOS8でwgetを使ってダウンロードし、解凍して環境変数を設定するつもりだったので...

HTML a タグの href 属性を使用して相対パスと絶対パスを指定する方法

実際のWeb開発では、画像の挿入やCSSファイルなどすべてパスが必要となります。ファイルパスを誤って...

Jenkins でユーザー ロールの権限を設定する方法

Jenkinsのユーザーロール権限の設定には、ロール戦略プラグインのインストールが必要です。 1.ロ...

linuxdeployqt を使用して Ubuntu で Qt プログラムをパッケージ化する問題を解決する

いくつかの Qt インターフェース プログラムを作成しましたが、Qt 環境がインストールされていない...

MySQL 上級学習ノート (パート 3): MySQL 論理アーキテクチャの紹介、MySQL ストレージ エンジンの詳細な説明

MySQL 論理アーキテクチャの概要他のデータベースと比較すると、MySQL は、そのアーキテクチャ...

CentOS の環境変数と設定ファイルの詳細な説明

序文CentOS 環境変数設定ファイル システムは階層型システムであり、他のマルチユーザー アプリケ...

CD コマンドを使わずに Linux でディレクトリ/フォルダに入る方法

ご存知のとおり、cd コマンドがないと、Linux でディレクトリを切り替えることはできません。それ...

VMware Workstation Pro 16 グラフィックチュートリアル (CentOS8 仮想マシン クラスタの構築)

目次準備VMware Workstation Pro 16 をインストールするLinux仮想マシンの...

ウェブページで CSS スタイルを適用するさまざまな形式の概要

1. インライン スタイル (<body></body> 内に配置されます)...

Linux における「/」と「~」の違いの詳細な説明

「/」はルートディレクトリ、「~」はホームディレクトリです。 Linux ストレージはツリー状にマウ...

Linuxでのcrontabの使い方と注意点の詳しい説明

Crontab は定期的な実行を設定するために使用されるコマンドです。そのデーモン プロセスは cr...

MySQLのネストされたトランザクションで発生する問題

MySQL はネストされたトランザクションをサポートしていますが、それを実行する人は多くありません....

Linux で測位バックグラウンド サービスが時々クラッシュする問題の解決方法

問題の説明最近のバックグラウンドサービスでは、特定の命令の要求データをディスクに保存する新しい機能が...