echarts

vue3.0与echarts5.0

1.课程介绍与目标

有句话说的好“一图胜千言”，在我们开发的领域就是说，在对于复杂难懂且体量庞大的数据展示上面而言，图表的信息量要大得多，这也是我们为什么要谈数据可视化。

2.数据可视化介绍

数据可视化这一概念自1987年正式提出，经过30余年的发展，逐渐形成3个分支：科学计算可视化(scientific visualization)、信息可视化(information visualization)和可视分析(visual analytics)。近些年来，这3个子领域出现了逐渐融合的趋势。我们统称为“数据可视化”。

什么是数据可视化？

顾名思义，数据可视化就是将数据转换成图或表等，以一种更直观的方式展现和呈现数据。通过“可视化”的方式，我们看不懂的数据通过图形化的手段进行有效地表达，准确高效、简洁全面地传递某种信息，甚至我们帮助发现某种规律和特征，挖掘数据背后的价值。

同时关于数据可视化的定义有很多，像百度百科的定义是：数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。这种定义可能显得比较晦涩难懂。在大数据分析工具和软件中提到的数据可视化，就是利用运用计算机图形学、图像、人机交互等技术，将采集或模拟的数据映射为可识别的图形、图像。

数据可视化的展现形式

数据可视化有众多展现方式，不同的数据类型要选择适合的展现方法。在数据可视化中 除了常用的的柱状图、线状图、条形图、面积图、饼图、点图、仪表盘、走势图外，还有和弦图、圈饼图、金字塔、漏斗图、K线图、关系图、网络图、玫瑰图、帕累托图、数学公式图、预测曲线图、正态分布图、迷你图、行政地图、GIS地图等各种展现形式。都可以为我们提供丰富的图表选择，让我们在实际使用过程中有更好的展现方式。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ugWuFZ9n-1648169125714)(C:\Users\Administrator\Desktop\微信截图_20220226164229.png)]

我们可以通过类柱状图

比较类图表显示值与值之间的不同和相似之处。 使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小， 通常用于展示不同分类间的数值对比，不同时间点的数据对比。

柱形图有别于直方图，柱状图无法显示数据在一个区间内的连续变化趋势。柱状图描述的是分类数据，回答的是每一个分类中"有多少？"这个问题。 需要注意的是，当柱状图显示的分类很多时会导致分类名重叠等显示问题。

同时可以通过占比类图表显示同一维度上的占比关系。饼图广泛应用在各个领域，用于表示不同分类的占比情况，通过弧度大小来对比各个分类。

饼图通过将一个圆饼按照分类的占比划分成多个区块，整个圆饼代表数据的总量，每个区块（圆弧）表示该分类占总体的比例大小，所有区块（圆弧）的加和等于 100%。

也可以趋势类折线图

趋势类图表显示数据的变化趋势。 使用图形的位置表现数据在连续区域上的分布，通常展示数据在连续区域上的大小变化的规律。

折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。

当然，大数据可视化的图表远远不止以上几种，最关键的是如何利用好这些工具及图表，归纳起来，一名数据可视化工程师需要具备三个方面的能力，数据分析能力、交互视觉能力、研发能力。

数据可视化有什么用？

数据可视化的意义是帮助人更好的分析数据，信息的质量很大程度上依赖于其表达方式。对数字罗列所组成的数据中所包含的意义进行分析，使分析结果可视化。其实数据可视化的本质就是视觉对话。数据可视化将技术与艺术完美结合，借助图形化的手段，清晰有效地传达与沟通信息。一方面，数据赋予可视化以价值；另一方面，可视化增加数据的灵性，两者相辅相成，帮助企业从信息中提取知识、从知识中收获价值。精心设计的图形不仅可以提供信息，还可以通过强大的呈现方式增强信息的影响力，吸引人们的注意力并使其保持兴趣，这是表格或电子表格无法做到的。

3.Echarts–商业级数据图表介绍

1.什么是Echarts

Echarts–商业级数据图表，它是一个纯JavaScript的图标库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等，底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

2. Echarts特点

1、丰富的可视化类型: 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

2、多种数据格式无需转换直接使用: 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，此外还支持输入 TypedArray 格式的数据。

3、千万数据的前端展现: 通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量。

4、移动端优化: 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。

5、多渲染方案，跨平台使用: 支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表。

6、深度的交互式数据探索: 提供了 图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。

7、多维数据的支持以及丰富的视觉编码手段: 对于传统的散点图等，传入的数据也可以是多个维度的。

8、动态数据: 数据的改变驱动图表展现的改变。

9、绚丽的特效: 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。

4. 项目演示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CeLON5f9-1648169125715)(./img/3.png)]

1.项目功能演示

2.项目启动与依赖安装

此过程会有引导 引导观众去获取资料

5.HelloWord 初体验

1.echarts获取

前期准备

电脑上面安装node

node下载地址：http://nodejs.cn/

淘宝镜像（选按）

淘宝 NPM 镜像站自 2014 年 正式对外服务。于npm命令在国内下载速度很慢。所以淘宝每隔10分钟就会把npm服务器的内容拉取一次放在国内服务器 这样一来我们在下载依赖的时候 速度会快很多

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装

1.初始化 npm init -y

2.安装echarts依赖

npm install --save echarts

2.HelloWord

6. 配置项–title配置

title 标题组件，包含主标题和副标题。

7. 配置项–tooltip

提示框组件，用于配置鼠标滑过或点击图表时的显示框

8.配置项–legend

图例组件展现了不同系列的标记，颜色和名字。可以通过点击图例控制哪些系列不显示。

9.柱状图基本设置

柱状图：一种图表类型,因为构成是由一根一根类似柱子的数据条组合而成的坐标平面,所以命名为柱状图。主要是用来反应对比数据之间的关系,也可以用来反应数据的变化趋势等等。

10.柱状图效果实现

当基本的柱状图设置完之后我们来看一下 柱状图的更多设置 柱状图标记效果

最大值最小值平均值 通过markPoint进行设置

11.柱状图效果实现2–xAxis，yAxis

水平柱状图

通过设置xAxis yAxis中的type属性值来进行设置

barWidth : xx,设置柱图宽度

设置单独柱子的颜色

12.饼状图基本设置

饼状图是用整个圆表示总体的数量或整体值“1”，用圆内各个扇形的大小表示各部分数量或该部分占总体的百分比。一般由标题（包括单位）、图例和数据等组成。
1.主要运用在对数据进行比较分析的时候，既可以表示绝对量，又可以表示相对量。
2.比柱形图等好在：数据更为清晰，各部分占总体的比重大小更为直观，可谓一目了然

13.饼状图效果实现

但是饼状图还有更多的效果

环形图 样式等内容设置

14.折线图基本设置

折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。

不仅可以表示数量的多少，而且可以反映同一事物在不同时间里的发展变化的情况。
易于显示数据变化趋势，可以直观地反映这种变化以及各组之间的差别。

15.折线图效果实现

设置平滑过渡样式 并且可以对内容进行颜色的填充 加上对应的标记点

16.折线图堆叠效果

设置多折折线效果

17.散点图基本效果设置

当存在大量数据点时，散点图的作用尤为明显。散点图与折线图相似，而不同之处在于折线图通过将点或数据点相连来显示每一个变化。

18.散点图效果实现

样式相关设置

19.配置项–grid

grid 为直角坐标系内绘图网格。可以在网格上绘制折线图，柱状图 散点图（气泡图）也就是设置图标离容器的距离 样式

20.K 线图

K线图可以查看k线历史走势，近期趋势，是上涨还是下跌，是调整还是震荡。分析k线的高低点和相对高低点。方便对于数据的走势进行查看

基本设置

21 k线图效果优化

22.雷达图

