环境搭建:Vue3+Echarts5+vueeharts+移动端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


在 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 注册为全局组件, 可在任意.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 文件

电脑端, 手机端 同一个局域网下, 可以用手机浏览器访问这个长的地址:

App running at:
- Local: http://localhost:8081/
- Network: http://192.168.31.190:8081/


最后对不同设备宽度进行等比缩放适配, 在 public 下的 index.html 的head 中加入 js如下:

剩下就自己随心所欲地搭积木啦 ~~

耐心和恒心, 总会获得回报的.