Skip to content
产品中心
setOption基础配置

各产品共用的 option。不写则走默认值。一项配置的完整字段见对应子页。

调用

ts
import { Metobs } from '@dingnl/metobs-chart'

const chart = Metobs.Lidar.init(el)
chart.setOption({
    product: 'rcs',
    data: { values: records }
})

只传 productdata 即可出图。标题、轴、图例、提示框、缩放默认打开;工具栏默认关闭。

再设一次 option 时,没写的块会保留上次的值。datalegend.pieceslegend.rangedataZoom.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 / itemGap8

位置用关键字或百分比(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] })

在线示例