基本设置

23.雷达图效果优化

24.漏斗图 基本设置

25 漏斗图效果实现

26.仪表盘

27. 关系图

创建节点

增加节点样式

创建关系数据与图

28.数据区域缩放

用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

29.基本树形图

树图主要用来可视化树形数据结构，是一种特殊的层次类型，具有唯一的根节点，左子树，和右子树。

30方向切换树形图

31.数据排序

32.内置主题

echarts中默认主题有两个:light、dark

echarts.init(选取容器dom,‘主题’)

33.自定义主题

1.在主题编辑器中编辑主题

主题编辑器地址：https://echarts.apache.org/zh/theme-builder.html

2.下载对应主题json格式

3.创建js文件把刚才下载的文件写入并且暴露

let roma=你的主题json

export default roma

4.引用主题文件

import roma from "../assets/roma"

5.在init方法中使用主题

34.中国地图展示效果

1.准备echarts基本结构

2.设置中国地图的矢量数据创建js文件 （在其中创建变量接受json数据 并且暴露）

地图数据下载地址：https://datav.aliyun.com/portal/school/atlas/area_selector

3.在组件中获取地图矢量数据（引用数据json）

4.使用地图数据创建地图

35.省份地图显示

同中国地图使用方式 就是切换地图数据即可

36.地图标记设置与效果

37.图表自适应大小

当浏览器大小改变的时候 我们需要让图表一同改变 这个时候就会用到图表自适应大小

38.图表加载动画效果

myChart.showLoading();开始等待

myChart.hideLoading();关闭等待

1.设置json-server模拟数据

（1）全局下载 npm install -g json-server

（2）新建mock文件夹 并且在其中创建json文件 设置数据

（3）终端cd到mock文件夹下 启动 json-server --watch xx.json --port 端口号

2.页面请求数据并且设置等待效果

39.图表动画配置

40.echarts 事件

ECharts 中我们可以通过监听用户的操作行为来回调对应的函数。

ECharts 通过 on 方法来监听用户的行为，例如监控用户的点击行为。

有多个图形怎么监听呢？

使用 query 只对指定的组件的图形元素的触发回调：

chart.on(eventName, query, handler);

chart.on('click', 'series', function () {...});
chart.on('click', 'series.line', function () {...});
chart.on('click', 'dataZoom', function () {...});
chart.on('click', 'xAxis.category', function () {...});

下面就在添加一个折线图

41.vue3.0项目创建

1.电脑上安装node.js

网址：https://nodejs.org/zh-cn/

下载自己对应操作系统版本 安装即可

2.全局下载项目脚手架

打开cmd 输入 npm install -g @vue/cli

3.创建项目

把cmd的路径切换到指定路径下 vue create 项目名

(3-1)选择项目配置模板 选择第三项自主选择你项目所需的配置

Please pick a preset: 
  Default ([Vue 2] babel, eslint) vue cli 2 默认的项目模板
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) vue cli 3 默认的项目模板
❯ Manually select features 

(3-2)选择项目配置选项 勾选所需要的模块

? Check the features needed for your project: 
 ◉ Choose Vue version
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

(3-3)选择想要开始项目的Vue.js版本 选择 3.x

? Choose a version of Vue.js that you want to start the project with 
  2.x 
❯ 3.x (Preview) 

(3-4)是否用history模式来创建路由 直接回车默认项目

? Use history mode for router? (Requires proper server setup for index fallback in pr
oduction) (Y/n) 

(3-5)选择CSS 预处理类型 选择LESS

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
  Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
❯ Less 
  Stylus 

(3-6) 选择代码校验会犯 选择第一项 只进行报错提醒

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 

(3-7)询问项目的什么时候校验格式(第一个是保存时，第二个是提交时)

