在使用 uni-app 开发钉钉小程序时，想使用 antv f2 图表库，其中遇到的问题和解决方式。
官方提供的使用方式
F2 的支付宝小程序版本：
https://github.com/antvis/my-f2
项目中安装F2
npm install @antv/my-f2 --save
使用json文件，引入组件
{
"usingComponents": {
"f2": "@antv/my-f2"
}
}
运行结果 页面报错：
json文件引入组件 报错
不是单单引入@antv/my-f2 会报错。
而是在uni-app中通过 usingComponents 引入mycomponents下的组件都会报错。
如，自定义一个测试组件：
测试自定义组件
{
"usingComponents": {
"my-test": "/mycomponents/my-test/my-test"
}
}
这个你们可以测试下，一样会报错。
反正在钉钉环境下，我使用 json文件的方式 来引入自定义组件，就没有成功过。
如果页面中直接 import 导入组件行不行呢？
...
<script>
import AntvF2 from '@antv/my-f2'
export default {
components: {
AntvF2
}
}
</script>
这个错得更离谱，直接整个项目崩了。
import导入组件 报错
最终解决方式
首先
把支付宝小程序my-f2 中相关的代码提取出来，整合成uni-app中的自定义组件。
代码地址：https://github.com/yiPian/f2-canvas-to-dd
然后
放置在uni-app项目里面的 mycomponents 文件夹中。
如图：
组件存放目录
最后使用组件
<template>
<view>
<f2-canvas :on-init="onInitChart" :width="300" :height="300"></f2-canvas>
</view>
</template>
<script>
import F2Canvas from '@/mycomponents/f2-canvas/f2-canvas'
export default {
components: { F2Canvas },
methods: {
onInitChart(F2, config) {
const chart = new F2.Chart(config);
const data = [
{ value: 63.4, city: 'New York', date: '2011-10-01' },
{ value: 62.7, city: 'Alaska', date: '2011-10-01' },
{ value: 72.2, city: 'Austin', date: '2011-10-01' },
{ value: 58, city: 'New York', date: '2011-10-02' },
{ value: 59.9, city: 'Alaska', date: '2011-10-02' },
{ value: 67.7, city: 'Austin', date: '2011-10-02' },
{ value: 53.3, city: 'New York', date: '2011-10-03' },
{ value: 59.1, city: 'Alaska', date: '2011-10-03' },
{ value: 69.4, city: 'Austin', date: '2011-10-03' },
];
chart.source(data, {
date: {
range: [0, 1],
type: 'timeCat',
mask: 'MM-DD'
},
value: {
max: 300,
tickCount: 4
}
});
chart.area().position('date*value').color('city').adjust('stack');
chart.line().position('date*value').color('city').adjust('stack');
chart.render();
// 注意：需要把chart return 出来
return chart;
}
}
}
</script>
运行效果
运行效果
