リッチテキスト

リッチテキストは v3.7 以降の Apache EChartsTM のシリーズ、軸、その他のコンポーネントのラベルで使用できます。これらは次のものをサポートしています。

  • テキストブロックの境界線のスタイル（背景、境界線、影など）、回転、位置を指定できます。
  • スタイル（色、フォント、幅/高さ、背景、影など）と配置は、テキストのフラグメントでカスタマイズできます。
  • イメージはアイコンまたは背景としてテキストで使用できます。
  • これらの設定を組み合わせると、簡単な表、水平ルール（hr）などの特殊効果を作成できます。

まず初めに、以下で使用される 2 つの用語の意味を明確にする必要があります。

  • テキストブロック: ラベルテキストのブロック全体。
  • テキストフラグメント: テキストブロック内のテキストの一部。

例

テキストに関するオプション

echarts には、以下を含む豊富なテキストオプションが用意されています。

  • 基本的なフォントスタイル: fontStyle、fontWeight、fontSize、fontFamily。
  • テキストの塗りつぶし: color。
  • テキストの縁取り: textBorderColor、textBorderWidth。
  • テキストの影: textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY。
  • テキストブロックまたはテキストフラグメントのボックスサイズ: lineHeight、width、height、padding。
  • テキストブロックまたはテキストフラグメントの位置揃え: align、verticalAlign。
  • テキストブロックまたはテキストフラグ
  • テキストブロックまたはテキストフラグメントの影: shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY。
  • テキストブロックの位置と回転: position、distance、rotate。

ユーザーは、rich プロパティにテキストフラグメントに定義されているスタイルを設定できます。たとえば、series-bar.label.rich

例

labelOption = {
  // Styles defined in 'rich' can be applied to some fragments
  // of text by adding some markers to those fragment, like
  // `{styleName|text content text content}`.
  // `'\n'` is the newline character.
  formatter: [
    '{a|Style "a" is applied to this fragment}',
    '{b|Style "b" is applied to this fragment}This fragment use default style{x|use style "x"}'
  ].join('\n'),

  // Styles for the whole text block are defined here:
  color: '#333',
  fontSize: 5,
  fontFamily: 'Arial',
  borderWidth: 3,
  backgroundColor: '#984455',
  padding: [3, 10, 10, 5],
  lineHeight: 20,

  // Styles for text fragments are defined here:
  rich: {
    a: {
      color: 'red',
      lineHeight: 10
    },
    b: {
      backgroundColor: {
        image: 'xxx/xxx.jpg'
      },
      height: 40
    },
    x: {
      fontSize: 18,
      fontFamily: 'Microsoft YaHei',
      borderColor: '#449933',
      borderRadius: 4
    }
    // ...
  }
};

メモ: width と height は、rich が指定されている場合にのみ機能します。

テキスト、テキストブロック、テキストフラグメントの基本スタイル

基本的なフォントスタイルは、テキストに設定できます: fontStyle、fontWeight、fontSize、fontFamily。

塗りつぶし色と線の色は、テキストに設定できます: color、textBorderColor、textBorderWidth。

ボーダースタイルと背景スタイルは、テキストブロックに設定できます: borderColor、borderWidth、backgroundColor、padding。

ボーダースタイルと背景スタイルは、テキストフラグメントにも設定できます: borderColor、borderWidth、backgroundColor、padding。

例

option = {
  series: [
    {
      type: 'scatter',
      symbolSize: 1,
      data: [
        {
          value: [0, 0],
          label: {
            show: true,
            formatter: [
              'Plain text',
              '{textBorder|textBorderColor + textBorderWidth}',
              '{textShadow|textShadowColor + textShadowBlur + textShadowOffsetX + textShadowOffsetY}',
              '{bg|backgroundColor + borderRadius + padding}',
              '{border|borderColor + borderWidth + borderRadius + padding}',
              '{shadow|shadowColor + shadowBlur + shadowOffsetX + shadowOffsetY}'
            ].join('\n'),
            backgroundColor: '#eee',
            borderColor: '#333',
            borderWidth: 2,
            borderRadius: 5,
            padding: 10,
            color: '#000',
            fontSize: 14,
            shadowBlur: 3,
            shadowColor: '#888',
            shadowOffsetX: 0,
            shadowOffsetY: 3,
            lineHeight: 30,
            rich: {
              textBorder: {
                fontSize: 20,
                textBorderColor: '#000',
                textBorderWidth: 3,
                color: '#fff'
              },
              textShadow: {
                fontSize: 16,
                textShadowBlur: 5,
                textShadowColor: '#000',
                textShadowOffsetX: 3,
                textShadowOffsetY: 3,
                color: '#fff'
              },
              bg: {
                backgroundColor: '#339911',
                color: '#fff',
                borderRadius: 15,
                padding: 5
              },
              border: {
                color: '#000',
                borderColor: '#449911',
                borderWidth: 1,
                borderRadius: 3,
                padding: 5
              },
              shadow: {
                backgroundColor: '#992233',
                padding: 5,
                color: '#fff',
                shadowBlur: 5,
                shadowColor: '#336699',
                shadowOffsetX: 6,
                shadowOffsetY: 6
              }
            }
          }
        }
      ]
    }
  ],
  xAxis: {
    show: false,
    min: -1,
    max: 1
  },
  yAxis: {
    show: false,
    min: -1,
    max: 1
  }
};
アクティブ

