Vue 学习笔记11：Echarts-vue项目

一、基础

1. 基本使用

步骤：

1. 引入 echarts.js 文件

   <script src="echarts.min.js">script>
   

2. 准备一个呈现图标的盒子

   <div style="width: 600px;height: 400px;">div>
   

3. 初始化 echarts 实例对象

4. 准备配置项

5. 将配置项设置给 Echarts 实例对象

   <script>
       // 3. 初始化 echarts 实例对象
       const mCharts = echarts.init(document.querySelector('div'));
   
       // 4. 准备配置项
       let option = {
           xAxis: {
               type: "category",
               data: ["小明", "小红", "小王"]
           },
           yAxis: {
               type: "value"
           },
           series: [{
               name: "语文",
               type: "bar",
               data: [70, 90, 97]
           }]
       }
   
       // 5. 将配置项设置给 Echarts 实例对象
       mCharts.setOption(option)
   script>
   

2. 使用场景

• 柱状图（bar）：柱状图描述的是分类数据，呈现的是每一个分类中【有多少】。
• 折线图（line）：折线图常用来分析数据随时间的【变化趋势】。
• 散点图（scatter / effectScatter）：散点图可以帮助我们推断出不同维度数据之间的【相关性】。
• 饼图（pie）：饼图可以很好地帮助用户快速了解不同分类的数据的【占比情况】。
• 地图（map）：地图主要可以帮助我们从宏观的角度快速看出不同【地理位置】上数据的差异。
• 雷达图（radar）：雷达图可以用来分析【多个维度】的数据与标准数据的对比情况。
• 仪表盘（gauge）：仪表盘可以更直观的表现出某个指标的【进度】或实际情况。

二、进阶

1. 显示相关

• 主题

init 方法有两个参数，第一个参数是 DOM 节点，第二个参数是主题
默认内置了两套主题，light 和 dark

const mCharts = echarts.init(DOM, "light");

自定义主题可以在 Echarts 官网 自定义主题 中下载主题，然后引入。

2. 调色盘

它是一组颜色，图形、系列会自动从其中选择颜色。调色盘遵循就近原则。 主题调色盘，直接引用主题。

• 全局调色盘

  option:{ 		color:['red', 'green', 'blue'] 	} 	
  

• 局部调色盘

  series:[{ 		
  	type:'bar', 		
  	color:['red', 'green', 'blue'] 	
   }] 	
  

3. 样式

• 直接样式： itemStyle、textStyle、lineStyle、areaStyle、label

• 高亮样式： 在 emphasis 中包裹 itemStyle、textStyle、lineStyle、areaStyle、label

• 优先级高，会覆盖主题和调色盘的效果。

4. 自适应

当浏览器的大小发生变化的时候，如果想让图表也能随之适配变化

• 第一种写法：

  window.onresize = function(){
   	myChart.resize() 
   } 
  

• 第二种写法：

  window.onresize = myChart.resize 
  

2. 动画的使用

1. 加载动画

Echarts 已经内置好了加载数据的动画，我们只需要在合适的时机显示或者隐藏即可。

• 显示加载动画

  myCharts.showLoading() 	
  

• 隐藏加载动画

  myCharts.hideLoading() 	
  

2. 增量动画

所有的数据更新都通过 myCharts.setOption() 实现。
不用考虑数据到底产生了哪些变化，Echarts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
新旧 option 的关系不是相互覆盖，而是相互整合，在设置新的 option 时，只需要考虑到变化的部分就可以

btn.onclick = function(){
	var newData = [68, 51, 77]
	var option = {
		series:[
			data: newData
		]
	}
	myCharts.setOption(option)
}

3. 动画配置项

• 开启动画

  animation: true	
  

• 动画时长，value 值可以是数值也可以是函数

  animationDuration: 5000
  

• 缓动动画

  animationEasing: 'bountceOut'
  

• 动画阈值，单种形式的元素数量大于这个阈值时会关闭动画

  animationThreshold: 8
  

3. 交互 API

1. 全局 Echarts 对象
   全局 Echarts 对象是引入 Echarts.js 文件之后就可以直接使用的。

• init 方法
  作用：初始化 Echarts 实例对象，使用主题。
• registerTheme 方法
  作用：注册主题。
  只有注册过的主题，才能在 init 方法中使用该主题。
• registerMap 方法
  作用：注册地图数据
• connect 方法
  作用：一个页面中可以有多个独立的图标，每个图标对应一个 Echarts 实例对象，connect 可以实现多图关联，传入联动目标为 Echarts 实例对象，支持数组。

2. EchartsInstance 对象
   EchartsInstance 对象是通过 echarts.init 方法调用之后得到的实例对象。

• setOption 方法
  作用：设置或修改图标实例的配置项以及数据
  多次调用 setOption 方法会【合并】新的配置和旧的配置
• resize 方法
  作用：重新计算和绘制图表，一般和 window 对象的resize时间结合使用
• on / off 方法
  作用：绑定或者解绑事件处理函数。
  事件参数 arg：传入和事件相关的数据信息。
  鼠标常见事件：click、mousedown、mousemove 等
  Echarts 常见自定义事件：legendselectchanged、mapselectchanged 等
• dispatchAction 方法
  作用：触发某些行为，使用代码模拟用户的行为。
• clear 方法
  作用：清空当前实例，会移除实例中所有的组件和图表。
  清空之后可以再次 setOption
• dispose 方法
  作用：销毁实例，销毁后实例无法再被使用。

三、后端

1. 初始化 Koa