? Pick additional lint features: (Press  to select,  to toggle all,  to 
invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

(3-8)询问项目的配置文件放在那里 (1.独立文件 2.package.json中)

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json 

(3-9)是否保存配置当做后续项目的可选配置 我们选择不保存

? Save this as a preset for future projects? (y/N) 

4运行项目

把cmd的路径切换到你项目名下

npm run serve 启动项目

42.项目初始化？

1.删除src文件夹下的cpmponents文件夹下的Helloword.vue文件

2.删除vuews下的两个.vue文件

3.在views中新建我们的页面文件 homePage.vue文件

4.修改router下的index.js配置路由文件

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/page',
    name: 'About',
    component: () => import('../views/homePage.vue')
  },
  // 设置路由重定向
  {
    path:"/",
    redirect:"/page"
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

5修改根组件默认显示内容与初始化项目样式

到此为止项目已经初始化完毕

43项目分辨率响应式分析与实施

项目基本结构

整体轮廓分为上下结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-35LMkMXU-1648169125716)(file:///Users/xihaoyuan/Desktop/cesi/%E9%A1%B9%E7%9B%AE%E7%AC%94%E8%AE%B0/%E6%9C%AA%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6%E5%A4%B9/1.png?lastModify=1641291361)]

在下半部分区域分为左中右结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3daCGK9A-1648169125716)(file:///Users/xihaoyuan/Desktop/cesi/%E9%A1%B9%E7%9B%AE%E7%AC%94%E8%AE%B0/%E6%9C%AA%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6%E5%A4%B9/2.png?lastModify=1641291361)]

技术栈

1. vue3.0+vue-router4.0+axios
2. flex布局
3. LESS
4. rem屏幕适配
5. echarts5.0

44.项目分辨率响应式创建

我们的项目是需要根据页面的大小改变 做出响应式改变的 所以我们可以使用

我们可以使用 第三方插件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中进行配置

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引用
import 'lib-flexible/flexible.js'

createApp(App).use(store).use(router).mount('#app')

3.修改flexible配置

因为默认情况下只会在540px分辨率一下生效 所以我们需要根据我们的项目分辨率进行调整

在node_module/lib-flexible/flexible.js中修改代码如下

       // 修改原始的
        // if (width / dpr > 540) {
        //     width = 540 * dpr;
        // }
        // var rem = width / 10;

        // 修改成为
          // 最小400px，最大适配2560px
        if (width / dpr < 400) {
            width = 400 * dpr;
        } else if (width / dpr > 2560) {
            width = 2560 * dpr;
        }
        // 设置成24等份，设计稿时1920px的，这样1rem就是80px （1920/24=80）方便使用
        var rem = width / 24;

这个时候重启项目大家打开浏览器调试器 即可发现在浏览器大小改变的时候 在html根节点上会自动设置一个font-size

cssrem插件

我们在写代码的时候发现如果我们都根据80px为1rem在编写代码的时候转换非常的麻烦 所以我们可以在vscode中安装一个cssrem的插件帮助我们进行转换 这样一来开发过程中会更加的方便

配置方式

在vscode扩展中找到 cssrem插件 最新名字叫px to rem & rpx 安装到vscode中 点击右下角设置

修改Root Font Size（基准font-size） 配置项为80即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zqi3VZsT-1648169125717)(Users/xihaoyuan/Desktop/cesi/%E9%A1%B9%E7%9B%AE%E7%AC%94%E8%AE%B0/%E6%9C%AA%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6%E5%A4%B9/3.png?lastModify=1641291361)]

测试与使用

在写css的时候就会出现相应的rem转换结果

45.项目顶部信息条创建

1.设置背景图

把图片方法assets文件夹中 在app.vue中设置背景图

 body{
    background: url('~@/assets/bg.jpg') top center no-repeat;
 }

2.设置标题文字

46.页面主体创建

