hp-2

数据可视化组件

Build Setup

安装 hp-2 组件，npm i hp-2

Using Setup

该组件输入的数据格式

{
  data: [ // 图表数据
    {
      em_wave_length: '590',
      ex_wave_length: '560',
      sample_name: "MeasureingSample",
      size: [8,12],
      start_time: "05:18:07",
      end_time: "05:18:07",
      wavelengthMeasurement: '',
      value: [{
        x: 'A',
        y: '1',
        value: 77
      },
      {
        x: 'A',
        y: '2',
        value: 99
      },
      ...]
    },
    ...
  ],
  width: '250px', // 图表宽度
  height: '330px' // 图表高度
}

在需要的页面中引入组件

<template>
    <g2p-com :datasource="heatmapDatasource" />
</template>

<script>
import g2pCom from 'hp-2/src/packages/g2pCom/index.vue'

export default{
  data() {
    return {
      // heatmapData为数据导入后赋予的变量，这里的require('../src/assets/data.json')可忽略
      heatmapData: require('../src/assets/data.json'),
      heatmapDatasource: {}
    }
  },
  methods: {
    handleData(data) {
      console.log('🚀 ~ file: visualDialog.vue:74 ~ handleData ~ dataSource:', dataSource)
      const result = [] // 结果数组
      const { typeName, objectValue } = dataSource // 解构获取 typeName 和 objectValue
      console.log('🚀 ~ file: visualDialog.vue:77 ~ handleData ~ objectValue:', objectValue)

      let data
      let errorInfo = ''

      try {
        data = objectValue // 将 objectValue 转为 JSON 格式并赋值给 data 变量
      } catch (e) {
        data = ''
        console.error(e)
        errorInfo = 'notJSON'
      }

      // 处理数据的函数，将数组转换为展示所需的格式
      const processData = single => {
        return Array.isArray(single) // 如果是数组
          ? single.flatMap((item, i) =>
              Array.isArray(item)
                ? item.map((val, j) => ({
                    x: `${j + 1}`,
                    y: String.fromCharCode(i + 65),
                    value: val === true ? 1 : val === false ? 0 : val
                  }))
                : {
                    x: 1 + '',
                    y: String.fromCharCode(i + 65),
                    value: item === true ? 1 : item === false ? 0 : item
                  }
            ) // 返回转换后的数组格式
          : single // 否则返回原本的数据
      }

      // 处理 generalDataMatrix 数据的函数
      const processGeneralDataMatrix = single => {
        const singleitem = {
          // 定义要返回的对象
          sample_name: single && single.sample_name ? single.sample_name : '', // 样品名称
          size: single && single.size ? single.size : '', // 尺寸
          em_wave_length: '', // 发射波长
          ex_wave_length: '', // 激发波长
          wavelengthMeasurement: '', // 波长测量
          value:
            single && single.value
              ? single.value.flatMap((item, i) =>
                  item
                    ? Array.isArray(item)
                      ? item.map((val, j) => ({
                          x: `${j + 1}`,
                          y: String.fromCharCode(i + 65),
                          value: single.mask[i][j] === 0 ? null : this.formatNumber(val)
                        }))
                      : {
                          x: 1 + '',
                          y: String.fromCharCode(i + 65),
                          value: single.mask[i][j] === 0 ? null : this.formatNumber(item)
                        }
                    : []
                )
              : [], // 转换后的数据
          start_time: '', // 开始时间
          end_time: '' // 结束时间
        }

        const processTimeString = timeString => {
          return timeString.split(' ')[1] || ''
        }

        single &&
          single.method &&
          single.method.split(',').forEach(item => {
            // 遍历 method 字符串
            if (item.includes('EmissionModeWavelength')) {
              // 如果包含发射波长
              singleitem.em_wave_length = item.split(':')[1] // 将发射波长赋值给对象的 em_wave_length 属性
            }
            if (item.includes('ExcitationModeWavelength')) {
              // 如果包含激发波长
              singleitem.ex_wave_length = item.split(':')[1] // 将激发波长赋值给对象的 ex_wave_length 属性
            }
            if (item.includes('WavelengthMeasurement')) {
              // 如果包含波长测量
              singleitem.wavelengthMeasurement = item.split(':')[1] // 将波长测量赋值给对象的 wavelengthMeasurement 属性
            }
          })

        // 将 start_time 字符串分割取第二个元素并赋值给对象的 start_time 属性
        singleitem.start_time = single && single.start_time ? processTimeString(single.start_time) : ''
        // 将 end_time 字符串分割取第二个元素并赋值给对象的 end_time 属性
        singleitem.end_time = single && single.end_time ? processTimeString(single.end_time) : ''

        return singleitem // 返回转换后的对象
      }

      if (data) {
        switch (typeName) {
          case 'generalDataMatrix':
            result.push(processGeneralDataMatrix(data))
            break
          case 'array':
            result.push({ value: processData(data) })
            break
          default:
            data.forEach(single => {
              const value = single.sample_name === undefined ? processData(single) : processGeneralDataMatrix(single)
              result.push(value)
            })
            break
        }
      }

      const params = {
        width: '370px',
        height: '360px',
        typeName,
        data: result,
        errorInfo,
        initValue: data,
        backgroundColor: 'black',
        fontColor: 'white',
        lang: 'en_CN' // 'en_US' or 'zh_CN
      }
      this.heatmapDatasource = params
    }
  },
  created() {
    this.handleData(this.heatmapData)
  },
  components: {
    g2pCom
  }
}
</script>

