vue2-npy-viewer

一个用于在Vue应用中可视化NPY格式数据的组件，基于ECharts实现3D散点图展示。

功能特性

• 支持加载本地和远程NPY文件
• 自动解析NPY文件格式并提取数据
• 提供3D散点图可视化展示
• 响应式设计，适配不同屏幕尺寸
• 提供加载状态和错误提示
• 支持自定义ECharts配置

安装

node版本 >16

npm install vue2-npy-viewer --save

基本使用

在Vue组件中引入

<template>
  <div id="app">
    <NpyViewer 
      :path-url="npyFilePath" 
      :width="800" 
      :height="600" 
      :options="customOptions"
    />
  </div>
</template>

<script>
import { NpyViewer } from 'vue2-npy-viewer';

export default {
  name: 'App',
  components: {
    NpyViewer
  },
  data() {
    return {
      npyFilePath: 'https://example.com/data.npy',
      customOptions:(scatter3DData) => {
        // 自定义ECharts配置
        grid3D: {
          boxWidth: 300,
          boxDepth: 300
        }
      }
    };
  }
}
</script>

全局引入

import Vue from 'vue';
import NpyViewer from 'vue2-npy-viewer';

Vue.use(NpyViewer);

API文档

Props

| 参数名 | 类型 | 默认值 | 描述 | |-------|------|-------|------| | pathUrl | String | "" | NPY文件的路径或URL | | width | String/Number | "100%" | 组件宽度 | | height | String/Number | "100%" | 组件高度 | | options | Object | {} | 自定义ECharts配置，将与默认配置合并 |

高级用法

自定义ECharts配置

<template>
  <NpyViewer 
    :path-url="npyFilePath" 
    :options="customOptions"
  />
</template>

<script>
export default {
  data() {
    return {
      npyFilePath: 'path/to/data.npy',
      customOptions:(scatter3DData) => {
        // 自定义ECharts配置
        title: {
          text: '自定义标题',
          left: 'center'
        },
        grid3D: {
          boxWidth: 400,
          boxDepth: 400,
          environment: '#000',
          light: {
            main: {
              intensity: 1.5
            }
          }
        },
        series: [
          {
            symbolSize: 6,
            itemStyle: {
              opacity: 0.9
            }
          }
        ]
      }
    };
  }
}
</script>