源码 | vue-big-screen-plugin v1.0 |
图标 | ![]() |
分类 | 源码下载-软件开发-java源码-vue-big-screen-plugin java源码 |
语言 | 简体中文 |
大小 | 2.5MB |
软件类型 | 国产软件 |
发布时间 | |
用户评分 | 4 |
备案号 | |
官方网址 | |
软件授权 | 免费软件 |
操作系统 | JavaScript |
厂商 | |
下载 | ![]() |
介绍 |
vue-big-screen-plugin是一个基于 Vue3、TypeScript、DataV、ECharts 框架的 " 数据大屏项目 ",使用 '.vue' 和 '.tsx' 文件实现界面,采用新版动态屏幕适配方案,支持数据动态刷新渲染、内部DataV、ECharts图表都支持自由替换。 特点:1、项目按照 1920*1080 比例设计,支持任何尺寸的同比例缩放。 2、项目封装的 ECharts 区域使用了全部引入的方式,增加了打包体积,在实际运用中请使用 按需引入。 3、拉取项目之后,建议按照自己的功能区域重命名文件,现以简单的位置进行区分。 4、项目环境:@vue/cli-4.5.13、DataV-2.10、Echarts-5.1.1、Npm-6.14.6、Node-v14.16。 5、请拉取 master 分支的代码,其余分支是开发分支。 6、需要其它地图数据的,请查看我的其它项目(有一个地图合集) 注意:dataV 暂不支持 Vue3 的数据更新,可以正常使用静态组件(边框等),如果动态数据修改的需求可以参考npm库 bin-datav 的源码进行更改。 使用介绍1、启动项目 需要提前安装好 nodejs 与 yarn,下载项目后在项目主目录下运行 yarn 拉取依赖包。安装完依赖包之后然后使用 vue-cli 或者直接使用命令npm run serve,就可以启动项目,启动项目后最好是手动全屏查看(按 F11)。如果编译项目的时候提示没有 DataV 框架的依赖,输入 npm install @jiaminghi/data-view 或者 yarn add @jiaminghi/data-view 进行手动安装。 如果安装完依赖 @jiaminghi 报错 key should be placed on the tag 类似的bug,我已经做了修复,大家把此工程目录下的 other_modules/@jiaminghi.rar 解压并替换掉 node_modules 里面的同名文件(或者手动修改,只需要把 v-for 移动到下方标签里,并删除 template 即可),我已经给作者提了 Issues 希望大家拉取的时候没有这个错误 2、封装组件渲染图表 所有的 ECharts 图表渲染都是基于 components/echart/index.tsx 封装组件创建的,动态修改数据需要手动触发初始化函数 initChart,参考 centerLeft1 里的图表写法即可。如果遇到动态赋值图表无法监听到的时候,也可以调用这个函数进行手动更新。 封装的渲染图表组件支持传入以下参数,可根据业务需求自行添加/删除。 |
截图 | |
随便看 |
|
网盟提供免费网站源码下载(asp源码,php源码,.net源码),源码动态,使用教程和源码评测;为站长推介有价值的源码,为开发者宣传源码作品。