どこでも正確なトリガイベントのエリアでEcharts

どこでも正確なトリガイベントのエリアでEcharts

需要背景：トリガーイベントを達成するために、Echarts公式のネットワークを見て、グリッド座標とラベル含まれていないエリアをジャンプ、Echartsエリアジャンプページをクリックする方法で、この方法は、マウスをのみクリックすることができ、グラフィックスがオンになりますトリガー、およびこの要求を達成することができません。百度によるとGitHubのビューを発行し、マルチ使用後EchartsインスタンスgetZr（）メソッドをキャンバス全体のクリックイベントに耳を傾けます。

echartsInstance.containPixel（「グリッド」、pointInPixel）メソッドで使用echartsInstance.getZr（）。（「クリック」、paramsは=> {}）でキャンバスを監視し、それによってニーズに対応し、内部座標系におけるクリック位置か否かを判定する。

しかしgetZr（）の公式文書は説明しませんでした。クリックしてイベント、2をトリガーグラフィックをクリックしてください：トリガーイベントの任意の場所をクリックして、彼らは上をクリックしている場所がわから、ポリラインクリックの簡単な取り扱いをクリックしますので、次の2つのシナリオは、イベント、1をクリックし共有します。

シーンワン：クリックイベントをトリガするために、グラフをクリック

1.echartsInstance.on（）

クリックイベントは、法上のグラフィックをクリックしてマウスを使用してトリガされ

グラフィックス頂点はオフラインで、そのヒストグラム列。ポリライン、軸ラベルは、空白内の軸の位置は、クリックイベントをトリガしません。

オプションのパラメータは次のとおりです。

パラメータ：イベント名eventNameの

eventName: string,//事件名称，全小写，例如'click'，'mousemove', 'legendselected'

二つのパラメータ：クエリのフィルタ基準

query: string|Object,//可选的过滤条件，能够只在指定的组件或者元素上进行响应。可为 string 或者 Object。

もしstringコンポーネント型を表します。フォーマットは「mainType」または「mainType.subType」かもしれません。例えば：

  chart.on('click', 'series', function () {...});
  chart.on('click', 'series.line', function () {...});
  chart.on('click', 'dataZoom', function () {...});
  chart.on('click', 'xAxis.category', function () {...});

もしそうであればObject、1つ以上の属性を含むことができ、各属性はオプションです。

  {
      <mainType>Index: number // 组件 index
      <mainType>Name: string // 组件 name
      <mainType>Id: string // 组件 id
      dataIndex: number // 数据项 index
      name: string // 数据项 name
      dataType: string // 数据项 type，如关系图中的 'node', 'edge'
      element: string // 自定义系列中的 el 的 name
  }

たとえば、次のように会場のほかの例の公式サイト

  chart.setOption({
      // ...
      series: [{
          name: 'uuu'
          // ...
      }]
  });
  chart.on('mouseover', {seriesName: 'uuu'}, function () {
      // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时，此方法被回调。
  });

三つのパラメータ：イベントハンドラハンドラ

handler: Function,//(params)=>{}

四つのパラメータ：コンテキスト

オプション。コールバック関数の内部でcontext、つまりthisポイント。

2.マウスイベントパラメータ：

パラメータデータの場所を取得するにはクリックしてください

イベントパラメータのマウスイベントは、イベントが各オブジェクトの属性データでは、そのような円グラフなどの基本的なパラメータなどのパラメータによって取得クリックされた位置データ、クリックイベントのためのチャートは、追加のパラメータの他の一部であってもよいです。そのようなパイとして持つpercent属性はラベルフォーマッタ特定のタイプの各グラフのコールバック関数を参照して、百分率として表さparams。

{
    // 当前点击的图形元素所属的组件名称，
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
    seriesType: string,
    // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
    seriesIndex: number,
    // 系列名称。当 componentType 为 'series' 时有意义。
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
    // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
    // 其他大部分图表中只有一种 data，dataType 无意义。
    dataType: string,
    // 传入的数据值
    value: number|Array,
    // 数据图形的颜色。当 componentType 为 'series' 时有意义。
    color: string,
    // 用户自定义的数据。只在 graphic component 和自定义系列（custom series）
    // 中生效，如果节点定义上设置了如：{type: 'circle', info: {some: 123}}。
    info: *
}

。どこにもイベントをトリガーシーンIIクリックします。

