uni-app开发了钉钉小程序并引入了my-f2
app开发
APP开发
浏览：1126 次
当使用uni app开发指甲小程序时，您需要使用antv f2图表库，以及遇到的问题和解决方案。
正式使用模式
F2支付宝小程序版本：
在项目中安装F2
npm安装@antv/my-f2--保存
使用json文件导入组件
{
“使用组件”：{
“f2”：“@antv/my-f2”
}
}
运行结果页面上报告了错误：
json文件导入组件报告错误
报告错误的不仅仅是@antv/my-f2的引入。
相反，通过在uni-app中使用components引入mycomponents的组件将报告错误。
例如，自定义测试组件：
测试自定义组件
{
“使用组件”：{
“我的测试”：“/mycomponents/my test/my test”
}
}
您可以对此进行测试，它也会报告错误。
在钉钉环境中，我曾使用json文件引入自定义组件，但从未成功。
直接从页面导入组件怎么样？
...
<脚本>
从“@antv/my-f2”导入AntvF2
导出默认值{
组件：{
AntvF2
}
}
这个错误更是令人发指，整个项目直接崩溃。
导入组件报告的错误
最终解决方案
第一
从支付宝小程序my-f2中提取相关代码，并将其集成到uni app中的用户定义组件中。
代码地址：
然后
它放在uni-app项目的mycomponents文件夹中。
如图所示：
组件存储目录
部件的最终使用
<模板>
<视图>
画布：on init=“onInitChart”：width=“300”：height=“300“><；/画布>
<脚本>
从“@/mycomponents/f2 canvas/F2Canvas”导入F2Canvas
导出默认值{
组件：｛F2Canvas｝，
方法：{
onInitChart（F2，配置）{
常量图表=新的F2.chart（配置）；
常量数据=[
｛值：63.4，城市：“纽约”，日期：“2011-10-01”｝，
｛值：62.7，城市：“阿拉斯加”，日期：“2011-10-01”｝，
｛值：72.2，城市：“奥斯汀”，日期：“2011-10-01”｝，
｛值：58，城市：“纽约”，日期：“2011-10-02”｝，
｛值：59.9，城市：“阿拉斯加”，日期：“2011-10-02”｝，
｛值：67.7，城市：“奥斯汀”，日期：“2011-10-02”｝，
｛值：53.3，城市：“纽约”，日期：“2011-10-03”｝，
｛值：59.1，城市：“阿拉斯加”，日期：“2011-10-03”｝，
｛值：69.4，城市：“奥斯汀”，日期：“2011-10-03”｝，
];
图表源（数据{
日期：{
范围：[0，1]，
类型：'timeCat'，
掩码：“MM-DD”
},
值：{
最大值：300，
tickCount:4
}
});
chart.area（）.position（'date*value'）.color（'city'）.adjust（'stack'）；
chart.line（）.position（'date*value'）.color（'city'）.adjust（'stack'）；
chart.render（）；
//注意：您需要返回图表
收益图；
}
}
}
运行效果
运行效果
