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

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",
      },
    });
  });
}

🔗 相关链接

• 主页
• VCharts 图表示例
• VChart 图表教程
• VChart 图表配置项
• VChart API
• VGrammar
• VRender
• FAQ
• CodeSandbox 模板 用于 bug 的提交

🤝 参与贡献

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

细流成河，终成大海！