必要詳細ページにジャンプするには、echarts ツールチップの学校名をクリックする必要があります。プロジェクトは上海から ---> 特定の地区 ----> 特定の学校 (最後のレベルのツールチップでクリック イベントをバインド) このプロジェクトは、vue と echarts を使用して実装されています。echarts は新しいバージョン (^5.0.2) であり、クリック イベントをウィンドウにバインドできません。 回避策1. ツールチップを設定するenterable: true, //マウスがプロンプトフローティングレイヤーに入ることを許可します。triggeron:'click', //プロンプトボックスがトリガーされる条件。mousemove はマウスが動くとトリガーされます。click はマウスがクリックするとトリガーされます。'mousemove|click' はマウスが動くと同時にクリックするとトリガーされます。 ツールチップ: { //プロンプト ボックス コンポーネントshow: true、//プロンプト ボックス コンポーネントを表示trigger: "item"、//トリガー タイプtriggerOn: "mousemove"、//出発条件//formatter: "name:{b><br/>coordinates:{c}"、 enterable: true, //マウスがプロンプトサスペンションレイヤーに入ることを許可する showContent: true, triggerOn: "click", // ツールチップをトリガーする条件 mousemove マウスが動くとトリガー click マウスがクリックするとトリガー 'mousemove|click' マウスが動くと同時にクリックするとトリガー // confine: true, // ツールチップをチャートの領域に制限 className: "areaTool", // hideDelay: 100000, // 消失時間を遅延する formatter: (item) => { this.hookToolTip = アイテム; // 経度と緯度が長すぎるため、小数点以下 7 桁を残して桁数を切り捨てて表示する必要があります // クリック イベントをバインドする必要があります var tipHtml = ""; ヒントHtml = '<div style="width:2.5rem;height:80%;background:rgba(22,80,158,0.8);border:0.0125rem solid rgba(7,166,255,0.7)">' + '<div style="width:100%;height:0.375rem;line-height:0.375rem;border-bottom:0.025rem solid rgba(7,166,255,0.7);">' + '<i style="display:inline-block;width:0.125rem;height:0.125rem;background:#16d6ff;border-radius:0.5rem;">' + "</i>" + '<span id="btn-tooltip" style="margin-left:0.125rem;color:#fff;font-size:0.2rem;cursor:pointer">' + アイテム名 + "</span>" + "</div>" + '<div style="padding:0.1875rem;text-align: left;">' + '<p style="color:#fff;font-size:0.15rem;">' + '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' + "</i>" + 「経度」+ '<span style="color:#11ee7d;margin:0 0.075rem;">' + 項目.値[0].substr(0, 11) + "</span>" + "</p>" + '<p style="color:#fff;font-size:0.15rem;">' + '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' + "</i>" + 「緯度」+ '<span style="color:#11ee7d;margin:0 0.075rem;">' + 項目.値[1].substr(0, 11) + "</span>" + "</p>" + '<p style="color:#fff;font-size:0.15rem;">' + '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' + "</i>" + 「診察室数」+ '<span style="color:#11ee7d;margin:0 0.075rem;">' + アイテム.コンポーネントインデックス + "</span>" + 「個」+ "</p>" + '<p style="color:#fff;font-size:0.15rem;">' + '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' + "</i>" + 「プロクター」+ '<span style="color:#11ee7d;margin:0 0.075rem;">' + アイテム.コンポーネントインデックス + "</span>" + 「個」+ "</p>"; tipHtml を返します。 }, }, 2. hookToolTip変数を定義するフォーマッタの hookToolTip に値を割り当て、ID を追加し、watch を通じて DOM 要素を検出します。onclick を通じてイベントをバインドするか、addEventListerner を通じてイベントを登録できます。 時計: フックツールチップ: { ハンドラ(newVal, oldVal) { console.log(newVal, oldVal, "---------watch"); tooltipButton を document.querySelectorAll("#btn-tooltip"); //onclickイベントquerySelectorAllを登録して取得した要素は配列ですif (tooltipButton.length > 0) { ツールチップボタン[0].onclick = this.pointNameClick; } // addEventListener を通じてイベントを登録します for (let i = 0; i < tooltipButton.length; i++) { ツールチップボタン[i].addEventListener("クリック", this.chartClick); } }, // 即時: true、 // 深い: true、 }, }, 3. メソッド内にメソッドを追加する4. 完全なコードデータ(){ フックツールチップ: {}, }, 時計: フックツールチップ: { ハンドラ(newVal, oldVal) { console.log(newVal, oldVal, "---------watch"); tooltipButton を document.querySelectorAll("#btn-tooltip"); //onclickイベントquerySelectorAllを登録して取得した要素は配列ですif (tooltipButton.length > 0) { ツールチップボタン[0].onclick = this.pointNameClick; } // addEventListener を通じてイベントを登録します for (let i = 0; i < tooltipButton.length; i++) { ツールチップボタン[i].addEventListener("クリック", this.chartClick); } }, //確認するためにページに入る必要はありません//immediate: true, // 深い: true、 }, }, メソッド: { チャートクリック() { コンソール.log( this.hookToolTip、 "-------イベントリストを追加", this.hookToolTip.name ); }, }, //eチャート ツールチップ: { //プロンプト ボックス コンポーネントshow: true、//プロンプト ボックス コンポーネントを表示trigger: "item"、//トリガー タイプtriggerOn: "mousemove"、//出発条件//formatter: "name:{b><br/>coordinates:{c}"、 enterable: true, //マウスがプロンプトサスペンションレイヤーに入ることを許可する showContent: true, triggerOn: "click", // ツールチップをトリガーする条件 mousemove マウスが動くとトリガー click マウスがクリックするとトリガー 'mousemove|click' マウスが動くと同時にクリックするとトリガー // confine: true, // ツールチップをチャートの領域に制限 className: "areaTool", // hideDelay: 100000, // 消失時間を遅延する formatter: (item) => { this.hookToolTip = アイテム; console.log(item, "-----", this.hookToolTip); // 経度と緯度が長すぎるため、小数点以下 7 桁を残して桁数を切り捨てて表示する必要があります // クリック イベントをバインドする必要があります var tipHtml = ""; ヒントHtml = '<div style="width:2.5rem;height:80%;background:rgba(22,80,158,0.8);border:0.0125rem solid rgba(7,166,255,0.7)">' + '<div style="width:100%;height:0.375rem;line-height:0.375rem;border-bottom:0.025rem solid rgba(7,166,255,0.7);">' + '<i style="display:inline-block;width:0.125rem;height:0.125rem;background:#16d6ff;border-radius:0.5rem;">' + "</i>" + '<span id="btn-tooltip" style="margin-left:0.125rem;color:#fff;font-size:0.2rem;cursor:pointer" onclick="chartClick">' + アイテム名 + "</span>" + "</div>" + '<div style="padding:0.1875rem;text-align: left;">' + '<p style="color:#fff;font-size:0.15rem;">' + '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' + "</i>" + 「経度」+ '<span style="color:#11ee7d;margin:0 0.075rem;">' + 項目.値[0].substr(0, 11) + "</span>" + "</p>" + '<p style="color:#fff;font-size:0.15rem;">' + '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' + "</i>" + 「緯度」+ '<span style="color:#11ee7d;margin:0 0.075rem;">' + 項目.値[1].substr(0, 11) + "</span>" + "</p>" + '<p style="color:#fff;font-size:0.15rem;">' + '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' + "</i>" + 「診察室数」+ '<span style="color:#11ee7d;margin:0 0.075rem;">' + アイテム.コンポーネントインデックス + "</span>" + 「個」+ "</p>" + '<p style="color:#fff;font-size:0.15rem;">' + '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' + "</i>" + 「プロクター」+ '<span style="color:#11ee7d;margin:0 0.075rem;">' + アイテム.コンポーネントインデックス + "</span>" + 「個」+ "</p>"; tipHtml を返します。 }, }, Vue が echarts ツールチップにクリック イベント ケースを追加する方法についてはこれで終わりです。Vue 関連のコンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
この記事では、ドラッグ可能なプログレスバーを実装するためのJavaScriptの具体的なコードを参考...
元の構成: http { ...... limit_conn_zone $binary_remote...
この記事の例では、ネイティブJSカプセル化vueタブ切り替えの具体的なコードを参考までに共有していま...
問題は、誰もが「メモリ リーク」について知っていることです。一般的なシナリオはいくつかあります。クロ...
ajax の parsererror エラー (バックグラウンドからフロントエンドに送信される js...
目次1. インストールと導入2. PDFファイルをパッケージ化してエクスポートする方法構成の詳細PD...
1. 監視アーキテクチャ図 2. 実装のアイデアJenkins に Metrics プラグインをイン...
mysqlは時間のかかるSQLを記録しますMySQL は、最適化と分析のために、時間のかかる SQL...
目次1. 何ですか2. 使用数値列挙文字列列挙異種列挙自然3. 応用シナリオ要約する1. 何ですか列...
背景:以前、コンテナ内のホストが提供する Redis サービスにアクセスする必要があるプロジェクトを...
今回は、コンピューターや携帯電話用の rtmp ライブ ブロードキャスト サーバーを設定し、ライブ ...
この記事では主に、Tencent TIM インスタント メッセージングを Vue と統合する方法を紹...
主な違い: 1. タイプSQL データベースは主にリレーショナル データベース (RDBMS) とし...
背景プロジェクト開発プロセスでは、前のページから次のページにジャンプする必要に迫られることがよくあり...
この記事では、CSSの透明な境界線の背景クリップの素晴らしい使い方を主に紹介し、みんなと共有し、自分...