vue3 + Echart 数据可视化

让数字从零开始动起来

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(参数一, 参数二, 参数三, 参数四, 参数五, 参数六)
// 参数一: 数字所在容器
// 参数二: 数字开始增长前的默认值(起始值),一般从 0 开始增长
// 参数三: 数字增长后的最终值,该值一般通过异步请求获取
// 参数四: 数字小数点后保留的位数
// 参数五: 数字增长特效的时间,此处为3秒
// 参数六: 其他配置项
// 注: 参数六也可不加,其配置项则为默认值
new CountUp(num1.value, 0, props.data.num1, 0, 3, options).start();
new CountUp(num2.value, 0, props.data.num2, 0, 3, options).start();
new CountUp(num3.value, 0, props.data.num3, 0, 3, options).start();


//上面是说明毕竟多的，我项目用到的是下面简单的
onMounted(() => {
    const options = {
        // 小数点位
        decimalPlaces: 2,
        // 持续时间
        duration: 1.5
    }
    new CountUp(num1.value, props.data.num1, options).start();
    new CountUp(num2.value, props.data.num2, options).start();
    new CountUp(num3.value, props.data.num3, options).start();
})

//startVal、endVal的值必须是Number类型的，如果是String类型，虽然能正常显示但是控制台会报错
</script>

官网链接Apache ECharts

javascript写法

<script src="./cssjs/echarts.min.js"></script>
<div class="analysis-div" style="display: flex;flex-wrap: nowrap;flex-direction: row;justify-content: center;padding-top: 30px;">
   <div id="main" style="width: 350px;height:280px;"></div>
</div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var option = {
        title: {
            text: '项目完成率一表(季)'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            type: 'category',
            data: ['Q1', 'Q2', 'Q3', 'Q4']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [55, 60, 66, 56],
                type: 'line',
                smooth: true
            }
        ]
    };
 myChart.setOption(option);
</script>

vue3写法

npm i echarts --save

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    title: {
      text: '项目完成率一表(季)'
    },
    tooltip: {},
    legend: {
       data: ['销量']
    },
    xAxis: {
       type: 'category',
       data: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxis: {
       type: 'value'
    },
    series: [
      {
        data: [55, 60, 66, 56],
        type: 'line',
        smooth: true
      }
    ]
})

按需引入 ECharts 图表和组件

以下代码借鉴官网

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

// 接下来的使用就跟之前一样，初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  // ...
});