Vue 2中DevExtreme Charts交互事件失效问题求助

问题1：鼠标悬停图例无响应 #

排查与修复方案 #

• 检查CSS交互限制：打开浏览器开发者工具，定位图例元素，确认是否存在pointer-events: none规则，该规则会阻断鼠标事件。若存在，移除或覆盖该CSS属性。
• 验证图例交互配置：当前<dx-legend>的hover-mode="allSeriesPoints"配置合理，但需确保<dx-chart>未全局禁用交互。可尝试显式确认图例的可见性与交互状态默认开启，无需额外关闭。
• 容器层级冲突：调整dx-viewport或page-inner的CSS属性（如z-index、overflow），避免容器元素遮挡图例，导致鼠标事件无法传递到图例组件。
• 版本兼容性检查：确认devextreme-vue版本与Vue 2兼容（Vue 2仅支持DevExtreme 23.2及更早版本），版本不匹配可能引发交互功能异常。

问题2：点击Export菜单按钮无效 #

核心原因与修复步骤 #

DevExtreme图表导出依赖第三方库，且当前文件名生成逻辑存在参数缺失问题，修复如下：

1. 安装导出依赖库
   执行命令安装必需的导出依赖：

npm install html2canvas file-saver --save

2. 修复文件名生成逻辑
   当前计算属性exportFileName要求传入title参数，但模板中未传递，导致文件名拼接异常。修改计算属性为：

computed: {
  exportFileName() {
    const title = "HSE per month"; // 可根据需求动态获取图表标题
    const today = new Date();
    const yyyy = today.getFullYear();
    const mm = String(today.getMonth() + 1).padStart(2, '0');
    const dd = String(today.getDate()).padStart(2, '0');
    return `${title} ${yyyy}-${mm}-${dd}`;
  },
}

或改为方法，在模板中传递标题：

methods: {
  getExportFileName(title) {
    const today = new Date();
    const yyyy = today.getFullYear();
    const mm = String(today.getMonth() + 1).padStart(2, '0');
    const dd = String(today.getDate()).padStart(2, '0');
    return `${title} ${yyyy}-${mm}-${dd}`;
  }
}

模板对应修改为：

<dx-export :enabled="true" :file-name="getExportFileName('HSE per month')"></dx-export>

3. 确认组件注册
   确保DxExport已在组件的components选项中正确注册（当前代码已完成此步骤，可忽略）。

内容的提问来源于stack exchange，提问作者Nadan Marenković