ラベル位置

label オプションは、bar、line、scatter などのチャートで利用できます。ラベルの位置は、label.position、label.distance で指定できます。

次の例で、position と distance オプションを変更してみましょう。

option = {
  series: [
    {
      type: 'scatter',
      symbolSize: 160,
      symbol: 'roundRect',
      data: [[1, 1]],
      label: {
        // Options: 'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
        position: 'top',
        distance: 10,

        show: true,
        formatter: ['Label Text'].join('\n'),
        backgroundColor: '#eee',
        borderColor: '#555',
        borderWidth: 2,
        borderRadius: 5,
        padding: 10,
        fontSize: 18,
        shadowBlur: 3,
        shadowColor: '#888',
        shadowOffsetX: 0,
        shadowOffsetY: 3,
        textBorderColor: '#000',
        textBorderWidth: 3,
        color: '#fff'
      }
    }
  ],
  xAxis: {
    max: 2
  },
  yAxis: {
    max: 2
  }
};
アクティブ

メモ: position のオプション値は、チャートのタイプによって異なります。また、distance はすべてのチャートでサポートされているわけではありません。詳細については、オプションドキュメント で確認できます。

ラベル回転

ラベルを回転させる必要がある場合があります。たとえば

const labelOption = {
  show: true,
  rotate: 90,
  formatter: '{c}  {name|{a}}',
  fontSize: 16,
  rich: {
    name: {}
  }
};

option = {
  xAxis: [
    {
      type: 'category',
      data: ['2012', '2013', '2014', '2015', '2016']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Forest',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390]
    },
    {
      name: 'Steppe',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290]
    }
  ]
};
アクティブ

align とverticalAlign は、このシナリオでラベルの位置を調整するために使用できます。

メモ: align と verticalAlign は最初に適用され、次に回転します。

テキストフラグメントのレイアウトと配置

レイアウトルールを理解するには、すべてのテキストフラグメントは CSS のinline-block DOM 要素として想像できます。

テキストフラグメントのコンテンツボックスサイズは、デフォルトではフォントサイズによって決まります。まれに使用されますが、width と height で直接指定することもできます。テキストフラグメントのボーダーボックスサイズは、ボーダーボックスサイズとpadding を加算して計算されます。

改行を行うのは、'\n' のみが改行文字です。

1 行に複数のテキストフラグメントが存在します。行の高さは、テキストフラグメントの最大のlineHeightによって決まります。テキストフラグメントのlineHeightは、richまたはrichの親レベルで指定できます。それ以外の場合は、テキストフラグメントのボックスサイズを使用します。

lineHeightが決定されると、テキストフラグメントの縦位置はverticalAlignによって決定できます（CSS のルールとは少し異なります）。

  • 'bottom': テキストフラグメントの下端が、行の下端にくっつきます。
  • 'top': テキストフラグメントの上端が、行の上端ににくっつきます。
  • 'middle': 行の中央です。

テキストブロックの幅は、width によって指定できます。それ以外の場合は、最長の行によって指定されます。幅が決まると、テキストフラグメントを各行に配置できます。このとき、テキストフラグメントの水平位置はalignによって決まります。

  • まず、align が 'left' のテキストフラグメントを左から右に連続して配置します。
  • 次に、align が 'right' のテキストフラグメントを右から左に連続して配置します。
  • 最後に、残りのテキストフラグメントが残り領域の中央に配置されます。

テキストフラグメント内のテキストの位置

  • align が 'center' の場合、テキストはテキストフラグメントボックスの中央に揃えられます。
  • alignが'left'の場合、テキストはテキストフラグメントボックスの左に配置されます。
  • alignが'right'の場合、テキストはテキストフラグメントボックスの右に配置されます。

