如何解决前端引入DataV数据大屏后报错

介绍 | DataV (网址)

问题背景:

在vue3+vite的项目中引入DataV之后 运行报错,报错示例如下

排错1

最起初了解到的解决方法,在vite.config.ts中进行datav的配置(部分人配置可解决,配置后不可解决),配置完成后仍然无法解决

​
export default defineConfig({
  //下方代码解决引入datav可视化大屏后报错
  optimizeDeps: {
    // 开发时 解决这些commonjs包转成esm包
    include: [
      "@jiaminghi/c-render",
      "@jiaminghi/c-render/lib/plugin/util",
      "@jiaminghi/charts/lib/util/index",
      "@jiaminghi/charts/lib/util",
      "@jiaminghi/charts/lib/extend/index",
      "@jiaminghi/charts",
      "@jiaminghi/color",
    ],
  },
  build: {
    // 打包时需要另外处理的commonjs规范的包
    commonjsOptions: {
      include: [
        /node_modules/, // 必须包含
      ],
    },
  },
});

​

解决思路及方法

分析报错的信息,问题是出在datav包里的:key="i" 上面 ,应该放到template标签上的Key 放到了rect标签上所导致的 手动将key的位置 换一下即可

报错信息参考第一张图

我们顺着对应的报错信息找到对应的文件去修改

应该是有两处位置需要重写一下key的位置(decoration6 , decoration3)

照上面的方法修改完之后 重新运行一下项目就没问题了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值