实习06

项目：哈勃平台（https://test-view.eaydu.com/#/layout/liveQuality）

负责：AI 直播质检/质检分析（直播间相关）

https://yach-doc-shimo.zhiyinlou.com/docs/XKq4MmMMKPiZO5kN/ <AI 质检 2 期 v1.1 prd>

问题/难点：

1、直播间/主播列表树形展示

效果图

2、echarts dataset 的使用

3、多个图表在一个盒子时，自适应的问题

4、格式化时间（将时间戳转化为 时：分：秒）

实现：

问题（1）

通过配置 childrenColumnName 字段进行树形展示

注：表格支持树形数据的展示，当数据中有 children 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 childrenColumnName 进行配置。 可以通过设置 indentSize 以控制每一层的缩进宽度。

问题（2）

数据集（dataset）是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据，但是从 ECharts4 支持数据集开始，更推荐使用数据集来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。

相关例子：https://blog.csdn.net/w6718189/article/details/122564220

项目中 dataset 的使用（柱状图）

效果图

相关代码

// 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
// 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
// 如果不指定 dimensions，也可以通过指定 series.encode
dataset: {
      dimensions: ['room_name', 'keywords_count', 'after_sale_count', 'product_introduction_count', 'rude_language_count'],
      source: state.barData
    },

问题（3）

当一个盒子有两个以上图表时，如果设置多个监听 resize 事件，会出现宽度丢失问题

效果图

解决：

将两个图表的 resize 事件放到一起

window.addEventListener('resize', function () {
  echart.resize()
  lineChart.resize()
})

问题（4）

封装一个 function，将时间转化为我们需要的时间

// 格式化时间
function getTime(value) {
  let secondTime = parseInt(value) //将传入的秒的值转化为Number
  let min = 0 // 初始化分
  let h = 0 // 初始化小时
  let result = ''
  if (secondTime >= 60) {
    //如果秒数大于等于60，将秒数转换成整数
    min = parseInt(secondTime / 60) //获取分钟，除以60取整数，得到整数分钟
    secondTime = parseInt(secondTime % 60) //获取秒数，秒数取佘，得到整数秒数
    if (min >= 60) {
      //如果分钟大于等于60，将分钟转换成小时
      h = parseInt(min / 60) //获取小时，获取分钟除以60，得到整数小时
      min = parseInt(min % 60) //获取小时后取佘的分，获取分钟除以60取佘的分
    }
  }
  result = `${h.toString().padStart(2, '0')}:${min
    .toString()
    .padStart(2, '0')}:${secondTime.toString().padStart(2, '0')}`
  return result
}