1. 创建文件结构

   mkdir echarts
   cd echarts
   mkdir KOA_SERVER
   cd KOA_SERVER
   
   # 创建入口文件
   touch app.js
   # 创建存放Json数据的文件夹
   mkdir data
   # 创建存放中间件的文件夹
   mkdir middleware
   # 创建读取文件的工具方法
   mkdir utils
   touch utils/file_utils.js
   
   # 创建中间件
   cd middleware
   # 处理业务逻辑的中间件，读取某个json文件的数据
   touch koa_response_data.js
   # 计算服务器消耗时长
   touch koa_response_duration.js
   # 设置响应头
   touch koa_response_header.js
   

2. 安装第三方库

   cd ~/vue/echarts
   npm init -y
   npm i koa
   # 如果直接安装将无法执行nodemon
   sudo npm install -g --force nodemon
   

文件结构

Echarts  # 主文件夹
	├── KOA_SERVER  # 后端目录
	│   ├── app.js  # 后端入口文件
	│   ├── data  # 存放 Json 数据的文件夹
	│   │   ├── budget.json  # 预算开支
	│   │   ├── hotproduct.json  # 热销商品
	│   │   ├── map.json  # 商家分布
	│   │   ├── rank.json  # 销量排行
	│   │   ├── seller.json  # 商家销量
	│   │   ├── stock.json  # 库存信息
	│   │   └── trend.json  # 销量趋势
	│   ├── LearnKoa.js  # Koa 快速上手
	│   ├── middleware  # 中间件的文件夹
	│   │   ├── koa_response_data.js  # 根据访问路径读取某个json文件的数据
	│   │   ├── koa_response_duration.js  # 计算服务器消耗时长
	│   │   └── koa_response_header.js  # 设置响应头
	│   └── utils  # 读取文件的工具方法
	│       └── file_utils.js
	├── node_modules
	│   └── ...
	├── package.json
	├── package-lock.json
	└── README.md

2. Koa 快速上手

// 创建 koa 对象
const koa = require("koa");
const context = require("koa/lib/context");
const app = new koa();

// 第一层中间件
// context 是一个web容器，传入请求和相应的内容。
// 使用 next 调用下一个中间件，返回一个 promise 对象
app.use(async (context, next) => {
  // 进入中间件时想做的事
  console.log("第一层中间件");
  context.response.body = "hell1112656o";
  const res = await next();
  // 离开中间件之后做的事
  console.log(res);
});

// 第二层中间件
app.use((context, next) => {
  console.log("第二层中间件");
  next();
  return "45454";
});

// 第三层中间件
app.use((context, next) => {
  console.log("第三层中间件");
});

app.listen(5000, (err) => {
  if (!err) return console.log("port 5000 is listening...");
  console.log(err);
});

3. 配置服务端

1. 配置入口文件 app.js

   // 创建 koa 对象
   const koa = require("koa");
   const context = require("koa/lib/context");
   const app = new koa();
   
   // 绑定第一层中间件
   const resDurationMiddleware = require("./middleware/koa_response_duration")
   app.use(resDurationMiddleware)
   
   // 绑定第二层中间件
   const resHeaderMiddleware = require("./middleware/koa_response_header")
   app.use(resHeaderMiddleware)
   
   // 绑定第三层中间件
   const resDateMiddleware = require("./middleware/koa_response_data")
   app.use(resDateMiddleware)
   
   app.listen(5000, (err) => {
     if (!err) return console.log("port 5000 is listening...");
     console.log(err);
   });
   

2. 计算服务器响应时长 koa_response_duration.js

   module.exports = async (context, next) => {
     // 记录开始时间
     const start = Date.now();
   
     // 让内层中间件执行
     await next();
   
     // 结束时间
     const end = Date.now()
   
     // 设置响应头 context.set(key, value)
     const duration = end - start
     context.set("X-Response_time", duration + 'ms')
   };
   

3. 设置响应头和跨域 koa_response_header.js

   module.exports = async (context, next) => {
     const contentType = "application/json; charset=utf-8";
     context.set("content-Type", contentType);
     // 允许跨域
     context.set("access-control-allow-origin", "*");
     context.set("access-control-allow-methods", "options,get,put,post,delete");
     await next();
   };
   

4. 指定读取文件业务逻辑 koa_response_data.js

   const path = require("path");
   const fileUtils = require("../utils/file_utils");
   
   module.exports = async (context, next) => {
     // 根据url访问指定文件
     const url = context.request.url;
     let filePath = "../data" + url + ".json";
     filePath = path.join(__dirname, filePath);
   
     try {
       // 访问文件内容
       const ret = await fileUtils.getFileJsonData(filePath);
       context.response.body = ret;
     } catch (error) {
       const errMsg = {
         msg: "文件不存在",
         status: 404,
       };
       context.response.body = JSON.stringify(errMsg);
     }
   
     await next();
   };
   

5. 读取文件内容业务逻辑 file_utils.js

   const fs = require("fs");
   module.exports.getFileJsonData = (filePath) => {
     // 根据文件路径读取文件内容
     return new Promise((resolve, reject) => {
       fs.readFile(filePath, "utf-8", (error, data) => {
         if (error) {
           // 读取文件失败
           reject(error);
         } else {
           resolve(data);
         }
       });
     });
   };
   

四、前端

1. 初始化 Vue

vue create vision

按空格选择自定义特性

选择 vue2

2. 代码

预览：电商平台实时监控系统
代码仓库：https://github.com/iFulling/LearnEcharts