Echarts anywhere in the area of precise triggering event

Echarts anywhere in the area of ​​precise triggering event

Demand Background: Click Echarts area jump page, jump area does not include grid coordinates and labels, look at the Echarts official network, to achieve the trigger event on the method , but this method can only click the mouse in a graphics will be on trigger, and this demand can not be achieved. By Baidu and view the GitHub Issue Echarts instance after multi-use getZr () method to listen to the click event for the entire canvas.

Use echartsInstance.getZr (). On ( 'click', params => {}) monitor the canvas, with echartsInstance.containPixel ( 'grid', pointInPixel) method determines whether the click position in the coordinate system inside, thereby addressing the needs.

But getZr () official documents did not explain. So will share the following two scenarios click event, 1: Click click on a graphic triggering event, 2: Click Click anywhere on the trigger event and you know where they're clicking on, easy handling of the polyline click.

A Scene One: Click on the graph to trigger the click event

1.echartsInstance.on()

Click event is triggered using the mouse to click on a graphic on the method

Graphics vertex is off line, and so the histogram columns. Polylines, axis labels, axis position within the blank will not trigger the click event.

​

Optional parameters are:

A parameter: event name eventName

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

Two parameters: query filter criteria

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

If stringrepresenting the component type. Format may be a 'mainType' or 'mainType.subType'. E.g:

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

If it is Object, may comprise one or more attributes, each attribute is optional:

  {
      <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
  }

For example: More cases of the venue 's official website

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

Three parameters: the event handler handler

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

Four parameters: context

Optional. Inside the callback function context, that is thisthe point.

2. mouse event parameters:

Click to get the location of the parameter data

Event parameters mouse event is an event attribute data of each object, the clicked position data acquired by the parameter, the chart for the click event, as the basic parameters, such as a pie chart may be another part of the additional parameter. Such as a pie have percentattributes expressed as a percentage, see the specific type of label formatter each graph callback function 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: *
}

. Scene II Click anywhere triggering event:

echartsInstance.getZr (). on ( 'click', params => {}) monitor the entire canvas click event.

Parameters params as follows:

Note that different versions of echarts parameters are not the same, this time using [email protected]

​

1. Using the parameters, click on the position to know

• Positioning the object position parameter and the target attribute properties topTarget
• When clicking on a graphic element: target object has dataIndex, seriesIndex property, you can click on that to know the graphic elements.
• When clicking an empty space in the grid: target objects is undefined, topTarget not undefined.
• Click on the axis labels: anid value "label_xx" topTarget object, xx coordinate values.
• When the position of the outer blank clicks axis: target objects and topTarget mostly undefined.

Because the official did on getZr () method to explain, we can only observe differences in parameters to achieve access to the clicked position.

Position 2.getZr () with containPixel () method of determining a given point

echartsInstance.containPixel () determines whether a given point on the designated coordinate system, or in series.

The syntax is as follows:

(
    // 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

Currently supported judgment on these coordinates and series: Grid , Polar , GEO , Series-the Map , Series-Graph , Series-PIE .

Example:

// 判断 [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]);

getZr () with containPixel () Example:

Click to determine whether the position of the grid: (this.line is echartsInstance)

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

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

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

  })

3. Click the easy handling of the polyline:

Figure discount when setting the click event, only click on break point, is not always easy clicks, you can meet axisPointer the shadow indicator for easy selection.

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]
    })

Note:

echartsInstance.convertFromPixel () method: link .

echartsInstance.getOption () method: link .