# 大数据可视化-移动端
**Repository Path**: javafdx/big-data-visualization-mobile
## Basic Information
- **Project Name**: 大数据可视化-移动端
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-11-09
- **Last Updated**: 2022-11-20
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
#### 配置rem
原理： 修改html根节点的font-size属性
1rem = **px
那么1rem = 16px
1. 在根index.html创建基准值
``
Math.min(scale, 2) 最小不能两倍，如果小于，就取2
#### 降低计算单位
使用rem,为了降低计算单位
例如： 想使用32px 还得计算一下，32/16 = 2 rem
安装依赖
npm i -D postcss-px2rem
"postcss-px2rem": "^0.3.0",
在vue.config.vue
`
const px2rem = require('postcss-px2rem')
// 定义基准值
const postcss = px2rem({
remUnit: 32
})
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
postcss
]
}
}
}
}
`
#### 初始，清除默认的边框
1. 新建styles-->reset.css
2. main.js中引入
import './styles/reset.scss'
3. app.vue中加入样式
#app {
width: 100%;
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#### 安装echarts vue-echarts
npm i -S echarts vue-echarts
引入main.js
import ECharts from 'echarts'
import VueECharts from 'vue-echarts'
// 绑定
Vue.prototype.$echarts = ECharts
// 注册
Vue.component('vue-echarts', VueECharts)
##### 模板
`
`
#### 滚动属性
#app {
width: 100%;
height: 100%;
overflow-y: scroll; // 滚动属性
-webkit-overflow-scrolling: touch; // 在移动端不会出现卡顿的问题
}
#### axios
1. npm i -S axios
2. 引入utils --- request.js
3. 创建接口文件夹
api--index.js
4. 调用
`
import { getScreenMobileData } from '../api/index'
使用：
mounted(){
// 调用接口
getScreenMobileData().then(data => {})
}
`
#### 子组件接收数据
父组件<:data=data>
子组件
props:{
data: Object
}
watch: {
data(){ // 产生变化之后去赋值
this.update();
}
}
methods:{
update() {
if(this.data){ // 如果有值再去赋值
const _data = this.data.salesBar
const axis = _data.axis
const data1 = _data.data1;
const data2 = _data.data2;
this.options = {}
}
}
}
#### 部署注意
如果背景图片不显示
就换成https://