Skip to content

[Bug] baseOption with media incorrectly requires TimelineComponent when no timeline is configured #21686

Description

@anaef

Version

6.1.0

Link to Minimal Reproduction

https://jsbin.com/qayihuxedu/edit?html,css,js,output

Steps to Reproduce

Using the modular ECharts build without registering TimelineComponent:

import * as echarts from "echarts/core"
import { LineChart } from "echarts/charts"
import { GridComponent } from "echarts/components"
import { CanvasRenderer } from "echarts/renderers"

echarts.use([
	GridComponent,
	LineChart,
	CanvasRenderer,
])

const chart = echarts.init(document.getElementById("chart"))

chart.setOption({
	baseOption: {
		xAxis: {
			type: "category",
			data: ["a", "b"],
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				type: "line",
				data: [1, 2],
			},
		],
	},
	media: [
		{
			query: {
				maxWidth: 500,
			},
			option: {
				grid: {
					left: "10%",
					right: "10%",
				},
			},
		},
	],
})

No timeline is present in this option. The x-axis is also explicitly a category axis.

Current Behavior

ECharts reports:

Component timeline is used but not imported.

Depending on the development environment, this is surfaced as an exception while calling setOption.

Registering TimelineComponent suppresses the error, even though the chart does not use a timeline.

Charts that pass an ordinary root option work correctly. The issue appears when the responsive option is structured using baseOption and media.

Expected Behavior

ECharts should not require TimelineComponent unless a timeline is actually configured.

An option containing baseOption and media, but no timeline, should work with the modular build without registering TimelineComponent.

Environment

Any additional comments?

Suspected cause

OptionManager.parseRawOption appears to assign the root timeline to the base option even when the value is absent:

if (!baseOption.timeline) {
	baseOption.timeline = timelineOnRoot
}

When timelineOnRoot is undefined, this still creates a timeline property on baseOption.

The missing-component check subsequently appears to treat the presence of the timeline key as actual timeline usage, without checking whether its value is undefined. It therefore concludes that TimelineComponent is required.

Workaround

Hoisting baseOption to the option root avoids the problem:

chart.setOption({
	...baseOption,
	media,
})

Alternatively, registering TimelineComponent suppresses the error, but unnecessarily includes a component that the chart does not use.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions