【实用】Echarts+countTo实现一个微交互柱状图可视化小面板写一个基于Echarts(百度的可视化图表库)+c

前言

写一个基于Echarts(百度的可视化图表库)+countTo(数字滚动组件库)可视化柱状图面板简单的Demo,方便jym复制即用，当然代码也存在很多待优化和提高的地方,我就抛个砖引玉！代码不一定优雅，贵在实用！

在线Demo演示

Vue项目中使用Echarts

1.安装Echarts

首先，需要在Vue项目中安装Echarts。可以通过npm（Node Package Manager）来安装。在项目的根目录下打开命令行工具，输入以下命令： npm install echarts --save

2.引入Echarts

全局引入

// 在main.js或app.js中  
import * as echarts from 'echarts';  
Vue.prototype.$echarts = echarts;

局部引入

// 在需要使用Echarts的Vue组件中  
import * as echarts from 'echarts';

3.初始化Echarts实例

<template>  
   <div ref="chartBox" style="width: 600px; height: 400px;"></div>   
</template>

  // 柱状图渲染方法
  private doCharts(chartData:any){  
    // 初始化echarts实例
    let myCharts = echarts.init(this.$refs.chartBox); 
    // 清除echarts实例
    myCharts.clear();
    if(chartData){ 
      // 绘制图表echarts
      myCharts.setOption({
        // ----- 配置项option start ---------    
        
        // ----- 配置项option end -----------  
      });
    } else {
      myCharts.setOption({
        title:{
          text:'暂无数据',
          x:'center',
          y:'center',
          textStyle: { 
              color: '#909399',
              fontSize: 14,
              fontWeight: 'normal',
              fontFamily: 'Microsoft YaHei'
          },
        }
      })
    }
    // echarts自适应
    window.addEventListener('resize', function () {  
      myCharts.resize(); 
    });
  }

Vue项目中使用countTo

1.安装countTo

首先，需要在Vue项目中安装countTo。可以通过npm（Node Package Manager）来安装。在项目的根目录下打开命令行工具，输入以下命令： npm install vue-count-to --save

2.引入countTo

<script>  
import { defineComponent } from 'vue';  
import CountTo from 'vue-count-to'; // 假设这是正确的包名，并且它是Vue 3兼容的  
  
export default defineComponent({  
  name: 'MyComponent',  
  components: {  
    CountTo,  
  },  
});  
</script>

3.初始化countTo

<template>  
  <div>  
    <CountTo :startVal="0" :endVal="2023" :duration="2000" :decimals="2" />  
  </div>  
</template>

// script lang="ts"模式
import countTo from 'vue-count-to';  
@Component({ components: {countTo} })

4.常用参数说明

描述	类型	默认值
startVal	开始值	Number	0
endVal	结束值	Number	2017
duration	持续时间，以毫秒为单位	Number	3000
autoplay	自动播放	Boolean	true
decimals	要显示的小数位数	Number	0
decimal	十进制分割	String	.
separator	分隔符	String	，
prefix	前缀	String	' '
suffix	后缀	String	' '

注意：当autoplay为true时，它将在startVal或endVal更改时自动启动