vue3 + Echart 数据可视化

原创

已于 2024-01-18 17:08:12 修改 · 581 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #数据可视化 #vue

于 2024-01-18 16:42:16 首次发布

本文介绍了如何在Vue应用中使用npm的countup.js库实现数字的动态增长效果，并展示了如何使用ECharts库创建项目完成率的折线图。开发者可以学习如何集成和配置这两个工具来提升页面数据展示的动态性。

让数字从零开始动起来

npm i countup.js

<template>
    <div class="container">
        <span ref="num1"></span>
        <span ref="num2"></span>
        <span ref="num3"></span>
    </div>
</template>
<script setup>
import { defineProps, onMounted, ref } from 'vue'
import { CountUp } from 'countup.js'
//父级的data
//{
  //  num1: 1052.92
  //  num2: 1021.4
  //  num3: 431.72
//}
const props = defineProps({
    data: {
        type: Object,
        required: true
    }
})
const num1= ref(null)

const num2= ref(null)

const num3= ref(null)

// 数字动画
var options = {
    useEasing: true, // 使用缓和
    useGrouping: false, // 使用分组(是否显示千位分隔符,一般为 true)
    separator: ',', // 分隔器(千位分隔符,默认为',')
    decimal: '.', // 十进制(小数点符号,默认为 '.')
    decimalPlaces: 2,//小数点位数
    prefix: '', // 字首(数字的前缀,根据需要可设为 $,¥,￥ 等)
    suffix: '', // 后缀(数字的后缀 ,根据需要可设为 元,个,美元 等) 
    duration: 1.5  // 持续时间
};
// CountUp(参数一, 参数二, 参数三, 参数四, 参数五, 参