vue中使用antv/f2 图表

图表.png

1. 安装包

npm install @antv/f2

2. 组件实现

说明：必须在onMounted生命周期中渲染数据

<!-- 组件模板 -->
<template>
  <canvas id="line"></canvas>
</template>

<script>
import { onMounted } from "vue";
import {} from "vant";
import F2 from "@antv/f2";

const data = [
  {
    time: "2016-08-08 00:00:00",
    tem: 10,
  },
  {
    time: "2016-08-08 00:10:00",
    tem: 22,
  },
  {
    time: "2016-08-08 00:30:00",
    tem: 20,
  },
  {
    time: "2016-08-09 00:35:00",
    tem: 26,
  },
  {
    time: "2016-08-09 01:00:00",
    tem: 20,
  },
  {
    time: "2016-08-09 01:20:00",
    tem: 26,
  },
  {
    time: "2016-08-10 01:40:00",
    tem: 28,
  },
  {
    time: "2016-08-10 02:00:00",
    tem: 20,
  },
  {
    time: "2016-08-10 02:20:00",
    tem: 18,
  },
];

export default {
  props: {},
  setup() {
    onMounted(() => {
      const chart = new F2.Chart({
        id: "line",
        pixelRatio: window.devicePixelRatio,
      });

      const defs = {
        time: {
          type: "timeCat",
          mask: "MM/DD",
          tickCount: 3,
          range: [0, 1],
        },
        tem: {
          tickCount: 5,
          min: 0,
          alias: "日均温度",
        },
      };
      chart.source(data, defs);
      chart.axis("time", {
        label: function label(text, index, total) {
          const textCfg = {};
          if (index === 0) {
            textCfg.textAlign = "left";
          } else if (index === total - 1) {
            textCfg.textAlign = "right";
          }
          return textCfg;
        },
      });
      chart.tooltip({
        showCrosshairs: true,
      });
      chart.line().position("time*tem").shape("smooth");
      chart.point().position("time*tem").shape("smooth").style({
        stroke: "#fff",
        lineWidth: 1,
      });
      chart.render();
    });
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
#line{
    height: 375px;
    width: 375px;
}
</style>

3. 组件使用

<template>
  <van-nav-bar title="测试页面" fixed placeholder safe-area-inset-top></van-nav-bar>
  <my-line />
</template>

<script>
import { NavBar } from "vant";
import MyLine from "../../components/example/MyLine.vue";

export default {
  components: {
    MyLine,
    [NavBar.name]: NavBar,
  },
  setup() {
    return {};
  },
  data() {
    return {};
  },

  methods: {},
};
</script>

<style lang="scss" scoped></style>

补充说明： 实例参考