主体部分是下面的左中右

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9WyrB1B9-1648169125717)(file:///Users/xihaoyuan/Desktop/cesi/%E9%A1%B9%E7%9B%AE%E7%AC%94%E8%AE%B0/%E6%9C%AA%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6%E5%A4%B9/2.png?lastModify=1641291361)]

大容器

1.创建一个大容器来容纳绿色 红色 黄色三个区域

在homepage.vue页面中创建一个大容器

创建容器样式

左中右

接下来我们可以创建左中右这三个部分。那么他们的占比分别是3 5 3 这个时候我们可以使用flex布局来分割他们所占的区块大小

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pHOQXfH9-1648169125717)(file:///Users/xihaoyuan/Desktop/cesi/%E9%A1%B9%E7%9B%AE%E7%AC%94%E8%AE%B0/%E6%9C%AA%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6%E5%A4%B9/4.png?lastModify=1641291361)]

1.创建左中右三个页面容器

2.设置样式

运行之后会发现 页面的左和右占比是页面各的3份。而中间是占比5份

左右图表展示区块容器样式

大家会发现我们要展示的4个区域的容器效果是一样的。所以我们可以剥离成一个组件 然后重复调用即可。并且在其中放置slot槽口 后期方便向容器内插入图表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xFFngPib-1648169125718)(file:///Users/xihaoyuan/Desktop/cesi/%E9%A1%B9%E7%9B%AE%E7%AC%94%E8%AE%B0/%E6%9C%AA%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6%E5%A4%B9/5.png?lastModify=1641291361)]

创建容器组件

在components文件夹下创建 itemPage.vue

编写样式与插槽

在views下的homePage中引用调用使用

运行之后大家会发现左右区块就展现出4个容器

左右每个区块内容插入容器槽口

我们一共4个图标 使用一个公共的组件容器 所以我们编写这4个不同图表的组件并且 分别显示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7GJgvIF8-1648169125718)(file:///Users/xihaoyuan/Desktop/cesi/%E9%A1%B9%E7%9B%AE%E7%AC%94%E8%AE%B0/%E6%9C%AA%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6%E5%A4%B9/6.png?lastModify=1641291361)]

1.创建4个组件 在components下 itemOne.vue等等 一共4个

然后在4个文件中分别设置相关内容与样式（每个图表的标题不一样要修改）

在homePage.vue中引用调用使用这4个组件

中间地图区域容器样式

在views文件夹下的 homePage。vue 中设置中间区域容器样式

  .itemCenter{
    // 高度840px
       height: 10.5rem; 
       border: 1px solid blue;
    //    内边距10px
       padding: 0.125rem; 
    //    外边距20px
       margin: 0.25rem; 
    }

47.图表前期准备

全局设置Echarts与axios

Charts 全局引用

1.下载 npm install --save echarts

2.0的写法

在vue2.0中使用如下写法吧echarts挂载在vue实例上 但是这招在3.0行不通了

在main.js中进行引用和调用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引用
import 'lib-flexible/flexible.js'
// 引用echarts
import * as echarts from "echarts"
Vue.prototype.$echarts=echarts;


createApp(App).use(store).use(router).mount('#app')

vue3中使用Provide/Inject依赖注入，将替代vue2中在原型链上挂载一些属性

在app.vue中使用provider来给后代们提供数据

在想使用的组件中使用inject来接受

在views下的homePage.vue测试

// 引用inject
import {inject} from 'vue'
export default {
    components:{
        ItemPage,itemOne,itemTwo,itemThree,itemFour
    },
    setup(){
    //   测试使用echarts
       let $echarts= inject("echarts")
        console.log($echarts)
    }
}

大家在console中可以看到可以正常使用了

axios全局引用

axios使用于上面相同方式

1.下载 npm install --save axios

2.在app.vue中使用provider来给后代们提供数据

在想使用的组件中使用inject来接受

在views下的homePage.vue测试

// 引用inject
 import {inject} from 'vue'
export default {
    components:{
        ItemPage,itemOne,itemTwo,itemThree,itemFour
    },
    setup(){
    //   测试使用echarts
       let $echarts= inject("echarts")
       let $http= inject("axios")
        console.log($echarts)
        console.log($http)
    }
}

48.后台接口创建express介绍

49.后台路由创建

1.创建一个文件夹 server 在其中创建index.js与router文件夹容来容纳代码

2.在router下创建4个文件分别容纳 对应的接口

// 存放路由的文件
var express=require("express");
var router=express.Router()
// 设置路由
router.get("/data",function(req,res){
    res.send({msg:"第一个接口"})
})

// 暴露路由
module.exports=router

3.在index.js下引用使用刚才创建的内容

var express=require("express");
var app=express();
// 引用路由文件
var chartOne=require("./router/one.js");
var chartTwo=require("./router/two.js");
var chartThree=require("./router/three.js");
var chartFour=require("./router/four.js");
// 中间件中使用路由
app.use("/one",chartOne)
app.use("/two",chartTwo)
app.use("/three",chartThree)
app.use("/four",chartFour)
// 请求是localhost:3000/user/路由文件中的地址
app.listen(3000)

50.api接口数据创建

1.在server文件夹下创建mock文件夹用来容纳数据(数据可以从代码中获取)

2.引用并且把数据返回给前台

var express=require("express");
var router=express.Router()
// 引用数据
let data=require("../mock/one.json")
router.get("/data",function(req,res){
    // 数据返回给前台
    res.send({msg:"第1个接口",data})
})


module.exports=router

50-1.解决跨域

var express=require("express");
var app=express();
app.use(function(req,res,next){
    res.header('Access-Control-Allow-Origin', '*');

    res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');

    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
    // 千万不要网%%￥￥￥###
    // 千万不要网
    // 千万不要网
    next();
})

51.图表1基本设置销售总量

1.在components文件夹下的 itemOne.vue中 设置图表1

2.我们要完成的横向柱状图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PkqhoJrL-1648169125718)(file:///Users/xihaoyuan/Desktop/cesi/%E9%A1%B9%E7%9B%AE%E7%AC%94%E8%AE%B0/%E6%9C%AA%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6%E5%A4%B9/7.png?lastModify=1641291361)]

所以在设置echarts配置的时候。给xAxis 的type设置value数值轴。给yAxis设置 catehory类目轴

3 接下来我们需要图表展示的数据(后台提供)

设置axios请求

在组件内容请求数据

设置请求基准路径

后续我们右很多的请求 或者后期请求地址改变的时候我们在一个个组件的修改非常的麻烦 所以我们可以设置请求基准路径方便修改

1.在app.vue中设置

2.在需要请求的地方只需要写请求的路由地址即可

         async function getState(){
          let chartData=await $http({url:"chartDataOne"})
          console.log(chartData)
       }

52.处理数据

我们请求来的数据事一个数组对象 那么我们需要把x轴的数据于y轴的数据取出来变成两个数组方便echarts使用

动态展示图表

添加echarts

echart图表本身是提供了一个resize的函数的。是当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas。

用window.onresize = myChart.resize; 可以完成自适应，就是把window的onresize事件赋值为echart的resize事件

53.图表一样式修改

柱状图圆角与线段渐变色设置

在components下的itemOne.vue

柱状图的柱状的位置与上面显示文字

54.图表2 地图展示

如果要展示地图那么需要中国地图的矢量数据与省份数据 在public中的map文件夹已经提供了

由于数据实在我们本地 所以 我们在启动项目的时候可以直接在浏览器上输入

http://localhost:8080/map/china.json即可看到数据

我们在components文件夹下创建一个mapPage.vue组件用来容纳地图。同时在views下的homePage.vue中引用调用并且在页面中间的div中使用

获取地图数据

因为我们在项目中app.vue中 设置了 请求基准路径

axios.defaults.baseURL=“http://localhost:3000/”

所以我们不能在使用全局的axiso 否则会使用基准路径完成请求

我们单独引用axios进行数据的请求

当然我们也可以直接引用数据不用请求

import china from ‘map/json/china.json’ //本地路径

就可以不用上面的请求使用

设置地图

echarts.registerMap（名字，数据）

55.设置地图样式

56.在地图上设置散点标记图

57.设置提示框组件的视觉映射效果（地图左下角效果）

设置标题

58.图表3 产品库存统计分析图

获取数据

在components下的itemThree.vue

动态生成图表

59.类别分析图样式修改

60.图表4 产品月销图

数据获取

在components文件夹下的itemTwo.vue中进行设置

动态生成基本折线图

61.折线图样式设置

62.优化

设置提示框等信息

63.图表5 产品库存统计图

基本柱状图

64.完成堆叠效果

65.样式优化

66.项目打包

vue项目中大家在运行的时候我们是需要用内置的devServer帮助我们自动项目 开发过程中没有问题

但是 我们所写的项目今后是需要上公网让用户访问的 所以我们需要把项目放在性能更好的服务器上运行

还有就是 我们所写的是.vue文件 浏览器不认识 没有办法直接解析

所以我们就绪要对当前项目 进行打包 就是把项目编译成 html css js 方便我们把项目放到服务器上也方便浏览器解析

打包流程

1.npm run build命令打包 但是会发现打包之后资源路径有问题

2.修改静态资源路径 publicPath

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/'
}

