## 1、主要文件介绍 | 文件 | 作用/功能 | | ----------------- | ------------------------------------------------------------ | | main.js | 主目录文件,引入 Echart/DataV 等文件 | | utils | 工具函数与 mixins 函数等 | | views/ home.vue | 项目主结构 | | views/其余文件 | 界面各个区域组件(按照位置来命名) | | assets | 静态资源目录,放置 logo 与背景图片 | | assets / css/ | 通用 CSS 文件,全局项目快捷样式调节 | | components/echart | 所有 echart 图表(按照位置来命名) | | common/... | 全局封装的 ECharts 和 flexible 插件代码(适配屏幕尺寸,可定制化修改) | | api/api.js | 接口封装文件 | | mock | 模拟数据接口地址 | ### ## 使用介绍 ### 安装 ```npm npm install ``` ### 启动 ```npm npm start ``` ### 取消mock模拟数据 ```javascript // src\main.js文件 把下面这句话注释掉就可以了。 require('./mock/mock')//是否使用mock ``` ## 自适应缩放组件 ### 注意 采用Scale方式,会自动给组件父元素添加overflow:hidden ### 使用 ```vue ``` ### API | 属性 | 说明 | 类型 | 默认值 | | ------------ | ------------------------------------------------------------ | -------------------------------- | ------ | | selfAdaption | 是否进行自适应 | Boolean | true | | width | 大屏宽度 | `Number` or `String` | 1920 | | height | 大屏高度 | `Number` or `String` | 1080 | | autoScale | 自适应配置,配置为boolean类型时,为启动或者关闭自适应,配置为对象时,若x为true,x轴产生边距,y为true时,y轴产生边距,启用fullScreen时此配置失效 | Boolean or {x:boolean,y:boolean} | true | | delay | 窗口变化防抖延迟时间 | Number | 500 | | fullScreen | 全屏自适应,启用此配置项时会存在拉伸效果,同时autoScale失效,非必要情况下不建议开启 | Boolean | false | | boxStyle | 修改容器样式,如居中展示时侧边背景色,符合Vue双向绑定style标准格式 | Object | null | | wrapperStyle | 修改自适应区域样式,符合Vue双向绑定style标准格式 | Object | null | ## 公用组件 ### 5.1 message消息提示 ```js this.$Message({ text: res.msg, type: 'warning' }) //也可以这样 this.$Message.warning(res.msg) ``` | 参数 | 描述 | 默认值 | 类型 | 可选值 | | :--: | :------: | :-----: | :----: | :-----: | | text | 提示文字 | - | string | - | | type | 弹窗类型 | warning | string | warning | ## 全局参数 ### filter 监测数据项统一过滤,保留两位小数。 ```vue {{10.23123|montionFilter }} ```