最近做钉钉小程序,需要用图表,上网找了一圈,推荐用阿里的antv-f2。
我用的是原生的开发工具,我通过命令npm install @antv/my-f2安装好了,然后根据官网文档写好了,编译的时候提示找不到包。
解决办法如下:
把包先uninstall,之后通过原生工具安装就能正常的使用了
不知道你们会不会也会遇到这个问题,也许就我这边有这个问题,就简单记录下,希望能给遇到同样问题的你提供一点点帮助,要不遇到就更好啦~
—分割线—
语雀文档: https://www.yuque.com/antv/f2/intro
图表例子:https://antv-f2.gitee.io/zh/examples/pie/basic
说一下具体步骤,语雀里面也有链接查看。
- 通过开发工具安装@antv/my-f2,在运行依赖输入框输入@antv/my-f2,回车,等待一会,安装完成。
- 打开需要展示图表页面的json文件(不是根目录的json文件),引入组件。
{
"usingComponents": {
"f-canvas": "@antv/my-f2"
}
}
- 打开.axml文件,使用组件
<f-canvas onInit="onInitChart"></f-canvas>
- 打开js文件,实例化组件。
Page({
data: {},
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;
}
});
5.打开.acss设置样式
.f2-chart {
width: 100%;
height: 500rpx;
}
ok~了,具体的设置查看api文档,或者参考例子的代码。