环境搭建: Vue3+Echarts5+vue-eharts + 移动端rem适配
对于数据可视化的最后一站, 就是移动数据报表的展示, 毕竟手机端的适普性, 便携性, 灵活性更高. 包括我自己也是更多在移动端进行轻量办公. 而用主流的商业BI平台在PC端的体验基本可打80分, 而在移动端就只能50分了, 最终还是要走向一些定制的, 个性化的标准开发.
假定后台数据接口都是基于ADS层的API, 前端展示用Vue来尝试一下, 这里先做一个基于Win下的环境搭建. 当然这里需要一些前端的基础知识, 对 vue3 和 echarts 有一定程度了解哈.
1. 安装 Node.js
https://nodejs.org/zh-cn/
跟下载普通软件没啥区别, "下一步" 一顿点击就安装好了, 然后【win+R】键，输入cmd, 按回车, 打开cmd窗口
C:\Users\Administrator>node -v
v16.14.2
C:\Users\Administrator>npm -v
8.5.0
则表示安装成功. 新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西.
2. 用 nrm 切换国内镜像源
这里以taobao镜像源为例, 个人感觉还是挺快的, 对于后期的各种npm下载.
npm install nrm -g
-- nrm ls
nrm use taobao
3. 安装 vue-cli 脚手架工具
-- a. 清理老版本脚手架
npm uninstall vue-cli -g
-- b. 安装脚手架, 这里以安装4.5.9的版本, 不指定则默认到最新
npm install @vue/cli@4.5.9
-- c. 将vue.cmd 添加环境变量哦
D:\Vue_Cli\node_modules\.bin
3. 创建并启动一个Vue3 项目
-- 任意目录下 创建一个Vue项目
vue create report_mobile
-- 选择自定义配置
Manually select features
-- 根据提示按需配置一通操作后开始生成
-- 搭建脚手架的时候配置 CSS 编译工具时选择选择 dart-sass ，选择后项目构建成功。
-- 耐心等待几分钟, 成功后, 进入项目, 启动服务
cd report_mobile
npm run server
浏览器:
http://localhost:8080/
如果能启动成功就说明咱的 Vue3 项目已经创建好了, 这里的配置理解起来需要点时间, 但能跑就行吧.
5. 全局CSS样式重置和设置rem单位
对全局和APP进行CSS样式重置, 当然通过 reset.css 也是可以的, 这个看需求.
npm install normalize.css --save
<template>
<div id="app">
<router-view />
</div>
</template>
<style lang="scss">
#app, html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
在 src 同级目录下, 新建一个 style 的文件夹, 在其下建一个 base.scss 的文件.
html {
font-size: 100px;
}
body {
font-size: .12rem;
}
.echarts {
width: 100%;
height: 100%;
}
即简单粗暴地"100px = 1rem" 这种 "px" 思维进行开发, 至少我是接受的, 转来转去反而麻烦.
6. 安装 echarts 和 vue-echarts 并进行全局配置
这个 vue-echarts 其实就是对 echarts 的一些简单封装, 可以让我们少些一些重复的配置, 它直接封装成了一个组件, 我们在引用的使用, 仅需通过属性将数据传到 option 即可, 其实没啥东西.
--Vue3 中安装echarts5 和 vue-echarts-v3:
npm install echarts vue-echarts --save
对项目的根目录下(与 APP.vue同级) 的 main.js 进行如下配置:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import * as echarts from 'echarts'
import VueEcharts from 'vue-echarts'
import 'normalize.css'
import './style/base.scss'
const app = createApp(App)
// 将echarts挂载到app的的原型链上, 让全局使用
app.config.globalProperties.$echarts = echarts
// 将vue-echarts 注册为全局组件, <VChart option:'xxx' /> 可在任意.vue中使用
app.component('VChart', VueEcharts)
app.use(store).use(router).mount('#app')
7. 通过vue-echarts 配置图表在移动端测试
这里以 Home.vue 文件进行测试, 正好默认路由也是它嘛
// 官方默认的 Home 路由配置
const routes = [
{
path: '/',
name: 'Home',
component: Home
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
直接以echarts官方入门案例进行 vue风格的编写如下: Home.vue 文件
<template>
<div class="home">
<div class="test-text">手机端测试啦</div>
<div class="echarts-wrapper">
<VChart :option="options" />
</div>
</div>
</template>
<script>
const useChartEffect = () => {
const options = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
}
return { options }
}
export default {
name: 'Home',
setup () {
const { options } = useChartEffect()
return { options }
}
}
</script>
<style lang="scss" scoped>
.test-text {
margin-top: .1rem;
text-align: center;
margin-bottom: .2rem;
font-size: .14rem;
}
.echarts-wrapper {
height: 2rem; // 一定要有高才能显示图形
width: 100%;
}
</style>
电脑端, 手机端 同一个局域网下, 可以用手机浏览器访问这个长的地址:
App running at:
- Local: http://localhost:8081/
- Network: http://192.168.31.190:8081/
最后对不同设备宽度进行等比缩放适配, 在 public 下的 index.html 的head 中加入 js如下:
<script>
// rem 布局下的 自适应 (等比例缩放)
// 1. 先获取到设备的宽度 (es5语法)
var width = document.documentElement.clientWidth || document.body.clientWidth
// 2. 设置俺默认的开始宽度是在 w: 375 x 667 下的(参照iphone6)
var ratio = width / 375
// 3. 计算自动缩放比例的font-size
var fontSize = 100 * ratio
// 4. 改变html的font-size即可, 俺默认的是 100px
document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px'
</script>
剩下就自己随心所欲地搭积木啦 ~~
