ECharts可视化库学习笔记

最新推荐文章于 2024-05-01 18:39:59 发布

sunshine~~~

最新推荐文章于 2024-05-01 18:39:59 发布

阅读量931

点赞数 4

本文链接：https://blog.csdn.net/qq_45192089/article/details/115771335

版权

数据可视化

Day01
Day02
Day03 电商平台数据可视化项目（未完）
- 1、Koa2的使用

Day01

1、什么是数据可视化

1.1 什么是数据可视化

更加直观的展示数据，数据可视化可以清晰有效地传递信息；

1.2 可视化的实现方式

报表类：Excel、水晶报表
商业智能BI：Microsoft BI、Power-BI
编码类：ECharts.js、D3.js

ECharts是由百度开发的开源可视化库；
D3.js是国外的；

2、ECharts的基本使用

2.1 ECharts的介绍

ECharts是一个使用Javascript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZReader,提供直观，交互丰富，可高度个性化定制的数据可视化图表；

特点：
1、开源免费
2、功能丰富
3、社区活跃

https://echarts.apache.org/zh/index.html

丰富的可视化类型

折线图、柱状图、饼图、K线图…
https://echarts.apache.org/zh/index.html

多种数据格式支持

key-value数据格式；
二维表；
TypeArray格式；

流数据的支持

流数据的动态渲染；
增量渲染技术；

还有：移动端优化、跨平台使用、绚丽的特效、三维可视化…
https://echarts.apache.org/zh/feature.html

2.2 ECharts的快速入门

步骤1：引入echarts.js文件
步骤2：准备一个呈现图表的盒子；
步骤3：初始化echarts实例对象；
步骤4：准备配置项；
步骤5：将配置项设置给echarts实例对象；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 步骤1：引入echarts.js文件 -->
    <script src="echarts.min.js"></script>
</head>

