时间戳

首页 > 解决方案 > 如何使用zrender和vue-echarts在条形图上注册点击

vue.js - 如何使用zrender和vue-echarts在条形图上注册点击

问题描述

我知道这里有一个类似的问题，但这更具体到 vue-echarts。在 vue-echarts github 页面上，他们声明自 4.1.0 版以来 Vue-Echarts 通过 zr: 前缀事件支持 ZRender 事件。我真的找不到关于如何在 vue 中实现这一点的文档，也不知道如何去做。我想在用户单击栏时以及当他们单击栏周围的空间时注册点击。

下面的代码仅在用户直接点击栏时记录点击。

    <v-chart :options="chartOptionsBar"
             theme="infographic"
             @click="selectBar"
             :autoresize="true"
             ref="chart">
    </v-chart>

链接的帖子为纯 js 提供了以下解决方案，但我不确定如何将其转换为 vue 可以理解的内容。getZr() 似乎不适用于 vue。

myChart.getZr().on('click', params => {
  var pointInPixel = [params.offsetX, params.offsetY];
  var pointInGrid = myChart.convertFromPixel('grid', pointInPixel);
  var category = myChart.getModel().get('xAxis')[0].data[pointInGrid[0]]
  console.log(category);
});

我尝试 npm 安装 zrender 但在尝试初始化 zrender 对象时也得到了：

./node_modules/zrender/lib/vml/graphic.js
Module not found: Error: Can't resolve '../graphic/text/parse' in '/node_modules/zrender/lib/vml'

这是一个错误，但据说已修复，所以我不确定这是否也会影响解决方案。任何帮助，将不胜感激！我目前使用 vue-echarts v5.0.0，zrender v5.0.3。

标签： vue.jsecharts

解决方案

将 ./node_modules/zrender/lib/vml/graphic.js 中的import行从：

import * as textContain from '../graphic/text/parse';

至：

import * as textContain from '../graphic/Text';

推荐阅读