大屏开源模板(含html源码),简朴易用,不妨一试|金年会

作者:金年会官网发布时间:2022-07-13 22:07

本文摘要:先容一个基于 vue、Echart 框架的大数据可视化(大屏展示)模板,提供数据动态刷新渲染、屏幕适应、内部图表自由替换、Mixins注入等功效。

金年会官网

先容一个基于 vue、Echart 框架的大数据可视化(大屏展示)模板,提供数据动态刷新渲染、屏幕适应、内部图表自由替换、Mixins注入等功效。开源地址https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search项目展示项目使用如何启动项目需要提前安装好nodejs与npm,下载项目后在项目主目录下运行npm/cnpm install拉取依赖包,然后使用 vue-cli 或者直接使用下令npm run serve,就可以启动项目,启动项目后需要手动全屏(按 F11)。

如何请求数据现在的项目未使用前后端数据请求,建议使用 axios 举行数据请求,在 main.js 位置举行全局设置,在 views/xx.vue 文件里举行前后端数据请求。如何动态渲染图表在components/echart下的文件,好比drawPie()是渲染函数,echartData是需要动态渲染的数据,当外界通过props传入新数据,我们可以使用watch()方法去监听,一旦数据变化就挪用this.drawPie()并触发内部的.setOption函数,重新渲染一次图表。如何复用图表组件因为 Echart 图表是凭据id/class去获取 Dom 节点并举行渲染的,所以我们只要传入唯一的 id 值与需要的数据就可以举行复用。如中间部门的任务通过率与任务达标率组件就是接纳复用的方式。

如何更换边框边框是使用了 DataV 自带的组件,只需要去 views 目录下去寻找对应的位置去查找并替换就可以,详细的种类请去 DavaV 官网检察 如:如何更换图表直接进入 components/echart 下的文件修改成你要的 echarts 容貌,可以去echarts 官方社区内里检察案例。Mixins 注入的问题使用 mixins 注入解决了图表重回信写响应式适配的代码,如果要更换(新增)图形,需要将echarts.init()函数赋值给this.chart,然后 mixins 才会自动帮你注入响应式功效。屏幕适配问题本项目借助了 flexible 插件,通过改变 rem 的值来举行适配,原设计为 1920px。

金年会官网

,适配区间为:1366px ~ 2560px,本项目有凭据实际情况举行源文件的更改,小屏幕(如:宽为 1366px)需要自己舍弃部门动态组件举行适配,如'动态文字变换组件'会影响结构,需要手动换成一般节点。详细使用请移步https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search地址参考。


本文关键词:大屏,开源,金年会,模板,含,html,源码,简朴,易用,先容

本文来源:金年会-www.ningbofansi.com