vue+F2生成折線圖的方法

更新時間：2022年04月07日 11:24:15 作者：Upward Force

這篇文章主要為大家詳細介紹了vue+F2生成折線圖的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue+F2生成折線圖的具體代碼，供大家參考，具體內(nèi)容如下

1、效果圖

2、打開命令窗口，通過 npm 安裝F2

npm install @antv/f2 --save

3、使用 import 或 require 引入F2

const F2 = require('@antv/f2');

4、在頁面上創(chuàng)建一個具備寬高的 canvas 標簽，并指定 id：

<template>
? <div class="container">
? ? <canvas id="myChart"></canvas>
? </div>
</template>

5、編寫圖表繪制代碼

<template>
? <div class="container">
? ? <canvas id="myChart"></canvas>
? </div>
</template>

<script>
const F2 = require("@antv/f2");

export default {
? name: "aaa",
? data() {
? ? return {
? ? ? chartData: [
? ? ? ? {
? ? ? ? ? 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
? ? ? ? }
? ? ? ]
? ? };
? },
? created() {},

? methods: {
? ? drawChart() {
? ? ? var _this = this;
? ? ? // Step 1: 創(chuàng)建 Chart 對象
? ? ? const chart = new F2.Chart({
? ? ? ? id: "myChart",
? ? ? ? pixelRatio: window.devicePixelRatio // 指定分辨率
? ? ? });

? ? ? // Step 2: 載入數(shù)據(jù)源
? ? ? chart.source(_this.chartData, {
? ? ? ? value: {
? ? ? ? ? tickCount: 10, // 坐標軸上刻度點的個數(shù)
? ? ? ? ? min: 50, // 手動指定value字段最小值
? ? ? ? ? max: 350 // 手動指定value字段最大值
? ? ? ? },
? ? ? ? date: {
? ? ? ? ? type: "timeCat", // 指定date字段為時間類型
? ? ? ? ? range: [0, 0.8], // 占x軸80%
? ? ? ? ? tickCount: 3 // 坐標軸上刻度點的個數(shù)
? ? ? ? }
? ? ? });

? ? ? // Step 3:使用圖形語法進行圖表的繪制
? ? ? // 注意：f2是移動端圖表庫，只有在移動端才能顯示圖例
? ? ? chart.tooltip({
? ? ? ? custom: true, // 是否自定義 tooltip 提示框
? ? ? ? showXTip: true, // 是否展示 X 軸的輔助信息
? ? ? ? showYTip: true, // 是否展示 Y 軸的輔助信息
? ? ? ? snap: true, // 是否將輔助線準確定位至數(shù)據(jù)點
? ? ? ? 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 軸連接成一條線，構(gòu)成線圖
? ? ? chart.line().position("date*value");

? ? ? // Step 4: 渲染圖表
? ? ? chart.render();
? ? }
? },

? components: {},

? mounted() {
? ? var _this = this;
? ? _this.drawChart();
? },

? computed: {},

? watch: {}
};
</script>

<style scoped>
.container {
? ? background-color: #fff;
}
#myChart {
? ? width: 100%;
? ? height: 260px;
}
</style>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: