最近、同僚が作成した Web ページを引き継いだところ、echarts を使用してさまざまなグラフを描画していることがわかりました。プロンプト ボックスが完全に表示されないことと、一部のデータが常に不完全に表示されることの 2 つの問題があります。絵を描くとき。後者は div 幅の問題です。。。言葉が出ないので、前の質問について話して記録しましょう。
ツールチップコンポーネントの紹介
一般に、echarts のツールチップ コンポーネントは直接使用されます。
tooltip: { show: true,//プロンプト ボックスを表示するかどうかshowContent: true, enterable: true,//マウスがプロンプト ボックスのフローティング レイヤーに入ることができるかどうか。デフォルトは false です。リンクやボタンの追加などの詳細を true に設定できます。trigger: 'item', //オプション、円グラフと散布図に項目を使用、ヒストグラムと折れ線グラフに軸を使用、なしは何もトリガーしません confine: true, //ツールヒント ボックスをグラフの領域に制限するかどうか。この構成は、チャートの外層の dom が「overflow: hidden」に設定されている場合、またはモバイル端末の狭い画面によりツールチップが外界を超えて切り詰められる場合に、より便利です。formatter: '{a} {b}:{c} {d}%',//プロンプト ボックスのフローティング レイヤー コンテンツ フォーマッタは、文字列テンプレートとコールバック関数の 2 つの形式をサポートします。textStyle: {//プロンプト ボックスのテキスト スタイルを設定しますcolor:'red', //color fontSize:'18' //フォント サイズ} },
問題現象
上に示すように、ツールチップは端に半分だけ表示されます。
解決
位置などを考え始めたのですが、ドキュメントを見てみると、実は
ツールチップの confine 属性を設定するのは非常に簡単であることが分かりました 公式サイトの紹介: confine: ツールチップの枠を制限するかどうかチャートの領域。
増加後は、おそらく次のようになります。
エッジ上のデータ ポイントのプロンプト ボックス表示は常にキャンバス内に表示されます。
