在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:vue-big-screen开源软件地址:https://gitee.com/MTrun/big-screen-vue-datav开源软件介绍:QQ交流群: 713105837 开源项目Vue/Vue3/React-big-screen交流群 QQ群二维码: 一、项目描述
友情链接: 项目展示 二、主要文件介绍
三、使用介绍启动项目需要提前安装好 封装组件渲染图表所有的 ECharts 图表都是基于 项目配置了默认的 ECharts 图表样式,文件地址: 封装的渲染图表组件支持传入以下参数,可根据业务需求自行添加/删除。
动态渲染图表动态渲染图表案例为 chart 文件的主要逻辑为: <template> <div> <Echart :options="options" id="id" height="height" width="width" ></Echart> </div></template><script> // 引入封装组件import Echart from '@/common/echart'export default { // 定义配置数据 data(){ return { options: {}}}, // 声明组件 components: { Echart}, // 接收数据 props: { cdata: { type: Object, default: () => ({}) }, }, // 进行监听,也可以使用 computed 计算属性实现此功能 watch: { cdata: { handler (newData) { this.options ={ // 这里编写 ECharts 配置 } }, // 立即监听 immediate: true, // 深度监听 deep: true } }};</script> 复用图表组件复用图表组件案例为中间部分的 如:在调用处 //组件调用<span>今日任务通过率</span><centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" /><span>今日任务达标率</span><centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />...import centerChart from "@/components/echart/center/centerChartRate";data() { return { rate: [ { id: "centerRate1", tips: 60, ... }, { id: "centerRate2", tips: 40, colorData: { ... } } ] }} 更换边框边框是使用了 DataV 自带的组件,只需要去 views 目录下去寻找对应的位置去查找并替换就可以,具体的种类请去 DavaV 官网查看如: <dv-border-box-1></dv-border-box-1><dv-border-box-2></dv-border-box-2><dv-border-box-3></dv-border-box-3> 更换图表直接进入 Mixins 解决自适应适配功能使用 mixins 注入解决了界面大小变动图表自适应适配的功能,函数在 屏幕适配1.5 版本项目放弃了 flexible 插件方案,将 rem 改回px,使用更流程通用的 请求数据现在的项目未使用前后端数据请求,建议使用 axios 进行数据请求,在 main.js 位置进行全局配置。
import axios from 'axios';//把方法放到vue的原型上,这样就可以全局使用了Vue.prototype.$http = axios.create({ //设置20秒超时时间 timeout: 20000, baseURL: 'http://172.0.0.1:80080', //这里写后端地址}); 四、更新情况
五、其余这个项目是个人的作品,难免会有问题和 BUG,如果有问题请进行评论,我也会尽力去更新,自己也在前端学习的路上,欢迎交流,非常感谢! |
请发表评论