vue+F2生成折線圖的方法
更新時(shí)間：2022年04月07日 11:24:15 作者：Upward Force
這篇文章主要為大家詳細(xì)介紹了vue+F2生成折線圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue+F2生成折線圖的具體代碼，供大家參考，具體內(nèi)容如下
1、效果圖
2、打開(kāi)命令窗口，通過(guò) npm 安裝F2
npm install @antv/f2 --save
3、使用 import 或 require 引入F2
const F2 = require('@antv/f2');4、在頁(yè)面上創(chuàng)建一個(gè)具備寬高的 canvas 標(biāo)簽，并指定 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 對(duì)象
? ? ? const chart = new F2.Chart({
? ? ? ? id: "myChart",
? ? ? ? pixelRatio: window.devicePixelRatio // 指定分辨率
? ? ? });
? ? ? // Step 2: 載入數(shù)據(jù)源
? ? ? chart.source(_this.chartData, {
? ? ? ? value: {
? ? ? ? ? tickCount: 10, // 坐標(biāo)軸上刻度點(diǎn)的個(gè)數(shù)
? ? ? ? ? min: 50, // 手動(dòng)指定value字段最小值
? ? ? ? ? max: 350 // 手動(dòng)指定value字段最大值
? ? ? ? },
? ? ? ? date: {
? ? ? ? ? type: "timeCat", // 指定date字段為時(shí)間類型
? ? ? ? ? range: [0, 0.8], // 占x軸80%
? ? ? ? ? tickCount: 3 // 坐標(biāo)軸上刻度點(diǎn)的個(gè)數(shù)
? ? ? ? }
? ? ? });
? ? ? // Step 3:使用圖形語(yǔ)法進(jìn)行圖表的繪制
? ? ? // 注意：f2是移動(dòng)端圖表庫(kù)，只有在移動(dòng)端才能顯示圖例
? ? ? chart.tooltip({
? ? ? ? custom: true, // 是否自定義 tooltip 提示框
? ? ? ? showXTip: true, // 是否展示 X 軸的輔助信息
? ? ? ? showYTip: true, // 是否展示 Y 軸的輔助信息
? ? ? ? snap: true, // 是否將輔助線準(zhǔn)確定位至數(shù)據(jù)點(diǎn)
? ? ? ? crosshairsType: "xy", // 輔助線的種類
? ? ? ? crosshairsStyle: {
? ? ? ? ? // 配置輔助線的樣式
? ? ? ? ? lineDash: [2], // 點(diǎn)線的密度
? ? ? ? ? stroke: "rgba(255, 0, 0, 0.25)",
? ? ? ? ? lineWidth: 2
? ? ? ? }
? ? ? });
? ? ? // 坐標(biāo)軸配置（此處是為date對(duì)應(yīng)的坐標(biāo)軸進(jìn)行配置）
? ? ? chart.axis("date", {
? ? ? ? label: function label(text, index, total) {
? ? ? ? ? const textCfg = {
? ? ? ? ? ? textAlign: "center"
? ? ? ? ? };
? ? ? ? ? // 第一個(gè)點(diǎn)左對(duì)齊，最后一個(gè)點(diǎn)右對(duì)齊，其余居中，只有一個(gè)點(diǎn)時(shí)左對(duì)齊
? ? ? ? ? if (index === 0) {
? ? ? ? ? ? textCfg.textAlign = "left";
? ? ? ? ? } else if (index === total - 1) {
? ? ? ? ? ? textCfg.textAlign = "right";
? ? ? ? ? }
? ? ? ? ? textCfg.text = "day: " + text; // textCfg.text 支持文本格式化處理
? ? ? ? ? return textCfg;
? ? ? ? }
? ? ? });
? ? ? // 點(diǎn)按照 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>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
利用Dectorator分模塊存儲(chǔ)Vuex狀態(tài)的實(shí)現(xiàn)
這篇文章主要介紹了利用Dectorator分模塊存儲(chǔ)Vuex狀態(tài)的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
Vue實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)計(jì)算器
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
隨著前端的項(xiàng)目的越來(lái)越復(fù)雜,出現(xiàn)了一堆概念來(lái)降低開(kāi)發(fā)的復(fù)雜性,單向數(shù)據(jù)流就是其中一個(gè),下面這篇文章主要給大家介紹了關(guān)于vue單向數(shù)據(jù)流的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
Vue設(shè)置別名聯(lián)想路徑即@/生效的方法
這篇文章主要給大家介紹了Vue設(shè)置別名聯(lián)想路徑即@/生效的方法,文中有詳細(xì)的代碼示例和圖文講解,具有一定的參考價(jià)值,需要的朋友可以參考下2023-11-11
Vue.js實(shí)現(xiàn)一個(gè)自定義分頁(yè)組件vue-paginaiton
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)一個(gè)自定義分頁(yè)組件vue-paginaiton的具體代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
關(guān)于Vue父子組件傳參和回調(diào)函數(shù)的使用
這篇文章主要介紹了關(guān)于Vue父子組件傳參和回調(diào)函數(shù)的使用,我們將某段代碼封裝成一個(gè)組件，而這個(gè)組件又在另一個(gè)組件中引入，而引入該封裝的組件的文件叫做父組件，被引入的組件叫做子組件,需要的朋友可以參考下2023-05-05
vue中調(diào)接口的方式詳解this.$api、直接調(diào)用、axios
這篇文章主要介紹了vue中調(diào)接口的方式：this.$api、直接調(diào)用、axios,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-11-11
vue使用neovis操作neo4j圖形數(shù)據(jù)庫(kù)及優(yōu)缺點(diǎn)
這篇文章主要介紹了vue使用neovis操作neo4j圖形數(shù)據(jù)庫(kù),本文給大家介紹了與常規(guī)做法的優(yōu)缺點(diǎn)對(duì)比及使用技巧，對(duì)vue?neo4j圖形數(shù)據(jù)庫(kù)相關(guān)知識(shí)感興趣的朋友一起看看吧2022-02-02
解決vue項(xiàng)目獲取dom元素寬高總是不準(zhǔn)確問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目獲取dom元素寬高總是不準(zhǔn)確問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了Vue 原生實(shí)現(xiàn)右鍵菜單組件功能，本文給大家擴(kuò)展知識(shí)點(diǎn)vue點(diǎn)擊菜單以外區(qū)域，隱藏菜單操作，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-12-12