钉钉小程序+f2/my-f2实现折线图

Upward Force

于 2020-06-30 18:10:32 发布

阅读量2.6k

点赞数 3

分类专栏：图表钉钉小程序 F2 文章标签：小程序 javascript css

本文链接：https://blog.youkuaiyun.com/qq_43884155/article/details/107044989

版权

参考文档：https://github.com/antvis/my-f2

1、效果图
在这里插入图片描述
2、钉钉小程序默认初始化出来的项目是没有package.json的，需要新增package.json后再安装依赖，使用命令行 npm init --yes 创建 package.json 文件

3、使用命令行 npm install @antv/my-f2 --save 安装依赖

4、使用自定义组件
test-my-f2.json 文件

{
   
  "usingComponents": {
   
    "f2": "@antv/my-f2"
  }
}

test-my-f2.axml 文件

<view class="f2-chart">
  <f2 onInit="onInitChart"></f2>
</view>

test-my-f2.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' }