Aiden's blog
wushengxin
2021-08-31
目录

Echarts

# Echarts初级

步骤：

  1. 步骤1：引入echarts.js文件
  2. 步骤2：准备一个呈现图表的盒子
  3. 步骤3：初始化echarts实例对象init()，准备div的DOM容器
  4. 步骤4：准备配置项option对象
  5. 步骤5：将配置项设置给echarts实例对象
  • mCharts.setOption(option)

实例：

  • vue-cli安装运行依赖echarts和lodash
  • 导入echarts和合并的lodash
import echarts from 'echarts'
import _ from 'lodash'
1
2
  • 页面加载完dom时调用echarts

  • 接口数据options拼接数据

    • 复制后台options数据

    image-20200829175249339

# 相关配置讲解

  • xAxis直角坐标中的x轴
    • type
      • category类目轴
    • data
      • 数组
  • yAxis指标坐标中的y轴
    • type
      • value数值轴
  • series系列列表，每个系列通过type决定自己的图表类型
    • type图表类型
      • bar柱状图
      • line折现图
      • pie饼图
    • data
      • 存放y轴的数据
    • name
      • 语文

# 柱状图

  • 常用来数据排名

  • 在series下设置type:bar

  • 标记：最大值、最小值、平均值

  • series(对象)

    • type类型(字符串)
      • bar
    • datay轴的数据（数组）
    • markPoint最大值、最小值(对象)
      • data数组
        • type对象
          • max
          • min
        • name
    • markLine平均值(对象)
      • data数组
        • type对象
          • average
          • name
    • label数值显示(对象)
      • show
        • true
      • rotate数值旋转(数字)
        • 60
      • position(字符串)
        • inside显示在内部
    • barWidth(字符串)
      • 30%

  • 横向柱状图

    • xAxis与yAxis的数据换一下即可

# 柱状图Series

  • 是一个数组，里面存放对象
  • 每个对象为一个系列，系列代表各个图类型
series: {
        type: 'bar',
        name:'语文',
        markPoint: {
          data: [
            {
              type: 'max',
              name: '最大值'
            },
            {
              type: 'min',
              name: '最小值'
            }
          ]
        },
        markLine:{
          data:[
            {
              type:'average',
              name:'平均值'
            }
          ]
        },
        label:{
          show:true,
          rotate:60,
          position:'inside'
        },
        barWidth:'50%',
        data: yDataArr
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 柱状图案例

<div style="width: 600px;height: 400px;"></div>
  <script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = ['88', '92', '63', '77', '94', '80', '72', '86']
    var option = {
      title: {
        text: '成绩展示',
        textStyle: {
          color: 'red'
        },
        borderWidth: 5,
        borderColor: 'blue',
        borderRadius: 5,
        top: 10,
        left: 50
      },
      tooltip: {
        trigger: 'axis',
        triggerOn: 'click',
        // formatter:'{b} 的成绩是 {c}'
        formatter: function (arg) {
          console.log(arg)
          return arg[0].name + '的分数是' + arg[0].data
        }
      },
      toolbox: {
        feature: {
          saveAsImage: {}, //导出图片
          dataView: {}, //数据视图
          restore: {}, //重置
          dataZoom: {}, //区域缩放
          magicType: {  //动态图表切换
            type: ['bar', 'line']
          }
        }
      },
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'bar',
          name: '语文',
          markPoint: {
            data: [
              {
                type: 'max',
                name: '最大值'
              },
              {
                type: 'min',
                name: '最小值'
              }
            ]
          },
          markLine: {
            data: [
              {
                type: 'average',
                name: '平均值'
              }
            ]
          },
          label: {
            show: true,
            rotate: 60,
            position: 'inside'
          },
          barWidth: '50%',
          data: yDataArr
        }
      ]
    }
    mCharts.setOption(option)
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

# 通用配置

任何图标都能使用的配置

  • 标题：title
    • 文字样式
      • textStyle
    • 标题边框
      • borderWidth
      • borderColor
      • borderRadius
    • 标题位置
      • left
      • top
      • right
      • bottom
title:{
        text:'成绩展示',
        textStyle:{
          color:'red'
        },
        borderWidth:5,
        borderColor:'blue',
        borderRadius:5,
        top:10,
        left:50
      },
1
2
3
4
5
6
7
8
9
10
11
  • 提示：tooltip(鼠标滑过或点击图标的显示框)
    • 触发类型trigger
      • item
      • axis
    • 触发时机triggerOn
      • mouseover
      • click
    • 格式化formatter
      • 字符串模板{a}{b}{c}
      • 回调函数
        • 参数arg
tooltip:{
        trigger:'item',
        triggerOn:'click',
        // formatter:'{b} 的成绩是 {c}'
        formatter:function(arg){
          console.log(arg)
          return arg[0].name + '的分数是' + arg[0].data
        }
      },
1
2
3
4
5
6
7
8
9
  • 工具按钮：toolbox(导出图片、数据视图、动态类型切换、数据区域缩放、重置)
    • feature节点
      • saveAsImage导出图片
      • dataView数据视图
      • restore重置
      • dataZoom区域缩放
      • magicType
        • type数组
          • bar
          • line
toolbox:{
        feature:{
          saveAsImage:{}, //导出图片
          dataView:{}, //数据视图
          restore:{}, //重置
          dataZoom:{}, //区域缩放
          magicType:{  //动态图表切换
            type:['bar','line']
          }
        }
      }
1
2
3
4
5
6
7
8
9
10
11
  • 图例：legend(用于筛选系列，需要和series配合使用)
    • data(数组，数组写入series中name字段的值)
      • 值为series里面的name
legend:{
        data:['语文','数学']
      }
1
2
3

# 折线图

  • 常用于数据随时间的变化趋势

  • 在series下设置type:line

  • 标记：最大值、最小值、平均值、标注区间

    • series下
      • markPoint
      • markLine
      • markArea
markPoint: {
            data: [
              {
                type: 'max'
              },
              {
                type: 'min'
              }
            ]
          },
          markLine: {
            data:[
              {
                type:'average'
              }
            ]
          },
          markArea:{
            data:[
              [
                {
                  xAxis:'1月'
                },
                {
                  xAxis:'2月'
                }
              ],
              [
                {
                  xAxis:'7月'
                },
                {
                  xAxis:'8月'
                }
              ]
            ]
          }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
  • 线条的控制:平滑风格smooth
    • series
      • smooth
        • true
  • 线条样式lineStyle
    • series
      • lineStyle
        • color
        • type
          • dashed
          • dotted
          • solid
smooth:true,
lineStyle:{
  color:'blue',
  type:'dashed' //dotted solid
}
1
2
3
4
5
  • 填充风格areaStyle
    • series
      • areaStyle
        • color
areaStyle:{
  color:'pink'
}
1
2
3
  • 紧挨y轴边缘boundaryGap
    • xAxis
      • boundaryGap
        • false
  • 缩放，脱离0值比列scale
    • yAxis
      • scale
        • true
xAxis: {
    type: 'category',
    data: xDataArr,
    boundaryGap:false
  },
  yAxis: {
    type: 'value',
    scale:true
  }
1
2
3
4
5
6
7
8
9
  • 堆叠图stack
    • series
      • stack
        • all
series: [
    {
      type: 'line',
      name: '康师傅',
      data: yDataArr,
      stack:'all'
    },
    {
      type:'line',
      data:yDataArr2,
      stack:'all'
    }
  ]
1
2
3
4
5
6
7
8
9
10
11
12
13

# 折线图案例

<div style="width: 600px;height: 400px;"></div>
  <script>
    var myCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    var yDataArr = ['3000', '2800', '900', '1000', '800', '700', '1400', '1300', '900', '1000', '800', '600']
    var options = {
      xAxis: {
        type: 'category',
        data: xDataArr,
        boundaryGap:false
      },
      yAxis: {
        type: 'value',
        scale:true
      },
      series: [
        {
          type: 'line',
          name: '康师傅',
          data: yDataArr,
          markPoint: {
            data: [
              {
                type: 'max'
              },
              {
                type: 'min'
              }
            ]
          },
          markLine: {
            data:[
              {
                type:'average'
              }
            ]
          },
          markArea:{
            data:[
              [
                {
                  xAxis:'1月'
                },
                {
                  xAxis:'2月'
                }
              ],
              [
                {
                  xAxis:'7月'
                },
                {
                  xAxis:'8月'
                }
              ]
            ]
          },
          smooth:true,
          lineStyle:{
            color:'blue',
            type:'solid' //dotted solid dashed
          },
          areaStyle:{
            color:'pink'
          }
        }
      ]
    }
    myCharts.setOption(options)
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

折线图之堆叠图案例：

<div style="width: 600px;height: 400px;"></div>
  <script>
    var myCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    var yDataArr = ['3000', '2800', '900', '1000', '800', '700', '1400', '1300', '900', '1000', '800', '600']
    var yDataArr2 = ['2000', '3800', '1900', '500', '900', '1700', '2400', '300', '1900', '1500', '1800', '200']
    var options = {
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          type: 'line',
          name: '康师傅',
          data: yDataArr,
          stack:'all',
          areaStyle:{}
        },
        {
          type:'line',
          data:yDataArr2,
          stack:'all',
          areaStyle:{}
        }
      ]
    }
    myCharts.setOption(options)
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 散点图

  • 可以帮助我们推断出变量间的相关性,推断出不同维度数据之间的相关性
    • 比如身高和体重的关系
  • 散点图也经常用在地图的标注上
  • 在series下设置type:scatter
  • xAxis和yAxis的type都要设置为value
  • 将坐标轴都设置为脱离0值比例，scale
