qq_38330707的博客

项目场景：《数据可视化之模块边框绘制，以及组件开发》介绍了css3中关于borderImage的相关配置，并且实现了一个border图片渲染的插件。其原理也是相当简单，这里就不过多赘述了，今天要做的是实现Vue3的组件(图片边框渲染通用组件)。解决方案：1、准备一张边框图片nodejsvue-cli2、快速开始创建项目vue create dev-datav-border-view添加组件<template> <div class="tw

项目场景：在数据可视化里面，我们可以发现一个大屏展示，是有多个小的模块组合而成，然而这个小模块又是有模块边框和图标构成，大多数情况中，这些小模块的边框是一样，然而又有的图案比较复杂，用css是很难直接写出来，办法当然是有的。当然你除了选择用我说的这种方案，也可以选择用svg绘制，也是一个不错的选择。如下图，就是我们要实现的效果解决方案：1、基础知识我们绘制图片边框采用的原理是css3中样式：值描述border-image-source用于指定要用于绘制边框的图像的位置

项目场景：数据可视化大屏开发的过程中，需要实现一种滚动数字的效果，在使用vue2时，使用vue-count-to完全没有问题，功能也比较完善(滚动时长，开始值，结束值，前缀，后缀，千分隔符，小数分隔符等等)，但是在vue3中使用会出现问题。<template> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">Ab

项目场景：数据可视化开发，采用的技术栈是vue3+echarts+router。问题描述：在vue2中，才开始开发数据可视化大屏，都是用echarts，之后改用为vue-echarts组件，但是到了vue3之后，组件会有一些小问题，所以准备自己封装一套简易的vue-echarts组件，其他的功能之后再迭代上去，足够项目使用即可。代码封装：<template> <div class="echarts" :id="id"></div></te