graphly-test

v0.0.10

Published

8 months ago

- Node.js: `>=20.11.1`

0High
0Medium
0Low

liuyu1

geoc_graphly_tool

📦 安装指南

1. 环境要求

Node.js: >=20.11.1

2. 安装步骤

git clone http://172.16.101.17:8088/xtgc/cpfx/gde/v2/skksh/front/geoc_graphly_tool.git
cd geoc_graphly_tool

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

3. 使用方式（作为库）

安装包（NPM）

npm install graphly-test

引入并使用

import { Graphly } from 'graphly-test'

const chartContainer = document.getElementById('chart-container')
const graphly = new Graphly(chartContainer)

graphly.setOption({
  data: {
    url: '/api/data',
    method: 'GET'
  },
  type: 'chart', // 支持 'chart' | 'table' | 'text' | 'map'
  option: {},
  domStyle: {
    width: '600px',
    height: '400px'
  }
})

4. 使用方式（CDN）

你也可以通过 CDN 直接在 HTML 页面中使用 graphly-test。

引入 UMD 模块

<script src="https://unpkg.com/graphly-test/dist/Graphly.umd.cjs"></script>

完整 HTML 示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Graphly CDN 示例</title>
  <style>
    #chart-container {
      width: 600px;
      height: 400px;
    }
  </style>
</head>
<body>
  <div id="chart-container"></div>

  <script src="https://unpkg.com/graphly-test/dist/Graphly.umd.cjs"></script>
  <script>
    window.addEventListener('load', function () {
      const { Graphly } = window.graphlyTest;

      const chartContainer = document.getElementById('chart-container');
      const graphly = new Graphly(chartContainer);

      graphly.on('dataLoaded', function (data) {
        console.log('数据加载完成:', data);
      });

      graphly.on('finished', function (image) {
        console.log('图表渲染完成:', image);
        document.body.appendChild(image);
      });

      graphly.setOption({
        data: {
          url: 'https://api.example.com/data',
          method: 'GET'
        },
        type: 'chart',
        option: {
          title: ['当前时间:', { label: 'time', value: ['get', 'time'] }],
          xAxis: { data: ['get-field-list', 'name', ['get', 'data']] },
          yAxis: {},
          series: [{ data: ['get-field-list', 'value', ['get', 'data']] }]
        },
        domStyle: {
          width: '600px',
          height: '400px'
        }
      });
    });
  </script>
</body>
</html>

注意事项

UMD 构建文件为 dist/Graphly.umd.cjs
会自动挂载到全局变量 window.graphlyTest.Graphly
已包含所有依赖（ECharts、Vue、vxe-table）
不支持 IE 浏览器（基于 ES2020+ 特性）

📘 API 文档

类：`Graphly`

构造函数

new Graphly(dom: HTMLElement | string)

参数：
- dom: 图表容器元素或 CSS 选择器字符串。

方法

`setOption(option: GraphlyOption)`

设置图表配置并加载数据、渲染图表。

参数：

interface GraphlyOption {
  data: {
    url: string       // 数据接口地址
    method: string    // 请求方法：GET/POST
    params?: any      // 请求参数（仅 POST 有效）
    headers?: any     // 请求头
  }
  type: string        // 图表类型：'chart'/'table'/'text'/'map'
  option: any         // 渲染配置项
  domStyle?: any      // DOM 样式对象
}

`destroyEntity()`

销毁当前图表/表格实例，并清空 DOM。

`getImage(): HTMLImageElement`

获取当前图表的快照图片（仅支持图表类型）。

`on(name: string, handler: Function)`

注册事件监听器。

支持事件：
- 'dataLoaded': 数据加载完成时触发。
- 'finished': 图表渲染完成后触发（携带快照图像）。
- 'error': 渲染报错触发。

`off(name: string, handler: Function)`

移除指定事件的监听器。

`emit(name: string, args: any)`

手动触发一个事件（内部使用）。

工具函数（可选导入）

`replaceOption(obj: any, data: any)`

递归替换配置项中的表达式字段为真实数据。

示例表达式格式：

option = {
  title: ["get", "title"],           // 取 data.title
  data: ["at", 0, ["get", "list"]],  // 取 data.list[0]
  fields: ["get-field-list", "name", ["get", "items"]]  // 取 data.items 中所有 name 字段组成数组
}

支持的表达式类型： | 类型 | 示例 | 描述 | |------------------------------------|------------------------------------------------|-------------------------------| | ["get", key] | ["get", "name"] | 获取 data.name 的值 | | ["get", key, obj] | ["get", "name", ["get","data"]] | 获取 data.data.name 的值 | | ["at", index, array] | ["at", 0, ["get", "list"]] | 获取数组第 0 个元素 | | ["get-field-list", field, array] | ["get-field-list", "name", ["get", "users"]] | 提取数组中每个对象的 name 字段 | | ["slice", input, start, end] | ["slice", "str", 1, 4] | 截取字符串或数组的部分内容 |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme