该项目主要实现两大功能:
将**地图划分为华北、华东、东北、华中、华南、西南、西北7个区域。
- 功能1: 将7个区域通过点击事件进行切换展示;
- 功能2: 将7个区域进行缩放轮播展示,即通过设置属性center和zoom属性,改变中心坐标和放大比例达到局部区域放大和移动;
注意:demo会有点小问题,因为两个地图用的同一个实例,切换地图是一起切换的,单独使用没有问题。
友情链接:
文件 | 作用/功能 |
---|---|
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 install
npm start
// src\main.js文件
把下面这句话注释掉就可以了。
require('./mock/mock')//是否使用mock
采用Scale方式,会自动给组件父元素添加overflow:hidden
<template>
<scale-screen width="1920" height="1080">
<div>
<v-chart>....</v-chart>
<v-chart>....</v-chart>
<v-chart>....</v-chart>
<v-chart>....</v-chart>
<v-chart>....</v-chart>
</div>
</scale-screen>
</template>
<script>
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 | null |