2.0.0 • Published 12 months ago

@visactor/univer-vchart-plugin v2.0.0

Weekly downloads
-
License
-
Repository
-
Last release
12 months ago

vchart univer 插件封装了Univer中绘制图表浮层的能力

npm.io npm.io npm Version npm Download PRs Welcome

npm.io license

English | 简体中文

简介

VChart 是 VisActor 可视化体系中的图表组件库,Univer是开源Office 办公套件,基于univer-vchart-plugin,可以轻松的创建图表浮层

🔨 使用

📦 安装

# npm
$ npm install @visactor/univer-vchart-plugin

# yarn
$ yarn add @visactor/univer-vchart-plugin

📊 一个简单的图表

import {
  UniverVChartPlugin,
  CREATE_VCHART_COMMAND_ID,
} from "@visactor/univer-vchart-plugin";

export function setupUniver() {
  const univer = new Univer({
    theme: defaultTheme,
    locale: LocaleType.EN_US,
    locales: {
      [LocaleType.EN_US]: enUS,
    },
  });
  univer.registerPlugin(UniverVChartPlugin);
}

export function setupVChartDemo($toolbar: HTMLElement, univerAPI: FUniver) {
  const $button = document.createElement("a");
  $button.textContent = "Create vchart demo";
  $toolbar.appendChild($button);

  $button.addEventListener("click", async () => {
    if (!univerAPI) throw new Error("univerAPI is not defined");

    const activeWorkbook = univerAPI.getActiveWorkbook();
    if (!activeWorkbook) throw new Error("activeWorkbook is not defined");
    const activeSheet = activeWorkbook.getActiveSheet();
    if (!activeSheet) throw new Error("activeSheet is not defined");

    await univerAPI.executeCommand(CREATE_VCHART_COMMAND_ID, {
      spec: {
        type: "line",
        data: {
          values: [
            {
              time: "2:00",
              value: 8,
            },
            {
              time: "4:00",
              value: 9,
            },
            {
              time: "6:00",
              value: 11,
            },
            {
              time: "8:00",
              value: 14,
            },
            {
              time: "10:00",
              value: 16,
            },
            {
              time: "12:00",
              value: 17,
            },
            {
              time: "14:00",
              value: 17,
            },
            {
              time: "16:00",
              value: 16,
            },
            {
              time: "18:00",
              value: 15,
            },
          ],
        },
        xField: "time",
        yField: "value",
      },
    });
  });
}

🔗 相关链接

🤝 参与贡献 PRs Welcome

如想参与贡献,请先阅读行为准则贡献指南

细流成河,终成大海!

2.0.0

12 months ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago