mapbox_master-526互联

1.项目描述

根据奔跑吧面条的**vue-big-screen**开源框架基础上进行修改。

项目需要全屏展示（按 F11）。

项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用按需引入。

项目环境：Vue-cli、DataV、Echarts、Webpack、Npm、Node，axios,mock。

请拉取 master 分支的代码，其余分支是开发分支。

在项目public目录下存放地图数据合集，根据地市编存放。

文件	作用/功能
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	模拟数据接口地址

点击poackage.json中的调试，初次导入应先安装依赖，先把node_modules删除再通过npm i安装依赖，笔者在初次导入mapbox遇到less loader报错，卸载less loader重新安装5.0.0即可正常运行，依赖版本如下：

// src\main.js文件

把下面这句话注释掉就可以了。

require('./mock/mock')//是否使用mock

除了mock.js模拟数据以外，还可采用fake-data.json

注意

采用Scale方式，会自动给组件父元素添加overflow:hidden

使用

<scale-screen width="1920" height="1080">

<div>

<v-chart>....</v-chart>

</div>

</scale-screen>

</template>

import ScaleScreen from 'scale-screen'

export default {

name:'Demo',

components:{

VScaleScreen

}

</script>

属性	说明	类型	默认值
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