echartsInstance.getZr（）。（ 'クリック'、paramsは=> {}）にキャンバス全体のクリックイベントを監視します。

パラメータparams次のように：

[email protected]を使用して、この時、echartsパラメータの異なるバージョンが同じではないことに注意してください

1.パラメータを使用して、知っている位置をクリックしてください

• 位置決め対象物の位置パラメータとターゲットは、プロパティ属性topTarget
• グラフィック要素をクリックすると：ターゲットオブジェクトがdataIndex、seriesIndex特性を持っている、あなたは、グラフィック要素を知っているその上でクリックすることができます。
• グリッド内の空きスペースをクリックすると：ターゲットオブジェクトをtopTarget未定義ない、未定義です。
• ANID値「label_xx」topTargetオブジェクトを、xxの座標値：軸ラベルをクリックします。
• ときに外側ブランククリック軸の位置：ターゲットオブジェクトとtopTargetほとんど未定義。

公式に説明するために、（）メソッドgetZrになかったので、我々は唯一のクリックした位置へのアクセスを実現するためのパラメータの違いを観察することができます。

containPixel（）与えられた点の決定方法と位置2.getZr（）

echartsInstance.containPixel（）は、指定された上の所与の点は座標系、または連続しているかどうかを判定する。

構文は次のとおりです。

(
    // finder 用于指示『在哪个坐标系或者系列上判断』。
    // 通常地，可以使用 index 或者 id 或者 name 来定位。
    finder: {
        seriesIndex?: number,
        seriesId?: string,
        seriesName?: string,
        geoIndex?: number,
        geoId?: string,
        geoName?: string,
        xAxisIndex?: number,
        xAxisId?: string,
        xAxisName?: string,
        yAxisIndex?: number,
        yAxisId?: string,
        yAxisName?: string,
        gridIndex?: number,
        gridId?: string
        gridName?: string
    },
    // 要被判断的点，为像素坐标值，以 echarts 实例的 dom 节点的左上角为坐标 [0, 0] 点。
    value: Array
) => boolean

：現在、これらの座標と、一連の判定サポートグリッド、極地、GEO、シリーズ-地図、シリーズ・グラフ、シリーズ-PIEを。

例：

// 判断 [23, 44] 点是否在 geoIndex 为 0 的 geo 坐标系上。
chart.containPixel('geo', [23, 44]); // 'geo' 等同于 {geoIndex: 0}
// 判断 [23, 44] 点是否在 gridId 为 'z' 的 grid 上。
chart.containPixel({gridId: 'z'}, [23, 44]);
// 判断 [23, 44] 点是否在 index 为 1，4，5 的系列上。
chart.containPixel({seriesIndex: [1, 4, 5]}, [23, 44]);
// 判断 [23, 44] 点是否在 index 为 1，4，5 的系列或者 gridName 为 'a' 的 grid 上。
chart.containPixel({seriesIndex: [1, 4, 5], gridName: 'a'}, [23, 44]);

containPixel（）の例でgetZr（）：

グリッドの位置かどうかを判断するためにクリックしてください：（this.lineがechartsInstanceです）

this.line.getZr().on('click', params => {

    let pointInPixel = [params.offsetX, params.offsetY]

    console.log(this.line.containPixel('grid', pointInPixel))

  })

3ポリラインの容易な取り扱いをクリックしてください：

クリックイベントを設定すると、図の割引は、唯一必ずしも容易でクリックすると、あなたが簡単に選択のためのシャドウインジケーターaxisPointer満たすことができず、ブレークポイントをクリックしてください。

this.line.getZr().on('click', params => {
      const pointInPixel = [params.offsetX, params.offsetY]
      // 使用 convertFromPixel方法 转换像素坐标值到逻辑坐标系上的点。获取点击位置对应的x轴数据的索引         值，借助于索引值的获取到其它的信息
      let pointInGrid = this.line.convertFromPixel({ seriesIndex: 0 }, pointInPixel)

      // x轴数据的索引值
      let xIndex = pointInGrid[0]

      // 使用getOption() 获取图表的option
      let op = this.line.getOption()

      // 获取当前点击位置要的数据
      var xData = op.series[0].data[xIndex]
    })

注意：

echartsInstance.convertFromPixel（）メソッド：リンク。

echartsInstance.getOption（）メソッド：リンク。