For detailed explanation on how things work, consult the docs for vue-loader.

What's Changed

0.1.13:
1、fix：优化tooltip对齐方式

0.1.12:
1、fix：优化国际化

0.1.11:
1、fix：优化数据[1,2,3,4]的展示
2、fix：优化深色主题下，色卡选中后不明显的问题
3、fix：深色主题下，下载的热力图色卡名称与色卡翻页显示不出来
4、fix：深色主题下，暂无数据与数据错误显示与原型不一致
5、fix：384孔板测量的generalDataMatrix类型数据查看显示与原型不一致
6、fix：优化查看趋势图中多色卡的效果

0.1.10:
1、fix：优化更多异常数据格式的处理
2、fix：优化背景为暗色系时，趋势图线条高亮不明显

0.1.8：
1、fix：优化异常数据的判断
2、fix：优化趋势图中文件下载的文件名

0.1.7:
1、fix：优化空数据传入时报错的问题
2、fix：优化框选热力图时，出现跳动的问题
3、fix：优化数据展示的有效位数
4、fix：重新展示物料名称
5、fix：优化空样本展示的逻辑
6、fix：修改复制完整数据的操作
7、fix：优化色卡翻页太靠边问题
8、fix：修改数据处理逻辑：在数组转换转换中添加数据格式转换

0.1.5:
1、fix：修改进入趋势图的条件
2、fix：修改图片为svg

0.1.1:
1、fix：优化下方信息栏中在中文模式和英文模式下的位置和文本

0.1.0:
1、fix：优化热力图框选的颜色
2、fix：优化趋势图对称问题
3、fix：优化没有数据和数据错误时的提示效果
4、fix：优化黑夜模式下趋势图图例不明显的问题
5、fix：数据格式错误检查
6、fix：优化复制值功能的按钮位置和功能
7、fix：取消标题
8、fix：优化趋势图触发条件和交互


0.0.28:
1、fix：优化“右键查看趋势图”和“查看趋势图”两个标签与激活的相对位置
2、fix：优化list中不同数据格式时触发趋势图的处理

0.0.27:
1、fix：适配输入数据类型

0.0.26:
1、fix：解决圆形孔和方形孔之间的转换
2、fix：适配 list、array 和 generalDataMatrix 三种数据格式的转换
3、fix：修改使用文档，更新了 data、methods 和 created 三个部分的代码

0.0.23：
1、update：调整高度后，图表保持垂直居中
2、update：禁止右键框选
3、fix：右键点击查看趋势的提示框位置偏移问题

0.0.21：
1、fix：折线图点击不明位置后翻页
2、fix：黑夜模式下坐标不清晰问题
3、调试黑夜模式和语言切换