钉钉小程序使用f2绘制折线图-CSDN博客

本文链接：https://blog.csdn.net/q879936814/article/details/112566597

博客展示了小程序的效果图，并提及了实现代码，还给出参考地址，聚焦于小程序相关信息技术内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述
实现代码

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

//js
  onInitChart(F2, config) {
    const data = [{
      date: '2017-06-05',
      value: 116
    },
    {
      date: '2017-06-06',
      value: 129
    },
    {
      date: '2017-06-07',
      value: 135
    },
    {
      date: '2017-06-08',
      value: 86
    },
    {
      date: '2017-06-09',
      value: 73
    },
    {
      date: '2017-06-10',
      value: 85
    },
    {
      date: '2017-06-11',
      value: 73
    },
    {
      date: '2017-06-12',
      value: 68
    },
    {
      date: '2017-06-13',
      value: 92
    },
    {
      date: '2017-06-14',
      value: 130
    },
    {
      date: '2017-06-15',
      value: 245
    },
    {
      date: '2017-06-16',
      value: 139
    },
    {
      date: '2017-06-17',
      value: 115
    },
    {
      date: '2017-06-18',
      value: 111
    },
    {
      date: '2017-06-19',
      value: 309
    },
    {
      date: '2017-06-20',
      value: 206
    },
    {
      date: '2017-06-21',
      value: 137
    },
    {
      date: '2017-06-22',
      value: 128
    },
    {
      date: '2017-06-23',
      value: 85
    },
    {
      date: '2017-06-24',
      value: 94
    }];

    // Step 1: 创建 Chart 对象
    const chart = new F2.Chart(config);

    // Step 2: 载入数据源
    chart.source(data, {
      value: {
        tickCount: 10,  // 坐标轴上刻度点的个数
        min: 50,    // 手动指定value字段最小值
        max: 350    // 手动指定value字段最大值
      },
      date: {
        type: 'timeCat',    // 指定date字段为时间类型
        range: [0, 1],    // 占x轴80%
        tickCount: 3   // 坐标轴上刻度点的个数
      }
    });

    // Step 3:使用图形语法进行图表的绘制
    // 注意：f2是移动端图表库，只有在移动端才能显示图例
    chart.tooltip({
      custom: true,   // 是否自定义 tooltip 提示框
      // showXTip: true, // 是否展示 X 轴的辅助信息
      // showYTip: true, // 是否展示 Y 轴的辅助信息
      snap: true, // 是否将辅助线准确定位至数据点
      crosshairsType: 'xy',   // 辅助线的种类
      crosshairsStyle: {  // 配置辅助线的样式
        lineDash: [2],  // 点线的密度
        stroke: 'rgba(255, 0, 0, 0.25)',
        lineWidth: 2
      }
    });

    // 坐标轴配置（此处是为date对应的坐标轴进行配置）
    chart.axis('date', {
      label: function label(text, index, total) {
        const textCfg = {
          textAlign: 'center'
        };
        // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐
        if (index === 0) {
          textCfg.textAlign = 'left';
        } else if (index === total - 1) {
          textCfg.textAlign = 'right';
        }
        textCfg.text = 'day: ' + text;  // textCfg.text 支持文本格式化处理
        return textCfg;
      }
    });
    // 点按照 x 轴连接成一条线，构成线图
    chart.line().position('date*value');

    // Step 4: 渲染图表
    chart.render();
    // 注意：需要把chart return 出来
    return chart;
  },

//acss
.f2-chart {
  width: 100%;
  height: 500rpx;
}

参考地址