<div style="width: 600px;height:400px"></div>
  <script>
    //1. ECharts最基本的代码结构
    //2. x轴和y轴数据 二维数组 [ [身高,体重],...   ]
    //3. 将type的值设置为scatter, x轴和y轴的type都是value
    var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 }, { "gender": "female", "height": 167.5, "weight": 59 }, { "gender": "female", "height": 159.5, "weight": 49.2 }, { "gender": "female", "height": 157, "weight": 63 }, { "gender": "female", "height": 155.8, "weight": 53.6 }, { "gender": "female", "height": 170, "weight": 59 }, { "gender": "female", "height": 159.1, "weight": 47.6 }, { "gender": "female", "height": 166, "weight": 69.8 }, { "gender": "female", "height": 176.2, "weight": 66.8 }, { "gender": "female", "height": 160.2, "weight": 75.2 }, { "gender": "female", "height": 172.5, "weight": 55.2 }, { "gender": "female", "height": 170.9, "weight": 54.2 }, { "gender": "female", "height": 172.9, "weight": 62.5 }, { "gender": "female", "height": 153.4, "weight": 42 }, { "gender": "female", "height": 160, "weight": 50 }, { "gender": "female", "height": 147.2, "weight": 49.8 }, { "gender": "female", "height": 168.2, "weight": 49.2 }, { "gender": "female", "height": 175, "weight": 73.2 }, { "gender": "female", "height": 157, "weight": 47.8 }, { "gender": "female", "height": 167.6, "weight": 68.8 }, { "gender": "female", "height": 159.5, "weight": 50.6 }, { "gender": "female", "height": 175, "weight": 82.5 }, { "gender": "female", "height": 166.8, "weight": 57.2 }, { "gender": "female", "height": 176.5, "weight": 87.8 }, { "gender": "female", "height": 170.2, "weight": 72.8 }, { "gender": "female", "height": 174, "weight": 54.5 }, { "gender": "female", "height": 173, "weight": 59.8 }, { "gender": "female", "height": 179.9, "weight": 67.3 }, { "gender": "female", "height": 170.5, "weight": 67.8 }, { "gender": "female", "height": 160, "weight": 47 }, { "gender": "female", "height": 154.4, "weight": 46.2 }, { "gender": "female", "height": 162, "weight": 55 }, { "gender": "female", "height": 176.5, "weight": 83 }, { "gender": "female", "height": 160, "weight": 54.4 }, { "gender": "female", "height": 152, "weight": 45.8 }, { "gender": "female", "height": 162.1, "weight": 53.6 }, { "gender": "female", "height": 170, "weight": 73.2 }, { "gender": "female", "height": 160.2, "weight": 52.1 }, { "gender": "female", "height": 161.3, "weight": 67.9 }, { "gender": "female", "height": 166.4, "weight": 56.6 }, { "gender": "female", "height": 168.9, "weight": 62.3 }, { "gender": "female", "height": 163.8, "weight": 58.5 }, { "gender": "female", "height": 167.6, "weight": 54.5 }, { "gender": "female", "height": 160, "weight": 50.2 }, { "gender": "female", "height": 161.3, "weight": 60.3 }, { "gender": "female", "height": 167.6, "weight": 58.3 }, { "gender": "female", "height": 165.1, "weight": 56.2 }, { "gender": "female", "height": 160, "weight": 50.2 }, { "gender": "female", "height": 170, "weight": 72.9 }, { "gender": "female", "height": 157.5, "weight": 59.8 }, { "gender": "female", "height": 167.6, "weight": 61 }, { "gender": "female", "height": 160.7, "weight": 69.1 }, { "gender": "female", "height": 163.2, "weight": 55.9 }, { "gender": "female", "height": 152.4, "weight": 46.5 }, { "gender": "female", "height": 157.5, "weight": 54.3 }, { "gender": "female", "height": 168.3, "weight": 54.8 }, { "gender": "female", "height": 180.3, "weight": 60.7 }, { "gender": "female", "height": 165.5, "weight": 60 }, { "gender": "female", "height": 165, "weight": 62 }, { "gender": "female", "height": 164.5, "weight": 60.3 }, { "gender": "female", "height": 156, "weight": 52.7 }, { "gender": "female", "height": 160, "weight": 74.3 }, { "gender": "female", "height": 163, "weight": 62 }, { "gender": "female", "height": 165.7, "weight": 73.1 }, { "gender": "female", "height": 161, "weight": 80 }, { "gender": "female", "height": 162, "weight": 54.7 }, { "gender": "female", "height": 166, "weight": 53.2 }, { "gender": "female", "height": 174, "weight": 75.7 }, { "gender": "female", "height": 172.7, "weight": 61.1 }, { "gender": "female", "height": 167.6, "weight": 55.7 }, { "gender": "female", "height": 151.1, "weight": 48.7 }, { "gender": "female", "height": 164.5, "weight": 52.3 }, { "gender": "female", "height": 163.5, "weight": 50 }, { "gender": "female", "height": 152, "weight": 59.3 }, { "gender": "female", "height": 169, "weight": 62.5 }, { "gender": "female", "height": 164, "weight": 55.7 }, { "gender": "female", "height": 161.2, "weight": 54.8 }, { "gender": "female", "height": 155, "weight": 45.9 }, { "gender": "female", "height": 170, "weight": 70.6 }, { "gender": "female", "height": 176.2, "weight": 67.2 }, { "gender": "female", "height": 170, "weight": 69.4 }, { "gender": "female", "height": 162.5, "weight": 58.2 }, { "gender": "female", "height": 170.3, "weight": 64.8 }, { "gender": "female", "height": 164.1, "weight": 71.6 }, { "gender": "female", "height": 169.5, "weight": 52.8 }, { "gender": "female", "height": 163.2, "weight": 59.8 }, { "gender": "female", "height": 154.5, "weight": 49 }, { "gender": "female", "height": 159.8, "weight": 50 }, { "gender": "female", "height": 173.2, "weight": 69.2 }, { "gender": "female", "height": 170, "weight": 55.9 }, { "gender": "female", "height": 161.4, "weight": 63.4 }, { "gender": "female", "height": 169, "weight": 58.2 }, { "gender": "female", "height": 166.2, "weight": 58.6 }, { "gender": "female", "height": 159.4, "weight": 45.7 }, { "gender": "female", "height": 162.5, "weight": 52.2 }, { "gender": "female", "height": 159, "weight": 48.6 }, { "gender": "female", "height": 162.8, "weight": 57.8 }, { "gender": "female", "height": 159, "weight": 55.6 }, { "gender": "female", "height": 179.8, "weight": 66.8 }, { "gender": "female", "height": 162.9, "weight": 59.4 }, { "gender": "female", "height": 161, "weight": 53.6 }, { "gender": "female", "height": 151.1, "weight": 73.2 }, { "gender": "female", "height": 168.2, "weight": 53.4 }, { "gender": "female", "height": 168.9, "weight": 69 }, { "gender": "female", "height": 173.2, "weight": 58.4 }, { "gender": "female", "height": 171.8, "weight": 56.2 }, { "gender": "female", "height": 178, "weight": 70.6 }, { "gender": "female", "height": 164.3, "weight": 59.8 }, { "gender": "female", "height": 163, "weight": 72 }, { "gender": "female", "height": 168.5, "weight": 65.2 }, { "gender": "female", "height": 166.8, "weight": 56.6 }, { "gender": "female", "height": 172.7, "weight": 105.2 }, { "gender": "female", "height": 173.4, "weight": 52.7 }, { "gender": "female", "height": 159.8, "weight": 53.2 }, { "gender": "female", "height": 170.5, "weight": 64.5 }, { "gender": "female", "height": 159.2, "weight": 51.8 }, { "gender": "female", "height": 157.5, "weight": 56 }, { "gender": "female", "height": 161.3, "weight": 63.6 }, { "gender": "female", "height": 162.6, "weight": 63.2 }, { "gender": "female", "height": 160, "weight": 59.5 }, { "gender": "female", "height": 168.9, "weight": 56.8 }, { "gender": "female", "height": 165.1, "weight": 64.1 }, { "gender": "female", "height": 162.6, "weight": 50 }, { "gender": "female", "height": 165.1, "weight": 72.3 }, { "gender": "female", "height": 166.4, "weight": 55 }, { "gender": "female", "height": 160, "weight": 55.9 }, { "gender": "female", "height": 152.4, "weight": 60.4 }, { "gender": "female", "height": 170.2, "weight": 69.1 }, { "gender": "female", "height": 162.6, "weight": 84.5 }, { "gender": "female", "height": 170.2, "weight": 55.9 }, { "gender": "female", "height": 158.8, "weight": 55.5 }, { "gender": "female", "height": 172.7, "weight": 69.5 }, { "gender": "female", "height": 167.6, "weight": 76.4 }, { "gender": "female", "height": 162.6, "weight": 61.4 }, { "gender": "female", "height": 167.6, "weight": 65.9 }, { "gender": "female", "height": 156.2, "weight": 58.6 }, { "gender": "female", "height": 175.2, "weight": 66.8 }, { "gender": "female", "height": 172.1, "weight": 56.6 }, { "gender": "female", "height": 162.6, "weight": 58.6 }, { "gender": "female", "height": 160, "weight": 55.9 }, { "gender": "female", "height": 165.1, "weight": 59.1 }, { "gender": "female", "height": 182.9, "weight": 81.8 }, { "gender": "female", "height": 162.6, "weight": 54.5 }, { "gender": "female", "height": 152.4, "weight": 47.3 }, { "gender": "female", "height": 170.2, "weight": 67.7 }, { "gender": "female", "height": 165.1, "weight": 80.9 }, { "gender": "female", "height": 172.7, "weight": 70.5 }, { "gender": "female", "height": 165.1, "weight": 60.9 }, { "gender": "female", "height": 170.2, "weight": 63.6 }, { "gender": "female", "height": 170.2, "weight": 54.5 }, { "gender": "female", "height": 170.2, "weight": 59.1 }, { "gender": "female", "height": 161.3, "weight": 70.5 }, { "gender": "female", "height": 167.6, "weight": 52.7 }, { "gender": "female", "height": 167.6, "weight": 62.7 }, { "gender": "female", "height": 165.1, "weight": 86.3 }, { "gender": "female", "height": 162.6, "weight": 66.4 }, { "gender": "female", "height": 152.4, "weight": 67.3 }, { "gender": "female", "height": 168.9, "weight": 63 }, { "gender": "female", "height": 170.2, "weight": 73.6 }, { "gender": "female", "height": 175.2, "weight": 62.3 }, { "gender": "female", "height": 175.2, "weight": 57.7 }, { "gender": "female", "height": 160, "weight": 55.4 }, { "gender": "female", "height": 165.1, "weight": 104.1 }, { "gender": "female", "height": 174, "weight": 55.5 }, { "gender": "female", "height": 170.2, "weight": 77.3 }, { "gender": "female", "height": 160, "weight": 80.5 }, { "gender": "female", "height": 167.6, "weight": 64.5 }, { "gender": "female", "height": 167.6, "weight": 72.3 }, { "gender": "female", "height": 167.6, "weight": 61.4 }, { "gender": "female", "height": 154.9, "weight": 58.2 }, { "gender": "female", "height": 162.6, "weight": 81.8 },{ "gender": "male", "height": 181.5, "weight": 74.8 }, { "gender": "male", "height": 184, "weight": 86.4 }, { "gender": "male", "height": 184.5, "weight": 78.4 }, { "gender": "male", "height": 175, "weight": 62 }, { "gender": "male", "height": 184, "weight": 81.6 }, { "gender": "male", "height": 180, "weight": 76.6 }, { "gender": "male", "height": 177.8, "weight": 83.6 }, { "gender": "male", "height": 192, "weight": 90 }, { "gender": "male", "height": 176, "weight": 74.6 }, { "gender": "male", "height": 174, "weight": 71 }, { "gender": "male", "height": 184, "weight": 79.6 }, { "gender": "male", "height": 192.7, "weight": 93.8 }, { "gender": "male", "height": 171.5, "weight": 70 }, { "gender": "male", "height": 173, "weight": 72.4 }, { "gender": "male", "height": 176, "weight": 85.9 }, { "gender": "male", "height": 176, "weight": 78.8 }, { "gender": "male", "height": 180.5, "weight": 77.8 }, { "gender": "male", "height": 172.7, "weight": 66.2 }, { "gender": "male", "height": 176, "weight": 86.4 }, { "gender": "male", "height": 173.5, "weight": 81.8 }, { "gender": "male", "height": 184.9, "weight": 86.4 }, { "gender": "male", "height": 177.3, "weight": 73.2 }, { "gender": "male", "height": 167.4, "weight": 53.9 }, { "gender": "male", "height": 178.1, "weight": 72 }, { "gender": "male", "height": 168.9, "weight": 55.5 }, { "gender": "male", "height": 157.2, "weight": 58.4 }, { "gender": "male", "height": 180.3, "weight": 83.2 }, { "gender": "male", "height": 170.2, "weight": 72.7 }, { "gender": "male", "height": 177.8, "weight": 64.1 }, { "gender": "male", "height": 172.7, "weight": 72.3 }, { "gender": "male", "height": 165.1, "weight": 65 }, { "gender": "male", "height": 186.7, "weight": 86.4 }, { "gender": "male", "height": 165.1, "weight": 65 }, { "gender": "male", "height": 174, "weight": 88.6 }, { "gender": "male", "height": 175.3, "weight": 84.1 }, { "gender": "male", "height": 185.4, "weight": 66.8 }, { "gender": "male", "height": 177.8, "weight": 75.5 }, { "gender": "male", "height": 180.3, "weight": 93.2 }, { "gender": "male", "height": 180.3, "weight": 82.7 }, { "gender": "male", "height": 177.8, "weight": 58 }, { "gender": "male", "height": 177.8, "weight": 79.5 }, { "gender": "male", "height": 177.8, "weight": 78.6 }, { "gender": "male", "height": 177.8, "weight": 71.8 }, { "gender": "male", "height": 177.8, "weight": 116.4 }, { "gender": "male", "height": 163.8, "weight": 72.2 }, { "gender": "male", "height": 188, "weight": 83.6 }, { "gender": "male", "height": 198.1, "weight": 85.5 }, { "gender": "male", "height": 175.3, "weight": 90.9 }, { "gender": "male", "height": 166.4, "weight": 85.9 }, { "gender": "male", "height": 190.5, "weight": 89.1 }, { "gender": "male", "height": 166.4, "weight": 75 }, { "gender": "male", "height": 177.8, "weight": 77.7 }, { "gender": "male", "height": 179.7, "weight": 86.4 }, { "gender": "male", "height": 172.7, "weight": 90.9 }, { "gender": "male", "height": 190.5, "weight": 73.6 }, { "gender": "male", "height": 185.4, "weight": 76.4 }, { "gender": "male", "height": 168.9, "weight": 69.1 }, { "gender": "male", "height": 167.6, "weight": 84.5 }, { "gender": "male", "height": 175.3, "weight": 64.5 }, { "gender": "male", "height": 170.2, "weight": 69.1 }, { "gender": "male", "height": 190.5, "weight": 108.6 }, { "gender": "male", "height": 177.8, "weight": 86.4 }, { "gender": "male", "height": 190.5, "weight": 80.9 }, { "gender": "male", "height": 177.8, "weight": 87.7 }, { "gender": "male", "height": 184.2, "weight": 94.5 }, { "gender": "male", "height": 176.5, "weight": 80.2 }, { "gender": "male", "height": 177.8, "weight": 72 }, { "gender": "male", "height": 180.3, "weight": 71.4 }, { "gender": "male", "height": 171.4, "weight": 72.7 }, { "gender": "male", "height": 172.7, "weight": 84.1 }, { "gender": "male", "height": 172.7, "weight": 76.8 }, { "gender": "male", "height": 177.8, "weight": 63.6 }, { "gender": "male", "height": 177.8, "weight": 80.9 }, { "gender": "male", "height": 182.9, "weight": 80.9 }, { "gender": "male", "height": 170.2, "weight": 85.5 }, { "gender": "male", "height": 167.6, "weight": 68.6 }, { "gender": "male", "height": 175.3, "weight": 67.7 }, { "gender": "male", "height": 165.1, "weight": 66.4 }, { "gender": "male", "height": 185.4, "weight": 102.3 }, { "gender": "male", "height": 181.6, "weight": 70.5 }, { "gender": "male", "height": 172.7, "weight": 95.9 }, { "gender": "male", "height": 190.5, "weight": 84.1 }, { "gender": "male", "height": 179.1, "weight": 87.3 }, { "gender": "male", "height": 175.3, "weight": 71.8 }, { "gender": "male", "height": 170.2, "weight": 65.9 }, { "gender": "male", "height": 193, "weight": 95.9 }, { "gender": "male", "height": 171.4, "weight": 91.4 }, { "gender": "male", "height": 177.8, "weight": 81.8 }, { "gender": "male", "height": 177.8, "weight": 96.8 }, { "gender": "male", "height": 167.6, "weight": 69.1 }, { "gender": "male", "height": 167.6, "weight": 82.7 }, { "gender": "male", "height": 180.3, "weight": 75.5 }, { "gender": "male", "height": 182.9, "weight": 79.5 }, { "gender": "male", "height": 176.5, "weight": 73.6 }, { "gender": "male", "height": 186.7, "weight": 91.8 }, { "gender": "male", "height": 188, "weight": 84.1 }, { "gender": "male", "height": 188, "weight": 85.9 }, { "gender": "male", "height": 177.8, "weight": 81.8 }, { "gender": "male", "height": 174, "weight": 82.5 }, { "gender": "male", "height": 177.8, "weight": 80.5 }, { "gender": "male", "height": 171.4, "weight": 70 }, { "gender": "male", "height": 185.4, "weight": 81.8 }, { "gender": "male", "height": 185.4, "weight": 84.1 }, { "gender": "male", "height": 188, "weight": 90.5 }, { "gender": "male", "height": 188, "weight": 91.4 }, { "gender": "male", "height": 182.9, "weight": 89.1 }, { "gender": "male", "height": 176.5, "weight": 85 }, { "gender": "male", "height": 175.3, "weight": 69.1 }, { "gender": "male", "height": 175.3, "weight": 73.6 }, { "gender": "male", "height": 188, "weight": 80.5 }, { "gender": "male", "height": 188, "weight": 82.7 }, { "gender": "male", "height": 175.3, "weight": 86.4 }, { "gender": "male", "height": 170.5, "weight": 67.7 }, { "gender": "male", "height": 179.1, "weight": 92.7 }, { "gender": "male", "height": 177.8, "weight": 93.6 }, { "gender": "male", "height": 175.3, "weight": 70.9 }, { "gender": "male", "height": 182.9, "weight": 75 }, { "gender": "male", "height": 170.8, "weight": 93.2 }, { "gender": "male", "height": 188, "weight": 93.2 }, { "gender": "male", "height": 180.3, "weight": 77.7 }, { "gender": "male", "height": 170.2, "weight": 62.3 }, { "gender": "male", "height": 177.8, "weight": 82.7 }, { "gender": "male", "height": 179.1, "weight": 79.1 }, { "gender": "male", "height": 190.5, "weight": 98.2 }, { "gender": "male", "height": 177.8, "weight": 84.1 }, { "gender": "male", "height": 180.3, "weight": 83.2 }, { "gender": "male", "height": 180.3, "weight": 83.2 }]
    var axisData = []
    for(var i=0;i<data.length;i++){
      var height = data[i].height
      var weight = data[i].weight
      var newArr = [height,weight]
      axisData.push(newArr)
    }
    console.log(axisData)
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {
      xAxis:{
        type:'value',
        scale:true
      },
      yAxis:{
        type:'value',
        scale:true
      },
      series:{
        type:'scatter',
        data:axisData
      }
    }
    mCharts.setOption(option)
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 常见效果

  • 气泡图效果
    • 散点的大小不同
      • symbolSize
    • 散点的颜色不同
      • itemStyle.color