効果: アイコン、水平方向のルール、タイトルブロック、単純なテーブル

例を参照

option = {
  series: [
    {
      type: 'scatter',
      data: [
        {
          value: [0, 0],
          label: {
            formatter: [
              '{tc|Center Title}{titleBg|}',
              '  Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|}  ',
              '{hr|}',
              '  xxxxx {showers|} xxxxxxxx  xxxxxxxxx  '
            ].join('\n'),
            rich: {
              titleBg: {
                align: 'right'
              }
            }
          }
        },
        {
          value: [0, 1],
          label: {
            formatter: [
              '{titleBg|Left Title}',
              '  Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|}  ',
              '{hr|}',
              '  xxxxx {showers|} xxxxxxxx  xxxxxxxxx  '
            ].join('\n')
          }
        },
        {
          value: [0, 2],
          label: {
            formatter: [
              '{titleBg|Right Title}',
              '  Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|}  ',
              '{hr|}',
              '  xxxxx {showers|} xxxxxxxx  xxxxxxxxx  '
            ].join('\n'),
            rich: {
              titleBg: {
                align: 'right'
              }
            }
          }
        }
      ],
      symbolSize: 1,
      label: {
        show: true,
        backgroundColor: '#ddd',
        borderColor: '#555',
        borderWidth: 1,
        borderRadius: 5,
        color: '#000',
        fontSize: 14,
        rich: {
          titleBg: {
            backgroundColor: '#000',
            height: 30,
            borderRadius: [5, 5, 0, 0],
            padding: [0, 10, 0, 10],
            width: '100%',
            color: '#eee'
          },
          tc: {
            align: 'center',
            color: '#eee'
          },
          hr: {
            borderColor: '#777',
            width: '100%',
            borderWidth: 0.5,
            height: 0
          },
          sunny: {
            height: 30,
            align: 'left',
            backgroundColor: {
              image:
                'https://echarts.dokyumento.jp/examples/data/asset/img/weather/sunny_128.png'
            }
          },
          cloudy: {
            height: 30,
            align: 'left',
            backgroundColor: {
              image:
                'https://echarts.dokyumento.jp/examples/data/asset/img/weather/cloudy_128.png'
            }
          },
          showers: {
            height: 30,
            align: 'left',
            backgroundColor: {
              image:
                'https://echarts.dokyumento.jp/examples/data/asset/img/weather/showers_128.png'
            }
          }
        }
      }
    }
  ],
  xAxis: {
    show: false,
    min: -1,
    max: 1
  },
  yAxis: {
    show: false,
    min: 0,
    max: 2,
    inverse: true
  }
};
アクティブ

アイコンはbackgroundColorの画像を使用して実装されます。

rich: {
    Sunny: {
        backgroundColor: {
            image: './data/asset/img/weather/sunny_128.png'
        },
        // Can only height specified, but leave width auto obtained
        // from the image, where the aspect ratio kept.
        height: 30
    }
}

水平方向のルール(HTMLの<hr>タグのような)はボーダーを使用して実装できます

rich: {
    hr: {
        borderColor: '#777',
        // width is set as '100%' to fullfill the text block.
        // Notice, the percentage is based on the content box, without
        // padding. Although it is a little different from CSS rule,
        // it is convinent in most cases.
        width: '100%',
        borderWidth: 0.5,
        height: 0
    }
}

タイトルブロックはbackgroundColorを使用して実装できます。

// Title is at left.
formatter: '{titleBg|Left Title}',
rich: {
    titleBg: {
        backgroundColor: '#000',
        height: 30,
        borderRadius: [5, 5, 0, 0],
        padding: [0, 10, 0, 10],
        width: '100%',
        color: '#eee'
    }
}

// Title is in the center of the line.
// This implementation is a little tricky, but is works
// without more complicated layout mechanism involved.
formatter: '{tc|Center Title}{titleBg|}',
rich: {
    titleBg: {
        align: 'right',
        backgroundColor: '#000',
        height: 30,
        borderRadius: [5, 5, 0, 0],
        padding: [0, 10, 0, 10],
        width: '100%',
        color: '#eee'
    }
}

異なる行の同じ列にあるテキストフラグメントに同じ幅を指定することで簡単なテーブルを実装できます。例を参照してください。

コントリビューター GitHubでこのページを編集

plainheart plainheartTSinChen TSinChenpissang pissang