官方文档｜Vue 集成 Highcharts Dashboards

Highcharts.js2025-12-13 8:40

要用 Vue 创建一个仪表盘，请按照以下步骤操作：

1. 安装 Dashboards 包

bash 复制代码

npm install @highcharts/dashboards

2. 导入 Dashboards 包

typescript 复制代码

import Dashboards from '@highcharts/dashboards';

3. 其他包

考虑使用额外的包，比如 Highcharts 或 Grid，以充分发挥 Dashboards 的潜力。

首先，安装选用包。

bash 复制代码

npm install highcharts

然后，导入该包和专用的插件，将其连接到仪表盘。

typescript 复制代码

import Highcharts from 'highcharts/es-modules/masters/highcharts.src.js';
import Dashboards from '@highcharts/dashboards/es-modules/masters/dashboards.src.js';
import Grid from '@highcharts/dashboards/es-modules/masters/datagrid.src.js';

Dashboards.HighchartsPlugin.custom.connectHighcharts(Highcharts);
Dashboards.GridPlugin.custom.connectGrid(Grid);
Dashboards.PluginHandler.addPlugin(Dashboards.HighchartsPlugin);
Dashboards.PluginHandler.addPlugin(Dashboards.GridPlugin);

请注意：如果你正在使用Visual Studio Code 编辑器和
Volar 扩展，您应该更改扩展设置
"vue.server.maxFileSize" 设置为至少25000000字节

完整的编辑器支持所有Highcharts模块。你可以在菜单上找到
菜单File -> 偏好Preferences -> 设置Settings，在这里你必须滚动到
Vue：最大文件大小的值。

4. 为仪表盘创建一个 HTML 结构

有两种方法可以实现：

使用仪表盘布局系统

要做到这一点，首先导入 layout 模块并初始化它：

typescript 复制代码

import '@highcharts/dashboards/es-modules/masters/modules/layout.src.js';

在你想要渲染仪表盘的地方添加一个 div：

html 复制代码

<div ref="dashboardContainer"></div>

声明你的HTML结构

详细信息请参阅文档.

5. 创建一个仪表盘

仪表盘是使用工厂函数 Dashboards.board 创建的。该函数接受三个参数：

container - 仪表盘将被渲染的元素，可以是元素的 ID 或者元素的直接引用
options - 仪表盘的配置对象
isAsync - 仪表盘是否应异步渲染 - 在使用外部数据资源时是否具有功能性

演示 Demos

看看以下演示，了解它的工作原理：