埋点统计

本节内容为使用标准范式图表组件库时的埋点场景应用案例。

大部分埋点统计可以通过 ECharts 提供的事件实现，这里列举一下特殊场景下的实现方案。

图表曝光

可利用 dv:afterinit 事件实现。

提示

dv:afterinit 事件触发时只是完成了图表实例的创建，等待第一次调用 chart.play() 触发 dv:afterupdate 事件时图表才会渲染出来，所以具体是使用 dv:afterinit 还是 dv:afterupdate 事件结合埋点需求进行选择。

点击出现十字光标（axisPointer）

可以利用 dv:click 事件监听画布的点击交互，并判断点击位置是否处于 Grid 组件内即可实现（因为点击交互默认会触发 axisPointer，而图表的绘制区域就是 Grid 区域）。

chart.on('dv:click', (event) => {
  const inGrid = chart
    .getECharts()
    .containPixel({ gridIndex: 0 }, [event.offsetX, event.offsetY]);

  console.log('dv:click', inGrid);
});

注意

请确保配置了 axisPointer 并可以正常展示，否则没有意义。

dataZoom 交互

对于 dataZoom 的交互可以简单分类为：

• 改变最小范围值（左侧滑块）
• 改变最大范围值（右侧滑块）
• 不改变范围大小，但改变范围区间（滑动中间部分）

可以利用 echarts 的 dataZoom 事件实现。

chart.on('dv:afterinit', () => {
  chart.getECharts().on('dataZoom', (event) => {
    console.log('dataZoom', event);

    // * 存在多个 dataZoom 组件时，可以利用 event.dataZoomId 进行区分，其与调用 chart.play() 时传递的 dataZoom.id 一致
    event.dataZoomId;

    // * 记录每次事件触发时的 event.start 与 event.end 值，将当前值与上一次值进行对比判断属于三类交互中的哪一类
  });
});