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

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

调用 ​

ts
import { Ltvis } from '@dingnl/ltvis-chart'

const chart = Ltvis.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 / 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] })

在线示例 ​