3.修改路由模式为hash

// 1.需要引入 
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

// 2.修改配置
const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})

67.服务器购买与连接

在购买ECS服务器后，系统会创建一个ECS实例。每一个ECS实例对应一台已购买的云服务器。您可以通过电脑上自带的终端工具访问云服务器，进行应用部署和环境搭建。

1. 在ECS实例列表页面，选择实例的所属地域。

2. 找到目标实例，然后在操作列选择**【更多】> 【密码/密钥】 > 【重置实例密码】**，然后在弹出的对话框设置ECS实例的登录密码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tdCG6Sti-1648169125719)(.\img\1.png)]

3. 在弹出的页面，单击【立即重启】使新密码生效。

4. 在ECS实例列表页面，复制ECS实例的公网IP地址。

5. 连接远程桌面

   （1）方式1 浏览器直接访问

即可连接

​ （2）远程桌面方式

​ 在电脑的开始中搜索远程桌面

​

68.nginx服务器使用

Nginx是一个http服务器。是一个高性能的http服务器及反向代理服务器。官方测试nginx能够支支撑5万并发链接，并且cpu、内存等资源消耗却非常低，运行非常稳定。

代理服务器

代理服务器，客户机在发送请求时，不会直接发送给目的主机，而是先发送给代理服务器，代理服务接受客户机请求之后，再向主机发出，并接收目的主机返回的数据，存放在代理服务器的硬盘中，再发送给客户机。

注意

我们学习的vue的跨域 是基于脚手架内置服务器的 但是我们打包之后这个服务器就不帮助我们启动服务了 所以我们之前配置的跨域设置就作废了

使用

1.解压出nginx得到如下内容

2.打开conf文件夹 复制一份nginx.conf文件 并且修改名字（名字随便起） 这个文件就是nginx的配置文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hprwm5uL-1648169125720)(.\img\9.bmp)]

3.打开Powershell cd到当前nginx路径下 输入 ./nginx.exe -c ./conf/你复制的文件名.conf 启动

4.打开浏览器输入localhost:80即可启动

使用小扩展

记得如果修改服务器内容了 要停止之后在重新启动

打开Powershell cd到当前nginx路径下 输入 ./nginx.exe -c ./conf/你复制的文件名.conf -s stop 停止

69. 项目运行

1.把我们打包好的dist放到根路径下

2.修改我们的.conf文件

3.配置端口

4.在电脑浏览器尝试使用 你的公网ip加端口访问

如不行 重新启动（不要忘了先关闭nginx） 运行浏览器即可看见

70.后端上线

同前端方式