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 を応援していただければ幸いです。

以下もご興味があるかもしれません: