环境搭建: 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>

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