vue3：codepen上生成的动效代码/ 前端生成统计图（echarts包）

小王今天也要加油鸭~！

已于 2023-03-24 17:58:43 修改

阅读量649

点赞数

分类专栏：项目记录文章标签：前端 echarts vue3 codepen

于 2023-03-24 17:56:16 首次发布

本文链接：https://blog.csdn.net/WANG944282/article/details/129755827

版权

本文介绍了如何将codepen上的动态效果（基于p5.js）迁移到Vue3应用中，通过Vue3的组合式API进行适配。同时，展示了如何在Vue3+TS环境中使用ECharts创建柱状图，提供了相关安装、引入及基本配置步骤，帮助开发者实现前端数据可视化。

摘要由CSDN通过智能技术生成

codepen上生成的动态效果怎么放到自己的代码里（vue3组合式api）

设计给了个动态效果，说源码在codepen上面，打开一看，好家伙没有html，css也只有图里展示的这么点，那就是纯靠js实现。但是js里面这种的代码放到vue里肯定直接报错，那就需要我们处理一下。

在这里插入图片描述

思路：

首先看codepen里面都用了什么包，可以看到是https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js 所以我们安装一下 npm i p5
用开发者工具看了一下这个页面底下的效果，就是一个canvas，所以先考虑里面的方法是不是canvas里面带的。后面了解了一下，是p5里面的方法。

处理前：

const colors = ["#ff0000", "#00ff00", "#190E4F", "#03012C"];
const backgroundColor = "#cc3357";
const width = window.innerWidth;
const height = window.innerHeight;
const totalFrames = 1000;
let frameCount = 0;
let recording = false;

function setup() {
   
  canvas = createCanvas(width, height, WEBGL);
  noiseSeed(20);
  randomSeed(10);
}

function draw() {
   
  frameCount += 1;
  let frameDelta = (2 * Math.PI * (frameCount % totalFrames)) / totalFrames