微信小程序引入echarts图表失败

Question

[] [summer-compiler] Couldn't found the '../../Components/ec-canvas/ec-canvas.json' file relative to 'pages/Huawei_LOT'
Error: [summer-compiler] Couldn't found the '../../Components/ec-canvas/ec-canvas.json' file relative to 'pages/Huawei_LOT'
at AppConf.loadComp (F:\微信小程序开发工具\微信web开发者工具\code\package.nw\js\common\miniprogram-builder\modules\corecompiler\summer\graph\appconf.js:2:5017)
at async a (F:\微信小程序开发工具\微信web开发者工具\code\package.nw\js\common\miniprogram-builder\modules\corecompiler\summer\graph\appconf.js:2:4654)
at async AppConf.loadPage (F:\微信小程序开发工具\微信web开发者工具\code\package.nw\js\common\miniprogram-builder\modules\corecompiler\summer\graph\appconf.js:2:4751)
at async F:\微信小程序开发工具\微信web开发者工具\code\package.nw\js\common\miniprogram-builder\modules\corecompiler\summer\graph\appconf.js:2:3168
at async Recorder.run (F:\微信小程序开发工具\微信web开发者工具\code\package.nw\js\common\miniprogram-builder\utils\progressRecorder.js:2:1072)
at async AppConf.load (F:\微信小程序开发工具\微信web开发者工具\code\package.nw\js\common\miniprogram-builder\modules\corecompiler\summer\graph\appconf.js:2:3020)
at async AppConf.build (F:\微信小程序开发工具\微信web开发者工具\code\package.nw\js\common\miniprogram-builder\modules\corecompiler\summer\graph\baseconf.js:2:218)
at async AppConf.getConf (F:\微信小程序开发工具\微信web开发者工具\code\package.nw\js\common\miniprogram-builder\modules\corecompiler\summer\graph\appconf.js:2:745)
at async AppGraph.getConf (F:\微信小程序开发工具\微信web开发者工具\code\package.nw\js\common\miniprogram-builder\modules\corecompiler\summer\graph\appgraph.js:2:843)
at async SummerCompiler.getConf (F:\微信小程序开发工具\微信web开发者工具\code\package.nw\js\common\miniprogram-builder\modules\corecompiler\summer\summer.js:2:5276)(env: Windows,mp,1.06.2412050; lib: 3.8.2)

Answer 1

让 “紫雾凌寒” 来帮你回答,本回答结合 DeepSeek

如果还有问题，请评论或点击头像私信，如果有帮助到您, 请关注、采纳、点赞

1. 关键点分析：
   - 报错信息表明在微信小程序中引入echarts图表时，找不到../../Components/ec - canvas/ec - canvas.json文件。这意味着文件路径设置可能存在问题，导致微信小程序编译器无法找到该配置文件。
2. 解决方案：
   - 首先，确认ec - canvas.json文件的实际存放路径是否正确。如果文件路径中有相对路径，要确保相对于小程序的根目录是正确的。
   - 例如，若ec - canvas.json文件存放在pages/components/ec - canvas目录下，那么在引入时路径应该类似这样：
   • 在页面的wxml文件中：
     xml <ec - canvas id="mychart - bar" canvas - id="mychart - bar - canvas" ec="{{ ec }}"></ec - canvas>
   • 在页面的js文件中：
     javascript const app = getApp() Page({ data: { ec: { onInit: (canvas, width, height) => { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); const option = { // 这里填写echarts的配置选项 xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; chart.setOption(option); return chart; } } }, onLoad: function () { const that = this; const query = wx.createSelectorQuery().in(this); query.select('#mychart - bar - canvas').fields({ node: true, size: true }, (res) => { that.setData({ ec: { ...that.data.ec, canvasId: res.node.id, width: res.width, height: res.height } }); }).exec(); } })
3. 不同解决方案的优缺点：
   - 方案一：检查文件路径
   • 优点：简单直接，如果是路径错误导致的问题，能快速定位并解决。
   • 缺点：如果文件路径复杂且嵌套较多，可能需要花费一些时间仔细核对。
   • 方案二：重新创建组件目录
   • 优点：可以彻底解决因组件目录相关问题导致的找不到文件情况，确保文件和目录结构清晰。
   • 缺点：可能需要重新配置相关的引入路径和依赖关系，工作量相对较大。
4. 总结：
   - 微信小程序引入echarts图表失败且出现找不到配置文件的错误，主要是文件路径设置问题。通过仔细检查文件路径是否正确，以及按照正确的方式在页面中引入和配置echarts，可以解决该问题。如果仍然存在问题，可以考虑重新梳理组件目录结构来确保文件的正确引用。

希望以上解答对您有所帮助。如果您有任何疑问，欢迎在评论区提出。