<body>
    <!-- 
     步骤1：引入echarts.js文件
     步骤2：准备一个呈现图表的盒子；
     步骤3：初始化echarts实例对象；
     步骤4：准备配置项；
    步骤5：将配置项设置给echarts实例对象； -->

    <!-- 步骤2：准备一个呈现图表的盒子； -->
    <div style="width: 600px;height: 400px;"></div>

    <script>
        window.onload = function () {
            // 步骤3：初始化echarts实例对象；基于准备好的dom，初始化echarts实例
            var myEchart = echarts.init(document.querySelector("div"));

            // 步骤4：准备配置项；
            var option = {
                title:{
                    text:"ECharts入门示例"
                },
                tooltip:{},
                legend:{
                    data:['销量']
                },
                xAxis:{
                    data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis:{},
                series:[{
                    name:'销量',
                    type:'bar',
                    data:[5, 20, 36, 10, 10, 20]
                }]
            };

            myEchart.setOption(option);

        }
    </script>
</body>

</html>

配置项的使用：
除了配置项会变化之外，其他的代码都是固定的；
配置项的学习和使用应该参照官方文档和示例；
https://echarts.apache.org/zh/option.html#title

2.3 ECharts的常用图表

通用配置

通用配置指的就是任何图表都能使用的配置；

标题：title

文字样式：textStyle
标题边框：borderWidth、borderColor、borderRadius
标题位置：left、top、right、bottom

title: {
        text: "柱状图的基本实现和常见效果",
        // 文字样式
        textStyle:{
              color:"red"
        },
        borderWidth:5,
        borderColor:"red",
        borderRadius:5
 }

提示：tooltip

tooltip:提示框组件，用于配置鼠标滑过或点击图表时的显示框；
触发类型 trigger：item 、axis
触发时机 triggerOn:mouseover、click
格式化 formatter:字符串模板、回调函数

tooltip:{
         // trigger:'item'
         trigger:'axis',
         triggerOn:'click',
         // formatter:'{b}:{c}'
         formatter:function(args){
         // console.log(args);
         return args[0].name +"的" +args[0].seriesName+"成绩是"+args[0].data;
         }
       }

工具按钮：toolbox

toolbox:ECharts提供的工具栏；
内置有导出图片，数据视图、数据区域缩放、恢复（重置）、动态类型切换五个工具；
显示工具栏按钮 feature：
saveAsImage、dataView、dataZoom、restore、magicType

toolbox:{
         feature:{
                saveAsImage:{}, // 导出图片
                dataView:{},  // 数据视图
                restore:{}, //重置
                dataZoom:{}, //区域缩放
                magicType:{    // 动态图表类型的切换
                        type:['bar','line']
                        }
                    }
                }

图例：legend

legend：图例，用于筛选系列，需要和series配合使用；
legend中的data是一个数组；
legend中的data的值需要和series数组中的某组数据的name值一致；

legend:{
       data:['语文','数学']
 },

总结

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 步骤1：引入echarts.mim.js文件 -->
    <script src="echarts.min.js"></script>
</head>

<body>
    <!-- 步骤2:准备一个呈现图表的盒子 -->
    <div style="width: 600px;height: 400px;"></div>
    <script>
        window.onload = function () {
            // 步骤3：初始化echarts实例对象；基于准备好的dom，初始化echarts实例
            var myBar = echarts.init(document.querySelector("div"));

            // 步骤4：准备配置项；
            var option = {
                // 标题
                title: {
                    text: "柱状图的基本实现和常见效果",
                    // 文字样式
                    textStyle:{
                        color:"red"
                    },
                    borderWidth:5,
                    borderColor:"red",
                    borderRadius:5
                },
                // 提示框
                tooltip:{
                    // trigger:'item'
                    trigger:'axis',
                    triggerOn:'click',
                    // formatter:'{b}:{c}'
                    formatter:function(args){
                        // console.log(args);
                        return args[0].name +"的" +args[0].seriesName+"成绩是"+args[0].data;
                    }
                },
                // 工具栏
                toolbox:{
                    feature:{
                        saveAsImage:{}, // 导出图片
                        dataView:{},  // 数据视图
                        restore:{}, //重置
                        dataZoom:{}, //区域缩放
                        magicType:{    // 动态图表类型的切换
                            type:['bar','line']
                        }
                    }
                },
                // 图例：用于筛选系列
                legend:{
                    data:['语文','数学']
                },

                xAxis: {
                    type: "value"
                },
                yAxis: {

                    type: "category",
                    data: ["张三", "王五", "李四"]
                },
                // 系列
                series: [
                    {
                    name: "语文",
                    type: "bar",
                    data: [90, 88, 100],
                    // markPoint 配置最大值和最小值
                    markPoint: {
                        data: [
                            { type: "max", name: "最大值" },
                            { type: "min", name: "最小值" }
                        ]
                    },
                    // markLine:平均值
                    markLine: {
                        data: [
                            { type: "average", name: "平均值" }
                        ]
                    },
                    // 数值显示
                    label: {
                        show: true,
                        rotate: 60,
                        position: 'inside'
                    },
                    // 柱宽度
                    barWidth: '30%'
                },

                {
                    name: "数学",
                    type: "bar",
                    data: [8, 7, 5],
                    // markPoint 配置最大值和最小值
                    markPoint: {
                        data: [
                            { type: "max", name: "最大值" },
                            { type: "min", name: "最小值" }
                        ]
                    },
                    // markLine:平均值
                    markLine: {
                        data: [
                            { type: "average", name: "平均值" }
                        ]
                    },
                    // 数值显示
                    label: {
                        show: true,
                        rotate: 60,
                        position: 'inside'
                    },
                    // 柱宽度
                    barWidth: '30%'
                }
            ]
        };

            // 步骤5：将配置项设置给echarts实例对象
            myBar.setOption(option);
        }
    </script>
</body>

</html>

图表一：柱状图

基本的柱状图：
基本的代码结构；
x轴和y轴的数据；
series中的type设置为bar;

柱状图常见效果：
最大值/最小值：markPoint；
平均值：markLine;
数值的显示：label;
柱的宽度：barWidth；

柱状图的特点：
柱状图描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图，可以很清晰的看出每个分类数据的排名情况；

<!-- 步骤1：引入echarts.mim.js文件 -->
 <script src="echarts.min.js"></script>

<!-- 步骤2:准备一个呈现图表的盒子 -->
    <div style="width: 600px;height: 400px;"></div>

// 步骤3：初始化echarts实例对象；基于准备好的dom，初始化echarts实例
var myBar = echarts.init(document.querySelector("div"));

// 步骤4：准备配置项；
            var option = {
                title: {
                    text: "柱状图的基本实现和常见效果"
                },
                xAxis: {
                    type: "value"
                },
                yAxis: {

                    type: "category",
                    data: ["张三", "王五", "李四"]
                },
                series: {
                    name: "语文",
                    type: "bar",
                    data: [90, 88, 100],
                    // markPoint 配置最大值和最小值
                    markPoint: {
                        data: [
                            { type: "max", name: "最大值" },
                            { type: "min", name: "最小值" }
                        ]
                    },
                    // markLine:平均值
                    markLine: {
                        data: [
                            { type: "average", name: "平均值" }
                        ]
                    },
                    // 数值显示
                    label: {
                        show: true,
                        rotate: 60,
                        position: 'inside'
                    },
                    // 柱宽度
                    barWidth: '30%'
                }
            };

// 步骤5：将配置项设置给echarts实例对象
myBar.setOption(option);

图表二：折线图

折线图常见效果：
标记：最大值最小值平均值标注区间
markPoint、markLine、markArea
线条控制：平滑风格
smooth、lineStyle
填充风格
areaStyle
紧挨边缘
boundaryGap
缩放：脱离0值比例
scale
堆叠图

<!-- 步骤1：引入echarts.mim.js文件 -->
    <script src="echarts.min.js"></script>

 <!-- 步骤2:准备一个呈现图表的盒子 -->
    <div style="width: 600px;height: 400px;"></div>

// 步骤3：初始化echarts实例对象；基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.querySelector("div"));

//  步骤4：准备配置项
            var option = {
                xAxis: {
                    type: "category",
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    // 紧挨边缘
                    boundaryGap:false,
                },
                yAxis: {
                    type: "value",
                    // 支持缩放
                    scale:true
                },
                series: [
                    {
                        name: "康师傅",
                        type: "line",
                        data: [1000, 1000, 8000, 3900, 1000, 1000, 8000, 3909, 1900, 1080, 8000, 3099],
                        stack:"all",
                        // 最大值和最小值
                        markPoint: {
                            data: [
                                { type: 'max' },
                                { type: 'min' }
                            ]
                        },
                        // 平均值
                        markLine: {
                            data: [
                                { type: "average" }
                            ]
                        },
                        // 标注区间
                        markArea: {
                            data: [
                                [
                                    { xAxis: "1月" },
                                    { xAxis: "2月" }
                                ],
                                [
                                    { xAxis: "7月" },
                                    { xAxis: "8月" }
                                ]

                            ]
                        },
                        // 线条控制：平滑
                        smooth:true,
                        // 线条风格
                        lineStyle:{
                            color:"green",
                            type:"dashed",
                        },
                        // 填充风格
                        areaStyle:{}
                    },
                    {
                        name: "牛师傅",
                        type: "line",
                        data: [10000, 10000, 8000, 3900, 100, 1000, 8000, 3990, 190, 100, 800, 399],
                        stack:"all",
                        // 最大值和最小值
                        markPoint: {
                            data: [
                                { type: 'max' },
                                { type: 'min' }
                            ]
                        },
                        // 平均值
                        markLine: {
                            data: [
                                { type: "average" }
                            ]
                        },
                        // 标注区间
                        markArea: {
                            data: [
                                [
                                    { xAxis: "1月" },
                                    { xAxis: "2月" }
                                ],
                                [
                                    { xAxis: "7月" },
                                    { xAxis: "8月" }
                                ]

                            ]
                        },
                        // 线条控制：平滑
                        smooth:true,
                        // 线条风格
                        lineStyle:{
                            color:"green",
                            type:"dashed",
                        },
                        // 填充风格
                        areaStyle:{}
                    }
                ]
            };

// 步骤5：把配置项设置给echarts实例对象
            myChart.setOption(option);

图表三：散点图

散点图的特点：
散点图可以帮助我们推断出变量间的相关性；
散点图也经常用于在地图的标注上；

基本的散点图：
基本的代码结构
x轴和y轴的数据，是一个二维数组；
series中的type设置为scatter；
xAxis和yAxis中的type设置为value；

常见效果：
气泡图效果：
散点的大小不同 symbolSize
散点的颜色不同 itemStyle.color

涟漪动画效果：
type:effectScatter
showEffectOn:“emphasis”,
rippleEffect:{}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.min.js"></script>
</head>

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

    <script>
        window.onload = function () {
            var myChart = echarts.init(document.querySelector("div"));

            var option = {
                xAxis: {
                    type: "value",
                },
                yAxis: {
                    type: "value"
                },
                series: {
                    // type:"scatter",
                    type:"effectScatter",
                    showEffectOn:"emphsis",
                    symbolSize:10,
                    itemStyle:{
                        color:"red"
                    },
                    rippleEffect:{
                        scale:5
                    },
                    data: [
                        [10.0, 8.04],
                        [8.07, 6.95],
                        [13.0, 7.58],
                        [9.05, 8.81],
                        [11.0, 8.33],
                        [14.0, 7.66],
                        [13.4, 6.81],
                        [10.0, 6.33],
                        [14.0, 8.96],
                        [12.5, 6.82],
                        [9.15, 7.20],
                        [11.5, 7.20],
                        [3.03, 4.23],
                        [12.2, 7.83],
                        [2.02, 4.47],
                        [1.05, 3.33],
                        [4.05, 4.96],
                        [6.03, 7.24],
                        [12.0, 6.26],
                        [12.0, 8.84],
                        [7.08, 5.82],
                        [5.02, 5.68]
                    ],
                }
            };

            myChart.setOption(option);
        }
    </script>
</body>

</html>

直角坐标系中的常用配置

直角坐标系图表：柱状图、折线图、散点图

配置1：网格 Grid

grid是用来控制直角坐标系的布局和大小；
x轴和y轴就是在Grid的基础上进行绘制的；

显示grid:show
grid的边框：borderWidth、borderColor
grid的位置和大小：left、top、right、bottom、width、height

配置2：坐标轴axis

坐标轴分为x轴和y轴
一个grid中最多有两种位置的x轴和y轴；

（1）坐标轴类型type
value:数值轴，自动会从目标数据中读取数据；
category：类目轴，该类型必须通过data设置类目数据；

（2）显示位置position
xAxis：可取值为top或者bottom
yAxis:可取值为left或者right

（3）dataZoom区域缩放配置
dataZoom用于区域缩放，对数据范围过滤，x轴和y轴都可以拥有；

dataZoom是一个数组，意味着可以配置多个区域缩放器：
（a）类型type:
slider:滑块
inside：内置，依靠鼠标滚轮或者双指缩放；

（b）指明产生作用的轴：
xAxisIndex:设置缩放组件控制的是哪个x轴，一般写0即可；
yAxisIndex：设置缩放组件控制的是哪个y轴，一般写0即可；

（c）指明初始状态的缩放情况
start：数据窗口范围的起始百分比；
end：数据窗口范围的结束百分比；

配置3：区域缩放dataZoom

图表四：饼图

基本的结构：
基本的代码结构；
数据是由name和value组成的对象所形成的数组；
series中的type设置为pie;
无须配置xAxis和yAxis;

饼图常见效果：

显示文字的格式化：
label.formatter；
圆环:
设置两个半径radius：[‘50%’,‘70%’]；

 radius:80,  // 饼图的半径
 // radius:'20%',  // 百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
 // radius:['50%','70%']  // 第0个元素代表的是内圆的半径，第1个元素代表的是外圆的半径

南丁格尔图:
roseType:‘radius’；南定格尔图饼图的每一个区域的半径是不同的

 roseType:'radius',  //南定格尔图 饼图的每一个区域的半径是不同的

选中效果
选中模式 selectedMode:single/multiple;
选中偏移量：selectedOffset:30

饼图的特点：
饼图可以很好地帮助用户快速了解不同分类的数据的占比情况；

图表五：地图

在这里插入图片描述

图表六：雷达图

雷达图的实现步骤：
定义各个维度的最大值
定义图表的类型；

雷达图的特点：
雷达图可以用来分析多个维度的数据与标准数据的对比情况；

<!-- 步骤1： 导入echarts.min.js文件 -->
<script src="echarts.min.js"></script>

<!--步骤2：放置图表的容器-->
<div style="width: 600px;height: 400px;"></div>

<!-- 步骤3：初始化实例对象echarts -->
var radar = echarts.init(document.querySelector("div"));

<!-- 定义各个维度的最大值 -->

var dataMax = [
     { name: "易用性", max: 100 },
     { name: "功能", max: 100 },
     { name: "拍照", max: 100 },
     { name: "跑分", max: 100 },
     { name: "续航", max: 100 },
     ];


 // radar 多个维度的最大值
    radar: {
             indicator: dataMax,  //指示器
             shape:"circle", // 配置雷达图最外层的图形
                },

<!-- 设置图表类型为雷达图 -->
series: [
                    {
                        type: "radar",  // 此图表时一个雷达图
                        // 显示数值
                        label:{
                            show:true
                        },
                        // 将每一个产品的雷达图形成阴影的面积
                        areaStyle:{},
                        data: [
                            {
                                name: "华为手机",
                                value: [100, 90, 80, 90, 100]
                            },
                            {
                                name: "小米手机",
                                value: [70, 90, 80, 90, 100]
                            },
                            {
                                name: "苹果手机",
                                value: [100, 60, 80, 90, 100]
                            }
                        ]
                    }
                ]

<!-- 把配置项设置给echarts实例对象 -->
radar.setOption(option);

图表七：仪表盘图

常用效果：
数值范围：max、min;
多个指针：增加data中的数组元素；
多个指针颜色差异：itemStyle

仪表图的特点：
仪表盘主要用在进度把控以及数据范围的监测；

在这里插入图片描述

Day02

1、显示相关

1.1 主题

1.1.1 内置主题

ECharts中默认内置了两套主题：light、dark；
在初始化对象方法init中可以指明：

var chart = echarts.init(dom, 'light');
var chart = echarts.init(dom, 'dark');

init方法有两个参数，第一个参数代表是一个dom节点，第二个参数代表的是要使用哪一套主题

1.1.2 自定义主题

1、在主题编辑器中编辑主题：https://echarts.apache.org/zh/theme-builder.html；
2、下载主题，是一个js文件；
3、引入主题js文件；
4、在init方法中使用主题；

1.2 调色盘

调色盘它是一组颜色、图形和系列会自动从其中选择颜色；

主题调色盘：在注册主题的时候的一个color节点；
全局调色盘：var option = {color:[] },全局调色盘会覆盖主题调色盘；
局部调色盘：series:[{type:"bar",color:[''red",]}]

调色盘的作用遵循就近原则；

颜色渐变

线性渐变：
在这里插入图片描述
径向渐变：

1.3 样式

直接样式

textStyle:控制标题的文字样式
itemStyle:控制某一区域的样式
lineStyle、areaStyle、label

高亮样式

在emphsis中包裹itemStyle、textStyle、lineStyle、areaStyle、label

1.4 自适应

当浏览器的大小发生变化的时候，如果想让图表也能随之适配变化；
1、监听窗口大小变化事件
2、在事件处理函数中调用ECharts实例对象的resize即可；

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

2、动画的使用

2.1 加载动画

ECharts已经内置好了加载数据的动画，我们只需要在合适的时机显示或者隐藏即可；
显示加载动画
myChart.showLoading()

隐藏加载动画
myChart.hideLoading()

在这里遇到了如下错误：

Access to XMLHttpRequest at 'file:///F:/2021%E6%98%A5/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/Echarts-study/day02/textData.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

原因：同源策略的限制；
解决：在VScode下载live server插件，Live Server是一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用Live Server作为一个实时服务器实时查看开发的网页或项目效果。

2.2 增量动画

myCharts.setOption(option)
所有数据的更新都通过setOption实现；
不用考虑数据到底产生了哪些变化；
ECharts会找到两组数据之间的差异然后通过合适的动画去表现数据的变化；

 modify.addEventListener('click', function () {
                // setOption可以设置多次
                // 新旧option的关系并不是相互覆盖的关系，而是相互整合的关系
                // 我们在设置新的option的时候，只需要考虑到变化的部分就可以
                var option = {
                    series:{
                        data: [30, 10, 20]
                    }
                };
                mychart.setOption(option);
            });
            add.addEventListener('click', function () {
                var option = {
                    xAxis: {
                    data: ['小米', "小明", "校长","san"]
                },
                    series:{
                        data: [30, 10, 20, 50]
                    }
                };
                mychart.setOption(option);
            });

2.3 动画的配置

开启动画

animation：true

动画时长

animationDuration:5000

缓动动画

animationEasing:“bounceOut”

动画阈值

animationThreshold:10;
单种形式的元素数量大于这个阈值时会关闭动画；
在这里插入图片描述

3、交互API

全局ECharts对象常用方法

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

（1）init

初始化ECharts实例对象；
使用主题；

（2）registerTheme

注册主题；
只有注册过的主题，才能再init方法中使用该主题；

（3）registerMap

（4）connect

将多个图表进行关联；
一个页面中可以有多个独立的图表；
每一个图表对应一个ECharts实例对象；
connect可以实现多图关联、传入联动目标为ECharts实例对象，支持数组：
保存图片的自动拼接
刷新按钮
重置按钮
提示框联动、图例选择、数据范围修改等；

echartsInstance对象

echartsInstance对象是通过echarts.init方法调用之后得到的；

（1）setOption方法

设置或修改图表的配置项以及数据；
多次调用setOption方法：合并新的配置项和旧的配置项、增量动画；

（2）resize方法

重新计算和绘制图表
一般和window对象的resize事件结合使用：

window.onresize = function(){
     mychart.resize();
}

（3）on/off 方法

绑定或者解绑事件处理函数；
鼠标事件：
常见事件：‘click’、‘dbclick’、‘mousedown’、‘mousemove’、'mouseup’等；
事件参数event：和事件相关的数据信息；

Echarts事件：
常见事件：legendselectedchanged、‘datazoom’、'pieselectchanged’等；
事件参数event：和事件相关的数据信息；

（4）dispatchAction方法

触发某些行为；
使用代码模拟用户的行为；

myCharts.dispatchAction({
   type:"highlight", // 事件类型
   seriesIndex:0, // 图标索引
   dataIndex:1, // 图表中哪一项高亮

})

（5）clear方法

清空当前实例，会移除实例中所有的组件和图表；
清空之后可以再次setOption；

（6）dispose方法

销毁实例；
销毁后实例无法再次使用；

Day03 电商平台数据可视化项目（未完）

1、Koa2的使用

1.1 Koa2的介绍

基于Node.js平台的web开发框架；
由Express原班人马打造；

框架名	作用	异步处理
Express	web框架	回调函数
Koa	web框架	Generator+yield
Koa2	web框架	async/await

环境依赖Node v7.6.0及以上；

Koa2的特点：
1、支持async/await
2、洋葱模型的中间件

1.2 Koa2快速上手

1、检查node的环境：node -v;
2、安装koa：npm init -y; npm install koa;
3、创建并编写app.js文件；
（1）创建koa对象；
（2）编写响应函数（中间件）；
（3）监听端口；
4、启动服务：node app.js

1.3 Koa2中间件的特点

Koa对象通过use方法加入一个中间件；
一个中间件就是一个函数；
中间件的执行顺序符合洋葱模型；
内层中间件能否执行取决于外层中间件的next函数是否调用；
调用next函数得到的是Promise对象；

app.use(async(ctx, next)=>{
  // 刚进入中间件想做的事情
  await next()
  //内层所有中间件结束之后想做的事情；
  
})

sunshine~~~

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
ECharts可视化库学习笔记

数据可视化Day011、什么是数据可视化1.1 什么是数据可视化1.2 可视化的实现方式2、ECharts的基本使用2.1 ECharts的介绍丰富的可视化类型多种数据格式支持流数据的支持2.2 ECharts的快速入门2.3 ECharts的常用图表图表一：柱状图图表二：折线图图表三：散点图图表四：饼图图表五：地图图表六：雷达图图表七：仪表盘图Day011、什么是数据可视化1.1 什么是数据可视化更加直观的展示数据，数据可视化可以清晰有效地传递信息；1.2 可视化的实现方式报表类：Excel、
复制链接

扫一扫