简介大屏设计(AJ-Report)是一个可视化拖拽编辑的全开源项目,直观,酷炫,具有科技感的图表工具。内置的基础功能包括数据源,数据集,报表管理。多数据源支持,内置mysql、elasticsearch、kudu驱动,支持自定义数据集省去数据接口开发,支持17种大屏组件,不会开发,照着设计稿也可以制作大屏。三步轻松完成大屏设计:配置数据源—->写SQL配置数据集—->拖拽配置大屏—-&
目录项目开始时: 如何选择rem设配项目 (六步骤)一:安装二:根据设计稿修改配置 三:在main引入四:cssrem插件cssrem插件配置 五:页面使用六:卸载依赖,复制 flexible.js配置最小最大宽高 下面写入地图china.vue city.vuehome.vueprovi
Vue2.x动态组件的使用实现组件整合大屏展示一、问题项目中开发多个可视化的页面(组件),现需要根据选择的数据和屏幕的配置数据将多个页面整合在同一个页面内,并且根据配置数据划分占比以及位置关系(横向位置,垂直高度统一,横向宽度根据配置数据的占比进行划分)大致效果如图所示,横向排列,按照数据中小屏组件数据的先后顺序进行排列即可:二、解决解决思路,主要利用Vue的动态组件,配合CSS的flex布局方式
转载
2024-03-28 12:54:50
814阅读
vue的使用目录vue的使用一、创建vue项目二、pycharm开发vue项目1、安装vue.js插件2、运行vue项目三、vue项目的目录结构四、vue的使用1、创建新的组件2、显示数据3、方法的绑定五、axios1、安装axios2、使用axios(1)在mian.js中配置(2)在组件中使用六、vue绑定1、绑定图片2、绑定事件3、绑定路由七、vue页面挂载八、vue中路由携带参数九、vue
案例 <template> <div class="container"> <div class="screen" ref="screen"> <!-- 顶部 --> <div class="top"></div> <!-- 底
一、echarts:1、集成步骤:(1)安装echarts:npm install echarts -S(2)main.js中引入:import echarts from 'echarts';
import china from 'echarts/map/json/china.json';
echarts.registerMap('china', china);
Vue.prototype.$ec
现在,当你运行项目时,你应该可以看到一个从 1 滚动到 100 的数字效果。你可以根据需要调整动画时长、起始数字和结束数字。为了实现 Vue3 大屏数字滚动效果,我们可以使用 Vue3 的自定义指令和 CSS 动画。
原创
2024-01-21 00:26:11
1797阅读
MENU01、v-if和v-show指令02、Vue路由拦截03、Vue中父子组件生命周期钩子函数的执行顺序04、MVVM05、v-for和v-if06、Vue中的data07、v-model(双向绑定)08、route和router的区别09、vue-router10、computed(计算属性)和watch(监听)的区别及应用场景11、Proxy与Object.defineProperty优
转载
2024-09-12 22:41:30
57阅读
安装echarts依赖npm install echarts -S或者使用国内的淘宝镜像:1、安装镜像npm install -g cnpm --registry=https://registry.npm.taobao.org2、安装依赖cnpm install echarts -S创建图表全局引入main.js
// 引入echarts
import echarts from 'echarts'
最近后台改版,要求login页适配大小屏幕,超大屏幕(浅浅的记录下);实现方案:Vue +lib-flexible实现大小屏幕,超大屏幕的适配展示。lib-flexible是淘宝项目组开发的插件,属于开源项目,可以在各种项目(vue,react)中引入并使用,利于其将px转成rem的单位转换形式,不需要我们再根据分辨率不同写很多的适配代码。看其他文档实现步骤:1、安装lib-flexiblenpm
转载
2024-03-06 12:21:39
1605阅读
一、项目描述1 前端项目1.1 项目简介一个基于 Vue、datav、Echart 框架的 " 数据大屏项目 ",通过 vue 组件实现数据动态刷新渲染,内部图表可实现自由替换。部分图表使用 DataV 自带组件,可进行更改,详情请点击下方 DataV 文档。项目需要全屏展示(按 F11)。项目部分区域使用了全局注册方式,增加了打包体积,在实际运用中请使用按需引入。拉取项目之后,建议按照自己的功能
一、Echarts的基础使用创建Vue3 Vite项目PS F:\Vue> pnpm create vite
Packages: +6
++++++
Packages are hard linked from the content-addressable store to the virtual store.
Content-addressable store is at: C:\Us
文档管理1.1 文档信息
文档名称 保密级别 文档版本编号 制作人 制作日期2018.1.19复审人 复审日期 1.2 修改记录
时间版本说明修改人 内容摘要接手项目参考文档,辅助入门。&n
https://github.com/moocstudent/vue-war作者:ukyo--BlackJesus
转载
2023-07-01 05:07:16
4788阅读
vue3.0+TS+antd vue前言安装目前的了解(值得注意的新特性)this指向的变化2.x vs 3.0 钩子函数setuprefisRefreactiveisReactivetoRefswatch 响应式更改项目登录页面项目地址前言在掘金上摸鱼看到了“一个基于vue3+vite+ts的完整项目”的文章,好了我也要开始搞一搞vue3.0,反正最近打算搞个新项目,干脆就用新的; 于是开始摸鱼
最近这个几个月都在跟着coderwhy老师,系统性的学习Vue3的新知识,和新特性。首先,先感谢coderwhy老师讲的非常的好,真的很赞,我这种脑子转的很慢的人,都可以跟上他的节奏,非常感谢老师。 老师教的好,但是并不代表我就以前完全的吸收了,代码这个东西,不长期练习,总是会忘的,所以自己打算做个总结,忘的时候,在瞄一眼吧。好了,开始正题吧!认识 Composition APIVue3最大的特
前言:为了回顾学习的vue内容,将视频中一个大的项目里的购物车这一块单独拎出来写了个小demo。说难也不难,就是对所学的vue知识进行了个整合,实现了三个界面间的操作以及状态管理,但是说简单也不简单,虽然有点基础但写下来还是有些吃力。总的来说,这个小demo写完,对于vue算是能够独立上手了,也养成了看官方文档进行系统性的学习的习惯。本篇仅单独详细写vuex的使用。源代码于git上取:我的git
前言项目基础配置使用vue-cli2 生成自适应方案核心:阿里可伸缩布局方案 lib-flexiblepx转rem: px2rem,它有webpack的loader px2rem开始先使用vue脚手架初始化一个webpack项目项目初始化好了之后,进入项目中安装 lib-flexible 和 px2rem-loader 安装好了之后还需要在项目的入口文件 main.js里引入 lib-f
转载
2024-10-11 11:04:21
632阅读
在不同的 MVVM 框架中,实现双向数据绑定的技术有所不同。Angular数据绑定Angular 采用“脏值检测”的方式,数据发生变更后,对于所有的数据和视图的绑定关系进行一次检测,识别是否有数据发生了改变,有变化进行处理,可能进一步引发其他数据的改变,所以这个过程可能会循环几次,一直到不再有数据变化发生后,将变更的数据发送到视图,更新页面展现。如果是手动对 ViewModel 的数据进行变更,为
不知道大家有没有发现随着版本的升级 vue 和 react 越来越像了。2019年年初,react 在 16.8.x 版本正式具备了 hooks 能力。2019年6月,尤雨溪提出了关于 vue3 Component API 的提案。笔者理解这其实是 vue 版本的 hooks。Vue 和 React 相继都推出了Hooks,那么今天我们就通过对比的方式来学习 Vue 和 React 的 Hook。