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データのエクスポートとインポートに関する知識ポイントの簡単な分析

推薦する

mysql: [エラー] 不明なオプション '--skip-grant-tables'

MySQL データベースがエラー 1045 (28000): ユーザー 'ODBC'...

React リストバーとショッピングカートコンポーネントの使用の詳細な説明

この記事では、Reactリストバーとショッピングカートコンポーネントの具体的なコードを参考までに紹介...

vue.js ルーターのネストされたルートの実例

目次序文Vue CLI での設定基本コードVueルーターの登場ネストされたルートの設定要約する序文V...

HTML の色に関する参考資料

HTML では、色は 2 つの方法で表現されます。 1 つは、青の場合は blue のように色の名前...

MySQL 5.7.18のインストール方法とMySQLサービスの起動手順の詳細な説明

MySQL は非常に強力なリレーショナル データベースです。しかし、初心者の中には、インストールや設...

Vue3+TypeScriptは再帰メニューコンポーネントの完全な例を実装します

目次序文必要成し遂げる最初のレンダリングメニュー項目をクリックしますスタイルの区別デフォルトのハイラ...

JavaScript - Vue でのスロットの使用: スロット

目次Vue でのスロットの使用: slotスコープ付きスロット: テンプレートタグで囲む要約するVu...

MySQLストアドプロシージャにおけるカーソル(DECLARE)の原理と使い方の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャにおけるカーソル (DECLARE) ...

Xtrabackup を使用して MySQL をバックアップおよび復元する方法

目次1. バックアップ1.1 万全の準備1.2 追加の準備2 バックアップとリカバリ2.1 データの...

HTML コード作成ガイド

共通コンベンションタグ自己終了タグ。閉じる必要はありません (例: img input br hr ...

mysql8 共通テーブル式 CTE 使用例の分析

この記事では、例を使用して、MySQL 8 の共通テーブル式 (CTE) の使用方法を説明します。ご...

Dockerを使用してphabricatorをインストールする方法

ここでは Ubuntu 16.04 システムを使用しています。 dockerを使用したインストールh...

jQueryは広告の表示と非表示のアニメーションを実装します

数秒後に広告が表示されて消えることがよくあります。この機能を実装するには、JQuery フレームワー...

CSSはメッセージパネルをスライドするWebコンポーネント機能を実装します

みなさんこんにちは。私と同じように混乱している方はいらっしゃいませんか。CSS は簡単に始められます...

Linux seqコマンドの使い方の詳しい説明

01. コマンドの概要seq コマンドは整数のシーケンスを生成するために使用されます。 02. コマ...