使用VitePress搭建的文档网站

Appearance

Echarts 的基本使用 ​

  1. 引入js
  2. 准备呈现的div
  3. 初始化
  4. 准备配置项
  5. 将配置项配置给echarts对象

Echarts 常用图表 ​

  1. 柱状图
  2. 折线图
  3. 散点图
  4. 饼图
  5. 地图
  6. 雷达图
  7. 仪表盘图

通用配置 ​

指任何一类的图标都可以使用的配置

标题 title 提示 tooltip 工具按钮 toolbox 图例 legend

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

柱状图 ​

  • 实现步骤

    • Echarts 最基本的代码结构

    • X轴数据

      • 数组1:['张三','李四','王五','闰土','小明','小红','小刚']

    • y轴数据

      • 数组2:[88,92,63,77,94,80,72]

  • 柱状图的特点

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

折线图 ​

折线图更多的使用来呈现数据随时间的『变化趋势』

散点图 ​

可以帮助我们推断出不同维度数据之间的相关性 通常也会结合地图在地图上的标注

有x和y轴的图标，一般称为 直角坐标系图表 ​

通常有 柱状图 折线图 散点图 有通用的常用配置 网格 grid 控制直角坐标系的布局和大小 坐标轴 axis 区域缩放 dataZoom

饼图 ​

饼图的数据结构 需要是 {name:'xx',value:123} series 中设置type 为 pie

  • 常见效果 先问文字的格式化 圆环 南丁格尔图 选中效果 通常用于不同分类数据的占比

地图 ​

  • 地图的使用方式 百度地图 API

  • 矢量地图

  • 快速实现

    1. 准备中国地图矢量数据
    2. 使用 ajax 获取矢量地图数据
    3. 在 ajax 回调函数中注册中国地图矢量数据 echarts.registerMap('chinaMap',矢量地图数据)
    4. 配置 geo 的type 为 'map' , map 属性为 'chinaMap'
    javascript
      const mCharts = echarts.init(document.querySelector('div'))

  $.ajax({
    url: 'template/json/china.json',
    method: 'GET',
    success: function (res) {
      console.log(res);
      echarts.registerMap('chinaMap', res)

      const option = {
        geo: {
          type: 'map',
          map: 'chinaMap',
          roam: true, // 设置可以缩放地图和拖动

          label: {
            show: true, // 默认展示标签
          },

          // 初始化的时候缩放比例
          zoom: 20,
          // 配置中心点 经纬度
          center: [116, 40]
        }
      }

      mCharts.setOption(option)
    }
  })

  • 常见效果

    • 显示某个区域

      1. 加载改区域的矢量地图数据
      2. 通过registerMap注册到echarts全局对象中
      3. 致命geo配置下的type和name属性
      4. 通过zoom放大该区域
      5. 通过center定位中心点

    • 不同地区显示不同颜色

      1. 显示基本的地图
      2. 将空气质量的数据设置给series
      3. 将series的数据和geo关联
      4. 配置visualMap

    • 地图和散点图结合

      1. 给series下增加新的对象
      2. 准备好散点的数据，设置给新对象data
      3. 配置新对象的type type:effectScatter
      4. 让散点图使用地图坐标系统 coordinateSystem:'geo
      5. 让涟漪效果更加明显 rippleEffect:{ scale:10 }

主要用于从宏观角都快速看出不同地理位置上数据的差异.

雷达图 ​

定义各个维度的最大值 indicator:[{name:'xxx',max：100},] 准备数据 data:[{name:'xxx',value:[80,90,90,]}]

可以用于多个维度与标准数据的对比

仪表盘 ​

主要用在进度把控以及数据范围的监测

WebSocket 的使用 ​

  1. 后端
  2. 安装包 npm i ws -S
  3. 创建对象
``` javascript
const WebSocket = require('ws')
const wss = new WebSocket.Server({
  port:9998
})
```

  1. 监听事件

    1. 连接事件
      javascript
        wss.on('connection',client=>{
    console.log('有客户端连接')
  })
    2. 接收数据事件
    javascript
      wss.on('connection',client=>{
    client.on('message', msg =>{
      console.log('客户端发数据过来了')
    })
  })
``

  2. 发送数据 client.send('hello')

  3. 前端

    1. 创建对象 const ws = new WebScoket('ws//localhost:9998') WebScoket 是windows 对象默认提供的，因此不需要额外的包
    2. 监听事件
      1. 连接成功事件 ws.onopen
      2. 接收数据事件 ws.onmessage
      3. 关闭连接事件 ws.onclose
    3. 发送数据 ws.send

注意 ​

为了监听vuex的变化，可以配合使用计算属性

javascript
  computed:{
    theme(){
      return this.$store.state.theme
    }
  },
  watch:{
    theme(){
      console.log('监听到vuex属性的改变拉~')
    }
  }