type
status
date
slug
summary
tags
category
icon
Property
Sep 9, 2022 06:42 AM
数据可视化–项目开发流程
vue3.0项目创建
1.电脑上安装node.js
网址:https://nodejs.org/zh-cn/
下载自己对应操作系统版本 安装即可
2.全局下载项目脚手架
打开cmd 输入 npm install -g @vue/cli
3.创建项目
把cmd的路径切换到指定路径下 vue create 项目名
(3-1)选择项目配置模板 选择第三项自主选择你项目所需的配置
(3-2)选择项目配置选项 勾选所需要的模块
(3-3)选择想要开始项目的Vue.js版本 选择 3.x
(3-4)是否用history模式来创建路由 直接回车默认项目
(3-5)选择CSS 预处理类型 选择LESS
(3-6) 选择代码校验会犯 选择第一项 只进行报错提醒
(3-7)询问项目的什么时候校验格式(第一个是保存时,第二个是提交时)
(3-8)询问项目的配置文件放在那里 (1.独立文件 2.package.json中)
(3-9)是否保存配置当做后续项目的可选配置 我们选择不保存
4运行项目
把cmd的路径切换到你项目名下
npm run serve 启动项目
拿到空项目怎么办?
1.删除src文件夹下的cpmponents文件夹下的Helloword.vue文件
2.删除views下的两个.vue文件
3.在views中新建我们的页面文件 homePage.vue文件
4.修改router下的index.js配置路由文件
5修改根组件默认显示内容与初始化项目样式
到此为止项目已经初始化完毕
项目分辨率响应式分析与实施
项目基本结构
整体轮廓分为上下结构
在下半部分区域分为左中右结构
技术栈
- vue3.0+vue-router4.0+axios
- flex布局
- LESS
- rem屏幕适配
- echarts5.0
项目分辨率响应式创建
我们的项目是需要根据页面的大小改变 做出响应式改变的 所以我们可以使用
我们可以使用 第三方插件flexible.js帮助我们修改html根节点的font-size大小 从而控制当前页面的rem(会根据页面的html根节点font-size大小改变而改变)样式改变
flexible.js
flexible.js web自适应方案 阿里团队开源的一个库。使用flexible.js轻松搞定各种不同的移动端设备兼容自适应问题。
1.下载 npm i -S lib-flexible
2.在main.js中进行配置
3.修改flexible配置
因为默认情况下只会在540px分辨率一下生效 所以我们需要根据我们的项目分辨率进行调整
在node_module/lib-flexible/flexible.js中修改代码如下
这个时候重启项目大家打开浏览器调试器 即可发现在浏览器大小改变的时候 在html根节点上会自动设置一个font-size
cssrem插件
我们在写代码的时候发现如果我们都根据80px为1rem在编写代码的时候转换非常的麻烦 所以我们可以在vscode中安装一个cssrem的插件帮助我们进行转换 这样一来开发过程中会更加的方便
配置方式
在vscode扩展中找到 cssrem插件 最新名字叫px to rem & rpx 安装到vscode中 点击右下角设置
修改Root Font Size(基准font-size) 配置项为80即可
测试与使用
在写css的时候就会出现相应的rem转换结果
项目顶部信息条创建
1.设置背景图
把图片方法assets文件夹中 在app.vue中设置背景图
2.设置标题文字
页面主体创建
主体部分是下面的左中右
大容器
1.创建一个大容器来容纳绿色 红色 黄色三个区域
在homepage.vue页面中创建一个大容器
创建容器样式
左中右
接下来我们可以创建左中右这三个部分。那么他们的占比分别是3 5 3 这个时候我们可以使用flex布局来分割他们所占的区块大小
1.创建左中右三个页面容器
2.设置样式
运行之后会发现 页面的左和右占比是页面各的3份。而中间是占比5份
左右图表展示区块容器样式
大家会发现我们要展示的4个区域的容器效果是一样的。所以我们可以剥离成一个组件 然后重复调用即可。并且在其中放置slot槽口 后期方便向容器内插入图表
创建容器组件
在components文件夹下创建 itemPage.vue
编写样式与插槽
在views下的homePage中引用调用使用
运行之后大家会发现左右区块就展现出4个容器
左右每个区块内容插入容器槽口
我们一共4个图标 使用一个公共的组件容器 所以我们编写这4个不同图表的组件并且 分别显示
1.创建4个组件 在components下 itemOne.vue等等 一共4个
然后在4个文件中分别设置相关内容与样式(每个图表的标题不一样要修改)
在homePage.vue中引用调用使用这4个组件
中间地图区域容器样式
在views文件夹下的 homePage。vue 中设置中间区域容器样式
图表前期准备
全局设置Echarts与axios
Charts 全局引用
1.下载 npm install –save echarts
2.0的写法
在vue2.0中使用如下写法吧echarts挂载在vue实例上 但是这招在3.0行不通了
在main.js中进行引用和调用
vue3中使用Provide/Inject依赖注入,将替代vue2中在原型链上挂载一些属性
在app.vue中使用provider来给后代们提供数据
在想使用的组件中使用inject来接受
在views下的homePage.vue测试
大家在console中可以看到可以正常使用了
axios全局引用
axios使用于上面相同方式
1.下载 npm install –save axios
2.在app.vue中使用provider来给后代们提供数据
在想使用的组件中使用inject来接受
在views下的homePage.vue测试
图表1基本设置
1.在components文件夹下的 itemOne.vue中 设置图表1
2.我们要完成的横向柱状图
所以在设置echarts配置的时候。给xAxis 的type设置value数值轴。给yAxis设置 catehory类目轴
3 接下来我们需要图表展示的数据(数据使用json-server提供)
json-server提供数据
本地的mock-server来完全模拟请求以及请求回来的过程。json-server是一个很好的可以替我们完成这一工作的工具。我们只需要提供一个json文件,或者写几行简单的js脚本就可以模拟出RESTful API的接口。
1.安装
npm install -g json-server
2.在src下创建一个mock文件夹 在其中创建一个json文件如下
3.启动服务
把终端的命令切换到你mock文件夹下输入json-server空格json文件名 即可启动
设置axios请求
在组件内容请求json-server数据
设置请求基准路径
后续我们右很多的请求 或者后期请求地址改变的时候我们在一个个组件的修改非常的麻烦 所以我们可以设置请求基准路径方便修改
1.在app.vue中设置
2.在需要请求的地方只需要写请求的路由地址即可
处理数据
我们请求来的数据事一个数组对象 那么我们需要把x轴的数据于y轴的数据取出来变成两个数组方便echarts使用
动态展示图表
添加echarts
echart图表本身是提供了一个
resize
的函数的。是当浏览器发生resize事件的时候,让其触发echart的resize事件,重绘canvas。用window.onresize = myChart.resize; 可以完成自适应,就是把window的onresize事件赋值为echart的resize事件
图表一样式修改
柱状图圆角与线段渐变色设置
在components下的itemOne.vue
柱状图的柱状的位置与上面显示文字
图表2 地图展示
如果要展示地图那么需要中国地图的矢量数据与省份数据 在public中的map文件夹已经提供了
由于数据实在我们本地 所以 我们在启动项目的时候可以直接在浏览器上输入
http://localhost:8080/map/china.json即可看到数据
我们在components文件夹下创建一个mapPage.vue组件用来容纳地图。同时在views下的homePage.vue中引用调用并且在页面中间的div中使用
获取地图数据
因为我们在项目中app.vue中 设置了 请求基准路径
axios.defaults.baseURL=“http://localhost:3000/”
所以我们不能在使用全局的axios 否则会使用基准路径完成请求
我们单独引用axios进行数据的请求
当然我们也可以直接引用数据不用请求
import china from ‘map/json/china.json’ //本地路径
就可以不用上面的请求使用
设置地图
echarts.registerMap(名字,数据)
设置地图样式
在地图上设置散点标记图
设置提示框组件的视觉映射效果(地图左下角效果)
设置标题
- 作者:侯旭阳
- 链接:https://www.houxuyang.online//article/80a546e4-ae76-4419-8bb0-d32e53a436a0
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。