图表（Chart）

图表元素基于 ECharts 渲染，支持柱状图、折线图、饼图等所有 ECharts 图表类型。chartOptions 属性直接使用 ECharts 的 option 对象。

安装

import { ChartPlugin } from 'vkedit'

host.installPlugin('chart-plugin', ChartPlugin)

安装后，工具栏会显示图表按钮。点击按钮后即可在画布上创建默认图表。

通过代码创建

import { AddElementCommand } from 'vkedit'

const elementManager = host.getPlugin('element-manager-plugin')
const chart = elementManager.createElement('chart')

// 设置位置和尺寸（毫米）
chart.xmm = 10
chart.ymm = 10
chart.wmm = 80
chart.hmm = 50

// 设置 ECharts option
chart.chartOptions = {
  xAxis: {
    type: 'category',
    data: ['Q1', 'Q2', 'Q3', 'Q4'],
  },
  yAxis: { type: 'value' },
  series: [{ type: 'bar', data: [120, 200, 150, 80] }],
}

host.executeCommand(new AddElementCommand(host, chart))

折线图示例

chart.chartOptions = {
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五'],
  },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: [8, 15, 12, 20, 18],
    smooth: true,
  }],
}

属性

基础属性（继承自 BaseGraphicElement）

属性	类型	默认值	说明
xmm	number	5	X 坐标（毫米）
ymm	number	5	Y 坐标（毫米）
wmm	number	50	宽度（毫米）
hmm	number	30	高度（毫米）
rotation	number	0	旋转角度（度）
visible	boolean	true	是否可见

图表特有属性

属性	类型	默认值	说明
chartOptions	EChartsOption	默认折线图	ECharts option 对象

ECharts 版本

ChartPlugin 内置 ECharts ^6.0.0，chartOptions 完全兼容 ECharts 配置项。更多图表类型请参考 ECharts 官方文档。

下一步

• 条形码元素 -- 生成条形码
• 矩形元素 -- 回到基础元素
• 元素创建 -- 了解元素创建的完整流程