series: [
        {
          // type:'scatter',
          type: 'effectScatter',
          showEffectOn: 'emphasis',  //render emphasis
          rippleEffect: {
            scale: 5
          },
          data: axisData,
          symbolSize: function (arg) {
            // console.log(arg)
            var height = arg[0] / 100
            var weight = arg[1]
            //bmi = 体重kg / (身高m*身高m) 大于28，代表肥胖
            var bmi = weight / (height * height)
            if (bmi > 28) {
              return 20
            }
            return 5
          },
          itemStyle: {
            color: function (arg) {
              // console.log(arg)
              var height = arg.data[0] / 100
              var weight = arg.data[1]
              //bmi = 体重kg / (身高m*身高m) 大于28，代表肥胖
              var bmi = weight / (height * height)
              if (bmi > 28) {
                return 'red'
              }
              return 'green'
            }
          }
        }
      ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
  • 涟漪动画效果
    • series
      • type:effectScatter涟漪动画
      • showEffectOn:'emphasis'鼠标移入有动画
        • emphasis
        • render
      • rippleEffect动画的范围
        • scale
series: [
            {
              // type:'scatter',
              type: 'effectScatter',
              showEffectOn: 'emphasis',  //render emphasis
              rippleEffect: {
                scale: 5
              }
          ]
1
2
3
4
5
6
7
8
9

# 直角坐标系的常用配置

柱状图、折线图、散点图

# 配置1：网络grid

  • grid是用来控制直角坐标系的布局和大小
  • 显示grid
    • show
      • true
  • grid的边框
    • borderWidth
    • borderColor
  • grid的位置和大小
    • left
    • top
    • right
    • bottom
    • width
    • height
grid:{
        show:true,
        borderWidth:10,
        borderColor:'red',
        top:120,
        left:120,
        Width:300,
        height:150
      }
1
2
3
4
5
6
7
8
9

# 配置2：坐标轴axis,坐标轴分为x轴和y轴

  • value:数值轴，自动会从目标数据中读取数据
  • category:类目轴，改类型必须通过data数组设置类目数据
  • position:显示位置
    • xAxis:可取值为top或者bottom
    • yAxis:可取为left或者right

# 配置3：区域缩放dataZoom

  • dataZoom是一个数组，意味着可以配置多个区域缩放器
    • type
      • slider：滑块
      • inside：内置，依靠鼠标滚动或者双指缩放
    • 指明产生的轴
      • xAxisIndex：设置缩放组件控制的是哪个x轴，一般写0即可
      • yAxisIndex：设置缩放组件控制的是哪个y轴，一般写0即可
    • 指明初始状态的缩放清况
      • start数据窗口范围的起始百分比
        • 0
      • end数据窗口范围的结束百分比
        • 80（百分之80）

# 饼图

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

# 显示数组

  • series
    • label.formatter

# 圆环

  • radius饼图的半径
    • 20%按最小宽高度/2 *20%
    • radius:['50%','75%']第0个元素标识内圆的半径，第一个元素表示外圆的半径

# 南定格尔图

饼图的每个区域半径是不同的，随数值变化

  • roseType
    • radius
  • selectedMode选中的效果，能将选中的区域偏离圆点以小短距离
    • single单个
    • multiple多个
  • selectedOffset选中偏移更远些
    • 30
<div style="width: 600px;height: 400px;"></div>
  <script>
    var mCharts = echarts.init(document.querySelector('div'))
    //需要设置给饼图的数据，是一个数组，数组中包含一个一个对象
    var pieData = [
      {
        name:'淘宝',
        value:11231
      },
      {
        name:'京东',
        value:22673
      },
      {
        name:'唯品会',
        value:6123
      },
      {
        name:'1号店',
        value:8989
      },
      {
        name:'聚美优品',
        value:6700
      }
    ]
    var option = {
      series:[
        {
          type:'pie',
          data:pieData,
          label:{
            show:true,
            formatter:function(arg){
              console.log(arg)
              return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
            }
          },
          // radius:'20%'
          // radius:['50%','75%']
          roseType:'radius',
          // selectedMode:'single'
          selectedMode:'multiple',
          selectedOffset:30
        }
      ]
    }
    mCharts.setOption(option)
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

# 地图

主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异

# 百度地图API

需要申请百度地图ak（access key）

# 矢量地图

需要准备矢量地图的数据

  • 引入jquery文件

  • 准备矢量地图json文件

  • 使用Ajax获取china.json

$get('json/map/china.json',function(chinaJson){}) #成功的回调
1
  • 在回调函数中往echarts全局对象注册地图的json数据，chinaJson为矢量地图数据
echarts.registerMap('chinaMap',chinaJson)
1
  • 在geo下配置
    • type:'map'
    • map:'chinaMap'要与注册地图的名字一样
    • roam缩放拖动
      • true
    • label名称显示
      • show
        • true
    • center地图中心点
    • zoom设置初始的化的缩放比例
<div style="width: 600px;height: 600px;border:1px solid red"></div>
  <!-- 步骤3：初始化echarts实例对象 -->
  <script>
    var mCharts = echarts.init(document.querySelector('div'))

    $.get('json/map/china.json', function (ret) {
      console.log(ret)
      //注册地图
      echarts.registerMap('chinaMap', ret)
      // 步骤4：准备配置项
      var option = {
        geo: {
          type: 'map',
          map: 'chinaMap',
          roam:true,
          label:{
            show:true
          },
          zoom:1,
          center:[87,20]
        }
      }
      // 步骤5：将配置项设置给echarts实例对象
      mCharts.setOption(option)
    })
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 常见效果

  • 显示某个区域
    • 加载该区域的矢量地图数据
    • 通过registerMap注册到echarts全局对象中
    • 指明geo配置下的type和map属性
    • 通过zoom放大该区域
    • 通过center定位中心点
<!-- 步骤2：准备一个呈现图表的盒子 -->
  <div style="width: 600px;height: 600px;"></div>
  <!-- 步骤3：初始化echarts实例对象 -->
  <script>
    var mCharts = echarts.init(document.querySelector('div'))

    $.get('json/map/guangdong.json', function (ret) {
      console.log(ret)
      //注册地图
      echarts.registerMap('guangdong',ret)
      // 步骤4：准备配置项
      var option = {
        geo:{
          type:'map',
          map:'guangdong',
          zoom:1.2,
          label:{
            show:true
          },
          center:[113.280637, 23.125178]
        }
      }
      // 步骤5：将配置项设置给echarts实例对象
      mCharts.setOption(option)
    })
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  • 不同城市颜色不同
    • 显示基本的中国地图
    • 城市的空气质量数据设置给series
    • 将series下的数据和geo关联起来
      • series
        • geoIndex
          • 0
        • type
          • map
    • 结合visualMap配合使用
      • max
      • min
      • inRange
        • color
      • calculable
        • true
var mCharts = echarts.init(document.querySelector("div"))
    $.get('json/map/china.json', function (ret) {
      // ret 就是中国的各个省份的矢量地图数据
      console.log(ret)
      echarts.registerMap('chinaMap', ret)
      var option = {
        geo: {
          type: 'map',
          map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
          roam: true, // 设置允许缩放以及拖动的效果
          label: {
            show: true // 展示标签
          }
        },
        series: [
          {
            data: airData,
            geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
            type: 'map'
          }
        ],
        visualMap: {
          min: 0,
          max: 300,
          inRange: {
            color: ['white', 'red'] // 控制颜色渐变的范围
          },
          calculable: true // 出现滑块
        }
      }
      mCharts.setOption(option)
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 地图和散点图结合

  • 给series下增加新的对象
  • 准备好散点数据，设置给新对象的的data
  • 配置新对象的type
    • type:effectScatter
  • 让散点图使用地图坐标系统
    • coordinateSystem：'geo'
  • 让涟漪的效果更加明显
    • rippleEffect:{scale:10}
var scatterData = [
      {
        value: [117.283042, 31.86119]
      }
    ]
series: [
          {
            data: airData,
            geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
            type: 'map'
          },
          {
            data: scatterData, // 配置散点的坐标数据
            type: 'effectScatter',
            coordinateSystem: 'geo', // 指明散点使用的坐标系统  geo的坐标系统
            rippleEffect: {
              scale: 10 // 设置涟漪动画的缩放比例
            }
          }
        ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 雷达图

帮助我们分析多个维度数据与标准数据的对比情况

# 实现步骤

image-20201119223429674

image-20201119224145252

# 常用配置

  • label显示数值
  • areaStyle区域面积
  • shape绘制类型

# 仪表盘

  • 主要用在进度把控以及数据范围的监测（如库存量）
  • 更直观的表现出某个指标的进度或实际情况

# 实现步骤

image-20201119224503641

# 常用效果

  • 数值范围
    • max、min
  • 多个指针
    • 增加data中的数组元素
  • 多个指针颜色差异
    • itemStyle
      • color
var option = {
      series: [
        {
          type: 'gauge',
          data: [
            {
              value: 97,
              itemStyle: { // 指针的样式
                color: 'pink' // 指针的颜色
              }
            }, // 每一个对象就代表一个指针
            {
              value: 85,
              itemStyle: {
                color: 'green'
              }
            }
          ],
          min: 50 // min max 控制仪表盘数值范围
        }
      ]
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 总结

  • 柱状图：最大值、最小值、平均值
  • 折线图：数据随时间的变化趋势
  • 散点图：不同维度数据之间的相关性（身高、体重）
  • 饼图：不同分类的占比情况
  • 地图：不i同地理位置上的数据差异
  • 雷达图：分析多个维度的数据与标准数据的对比情况
  • 仪表盘：更直观的表现出某个指标的进度或实际情况

# Echarts高级

# 显示相关

# 主题

  • 内置主题：light、dark
    • 在初始化对象方法init中指明
var chart = echarts.init(dom,'light');
var chart = echarts.init(dom,'dark');
1
2
  • 自定义主题
    • 在主题编辑器中编辑主题
    • 下载主题，是一个js文件
    • 引入主题js文件
    • 在init方法中指明主题的名称为itcast
var chart = echarts.init(dom,'itcast');
1

# 调色盘

就近原则，优先级：局部调色盘>全局调色盘>主题调色盘

  • 主题调色盘
    • 在引入itcast.js文件中的color中
  • 全局调色盘
option:{
	color:['red','blue','pink','green','purple']
}
1
2
3
  • 局部调色盘
series:[
	{
		type:'bar',
		color:['red','green','blue']
	}
]
1
2
3
4
5
6

# 颜色渐变

  • 线性渐变
series:[
  {
	itemStyle:{
        color:{
          type:'linear', //线性渐变
          x:0,
          y:0,
          x2:0,
          y:1,
          colorStops:[
            {
              offset:0,color:'red' //0%处
            },
            {
              offset:1,color:'blue' //100%处
            }
          ]
        }
      },
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  • 径向渐变
series:[
  {
	itemStyle:{
        color:{
          type:'radial',
          x:0.5,
          y:0.5,
          r:0.5,
          colorStops:[
            {
              offset:0,color:'red' //0%处
            },
            {
              offset:1,color:'blue' //100%处
            }
          ]
        }
      },
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 样式

优先级极高，会覆盖主题中、调色盘的效果

  • 直接样式

    • itemStyle、textStyle、areaStyle、lineStyle、label

  • 高亮样式（鼠标滑过时）

    • 在emphasis中包裹itemStyle、textStyle、areaStyle、lineStyle、label

# 自适应

  • 监听窗口带线啊哦变化事件
  • 在事件处理函数中调用Echarts实例对象的resize即可
window.onresize = function(){
  mCharts.resize()
}
1
2
3

# 动画的使用

# 加载动画

  • 显示加载动画
    • mCharts.showLoading()
  • 隐藏加载动画
    • mCharts.hideLoading()

# 增加动画

  • 通过mCharts.setOption(option)
  • 只需要考虑变化的部分即可

image-20201120131400374

# 动画的配置

  • 开启动画
    • animation:true
  • 动画的时长
    • animationDuration:5000 (毫秒)
      • 回调函数，参数arg
  • 缓动动画
    • animationEasing:'bounceOut'
  • 动画阈值：单种形式的元素大于这个阈值时会关闭动画
    • animationThreshold：8

# 实时更新数据

# 定时器轮循

不断发请求，服务器压力大

image-20210716234254212

# webSocket

只会请求一次，减轻服务器压力

image-20210716234942575

# koa2

  • 基于Node.js平台的web开发框架
  • async/await要求：Node v7.6.0及以上
  • 洋葱模型的中间件
框架名 作用 异步处理
Express web框架 回调函数
Koa web框架 Generator+yield
Koa2 web框架 async/await

# 快速上手

  • npm init -y
  • npm install koa
  • 创建app.js文件
    • 创建koa对象
    • 编写响应函数（中间件）
    • 监听端口
  • 启动服务器
    • node app.js
  • 特点
    • koa对象通过use方法加入一个中间件
    • 一个中间件就是一个函数
    • 中间件的执行顺序符合洋葱模型
    • 内层中间件能否执行取决于外层中间件的next函数是否调用
    • 调用next函数得到的是Promise对象
//ctx上下文 : ctx.request ctx.response
//next : 下一个中间件，下一层中间件是否能够得到执行，取决于next这个函数有没有调用
app.use((ctx,next) => {
    console.log('第一层中间件...1')
    ctx.response.body = 'hellow world'
    next()
    console.log('第一层中间件...2')
})
app.use(async(ctx,next) => {
    console.log('第二层中间件...1')
    const res = await next()
    console.log(res)
    console.log('第二层次中间件...2')
})
app.use((ctx,next) => {
    console.log('第三层中间件')
    return 'i love the cat'
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 后台项目

  • 计算服务器处理请求的总耗时
  • 在响应头上加上响应内容的mime类型
  • 根据URL读取指定目录下的文件内容

步骤

  • 项目准备
  • 总耗时中间件（第一层中间件）
//计算服务器消耗时长的中间件
module.export = async (ctx,next) => {
    const start = Date.now()
    await next()
    const end = Date.now()
    const Duration = end-start
    //设置响应头
    ctx.set('X-Response-Time', Duration + 'ms')
}
1
2
3
4
5
6
7
8
9
  • 响应头中间件(第二层中间件)
//设置响应头的中间件
module.exports = async (ctx,next) => {
    const contentType = 'application/json;charset-utf-8'
    ctx.set('Content-Type',contentType)
    ctx.set('Access-Control-Allow-Origin','*')
    ctx.set('Access-Control-Allow-Methods','OPTIONS,GET,PUT,POST,DELETE')
    await next()
}
1
2
3
4
5
6
7
8
  • 业务逻辑中间件(第三层中间件)
//处理业务逻辑的中间件,读取json文件响应给浏览器
const path = require('path')
const fileUtils = require('../utils/file_utils')

module.exports = async (ctx,next) => {
    const url = ctx.request.url //api/seller ../data/seller.json
    let filePath = url.replace('/api','')  //seller
    filePath = `../data/${filePath}.json`
    filePath = path.join(__dirname,filePath)
    const res = await fileUtils.getFileJsonData(filePath)
    ctx.response.body = res
    console.log(filePath)
    await next()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//读取文件的工具方法
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
2
3
4
5
6
7
8
9
10
11
12
13
14
  • 允许跨域

# WebSokcet

  • 安装包npm i ws -S
  • 创建对象
const WebSocket = require('ws')
const ws = new WebSocket.Server({
  port:9998
})
1
2
3
4
  • 连接事件、接收数据事件
ws.on('connection',client => {
  console.log('有客户端连接...')
})
ws.on('connection',client => {
  ws.on('message',msg => {
    console.log('客户端发送数据过来了')
  })
})
1
2
3
4
5
6
7
8
  • 发送数据
client.send('hello socket')
1

image-20210801174401710

# 前端项目准备

  • 创建vue-cli项目
  • 删除不该要的文件
  • vue.config.js配置文件
module.exports = {
    devServer:{
        port:8999,
        open:true
    }
}
1
2
3
4
5
6
  • 全局echarts对像的挂载
  • axios的封装和挂载

# WebSocket

  • 创建对象
const ws = new WebSocket('ws:localhost:9998')
1
  • 监听：连接成功、接受数据、关闭连接
    • ws.onopen、ws.onmessage、ws.onclose
  • 发送数据ws.send
编辑 (opens new window)
上次更新: 2021/09/23, 22:40:40
JS设计模式总结笔记
微前端

← 微前端→

最近更新
01
大文件分片上传
08-05
02
Vue3实现OSS存储
08-05
03
H5 TTS
08-05
更多文章>
Theme by Vdoing | Copyright © 2019-2025 Aiden Wu | MIT License
×