setOption基础配置
各产品共用的 option。不写则走默认值。一项配置的完整字段见对应子页。
调用
ts
import { Metobs } from '@dingnl/metobs-chart'
const chart = Metobs.Lidar.init(el)
chart.setOption({
product: 'rcs',
data: { values: records }
})只传 product 和 data 即可出图。标题、轴、图例、提示框、缩放默认打开;工具栏默认关闭。
再设一次 option 时,没写的块会保留上次的值。data、legend.pieces、legend.range、dataZoom.scaleExtent 会整段换掉。
顶层字段
| 字段 | 说明 | 类型 | 可选值 | 默认 |
|---|---|---|---|---|
background | 整图背景。不写则透明,导出 jpeg 时用白底 | string | — | 透明 |
title | 标题。见 标题 | object | — | 显示 |
grid | 绘图区边距和边框。见 网格 | object | — | 自动留空 |
xAxis / yAxis | 坐标轴。见 轴 | object | — | 显示刻度文字 |
legend | 图例。见 图例 | object | — | 显示 |
tooltip | 提示框。见 提示框 | object | — | 显示 |
dataZoom | 绘图区内缩放。见 缩放 | object | — | 开启 |
toolbox | 工具栏。见 工具栏 | object | — | 不显示 |
product | 产品名。由产品类消化 | string | 见对应产品页 | — |
data | 产品数据。由产品类消化 | object | — | — |
默认值
| 用途 | 值 |
|---|---|
| 正文 / 主标题 | #111827 |
| 辅文 / 轴 / 图例字 | #6b7280 |
| 轴线 / 边框 | #d1d5db |
| 分割线 | #e5e7eb |
| 字号(标题 / 副标题 / 轴 / 图例 / tooltip) | 14 |
| 悬停十字线 | rgba(0, 0, 0, 0.7)(与 tooltip 背景相同) |
外沿间距、标题 padding / itemGap | 8 |
位置用关键字或百分比(center / bottom / 100%)。线宽、字号、色条厚度、padding、圆角、图标用像素。绘图区边距由 containLabel 按字号推,不要写死百分比。
自己画标题 / 图例 / 工具栏
把对应的 show 设为 false,在图表外面自己摆。文字和色标仍写在 option 上,用实例方法读取和联动。
ts
const { text, subtext } = chart.getTitle()
const { type, pieces, range } = chart.getLegend()
const view = chart.getView()
chart.on('legendselectchanged', payload => {})
chart.dispatchAction({ type: 'legendToggleSelect', index: 0 })
chart.dispatchAction({ type: 'saveAsImage' })
chart.getDataURL({ layers: [myTitleEl] })