This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch enhance-examples
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit 474db30f6b43eba21e20d03ef86e8417bdfbc635
Author: 100pah <sushuang0...@gmail.com>
AuthorDate: Mon Aug 11 05:14:56 2025 +0800
Add axis break intraday examples.
---
public/examples/ts/intraday-stock-breaks-1.ts | 137 ++++++++++++++++++++++++++
public/examples/ts/intraday-stock-breaks-2.ts | 112 +++++++++++++++++++++
2 files changed, 249 insertions(+)
diff --git a/public/examples/ts/intraday-stock-breaks-1.ts
b/public/examples/ts/intraday-stock-breaks-1.ts
new file mode 100644
index 00000000..a43dc6f7
--- /dev/null
+++ b/public/examples/ts/intraday-stock-breaks-1.ts
@@ -0,0 +1,137 @@
+/*
+title: Intraday Stock Chart with Breaks
+titleCN: 盘中股票走势图
+category: candlestick, line
+difficulty: 4
+since: 6.0.0
+*/
+
+var roundTime = echarts.time.roundTime;
+var formatTime = echarts.time.format;
+var BREAK_GAP = '1%';
+var DATA_ZOOM_MIN_VALUE_SPAN = 3600 * 1000;
+
+var _data = generateData();
+
+option = {
+ useUTC: true,
+ title: {
+ text: 'Intraday Stock Chart with Breaks',
+ left: 'center'
+ },
+ tooltip: {
+ show: true,
+ trigger: 'axis'
+ },
+ grid: {
+ top: '25%',
+ bottom: '40%'
+ },
+ xAxis: [
+ {
+ type: 'time',
+ interval: 1000 * 60 * 30, // 30 minutes
+ axisLabel: {
+ showMinLabel: true,
+ showMaxLabel: true,
+ formatter(timestamp, _, opt) {
+ if (opt.break) {
+ return formatTime(timestamp, '{HH}:{mm}\n{dd}d', true);
+ }
+ return formatTime(timestamp, '{HH}:{mm}', true);
+ }
+ },
+ breaks: _data.breaks,
+ breakArea: {
+ expandOnClick: false,
+ zigzagAmplitude: 0,
+ zigzagZ: 200,
+ itemStyle: {
+ opacity: 1,
+ }
+ }
+ }
+ ],
+ yAxis: {
+ type: 'value',
+ min: 'dataMin'
+ },
+ dataZoom: [
+ {
+ type: 'inside',
+ minValueSpan: DATA_ZOOM_MIN_VALUE_SPAN
+ },
+ {
+ type: 'slider',
+ bottom: '30%',
+ minValueSpan: DATA_ZOOM_MIN_VALUE_SPAN
+ }
+ ],
+ series: [
+ {
+ type: 'line',
+ symbolSize: 0,
+ areaStyle: {},
+ data: _data.seriesData
+ }
+ ]
+};
+/**
+ * Generate random data, not relevant to echarts API.
+ */
+function generateData() {
+ var seriesData = [];
+ var breaks = [];
+
+ var time = new Date('2024-04-09T00:00:00Z');
+ var endTime = new Date('2024-04-12T23:59:59Z').getTime();
+ var todayCloseTime = new Date();
+
+ updateDayTime(time, todayCloseTime);
+
+ function updateDayTime(time: Date, todayCloseTime: Date): void {
+ roundTime(time, 'day', true);
+ todayCloseTime.setTime(time.getTime());
+ time.setUTCHours(9, 30); // Open time
+ todayCloseTime.setUTCHours(15, 0); // Close time
+ }
+
+ var valBreak = false;
+ for (var val = 1669; time.getTime() <= endTime; ) {
+ var delta;
+ if (valBreak) {
+ delta =
+ Math.floor((Math.random() - 0.5 * Math.sin(val / 1000)) * 20 * 5000) /
+ 100;
+ valBreak = false;
+ } else {
+ delta =
+ Math.floor((Math.random() - 0.5 * Math.sin(val / 1000)) * 20 * 100) /
+ 100;
+ }
+ val = val + delta;
+ val = +val.toFixed(2);
+ seriesData.push([time.getTime(), val]);
+
+ time.setMinutes(time.getMinutes() + 1);
+
+ if (time.getTime() > todayCloseTime.getTime()) {
+ var breakStart = todayCloseTime.getTime();
+ time.setUTCDate(time.getUTCDate() + 1);
+ updateDayTime(time, todayCloseTime);
+ var breakEnd = time.getTime();
+
+ valBreak = true;
+
+ breaks.push({
+ start: breakStart,
+ end: breakEnd,
+ gap: BREAK_GAP
+ });
+ }
+ }
+ return {
+ seriesData: seriesData,
+ breaks: breaks
+ };
+}
diff --git a/public/examples/ts/intraday-stock-breaks-2.ts
b/public/examples/ts/intraday-stock-breaks-2.ts
new file mode 100644
index 00000000..8f45d7ae
--- /dev/null
+++ b/public/examples/ts/intraday-stock-breaks-2.ts
@@ -0,0 +1,112 @@
+/*
+title: Intraday Stock Chart with Breaks (II)
+titleCN: 盘中股票走势图 (II)
+category: candlestick, line
+difficulty: 4
+noExplore: true
+since: 6.0.0
+*/
+
+var formatTime = echarts.time.format;
+
+var _data = generateData1();
+
+option = {
+ title: {
+ text: 'Intraday Stock Chart with Breaks (II)',
+ left: 'center'
+ },
+ tooltip: {
+ show: true,
+ trigger: 'axis'
+ },
+ xAxis: [
+ {
+ type: 'time',
+ interval: 1000 * 60 * 30, // 30 minutes
+ axisLabel: {
+ showMinLabel: true,
+ showMaxLabel: true,
+ formatter: (value, index, extra) => {
+ if (!extra || !extra.break) {
+ return formatTime(value, '{HH}:{mm}', true);
+ }
+ // Only render the label on break start, but not on break end.
+ if (extra.break.type === 'start') {
+ return (
+ formatTime(extra.break.start, '{HH}:{mm}', true) +
+ '/' +
+ formatTime(extra.break.end, '{HH}:{mm}', true)
+ );
+ }
+ return '';
+ }
+ },
+ breakLabelLayout: {
+ // Disable auto move of break labels if overlapping,
+ // and use `axisLabel.formatter` to control the label display.
+ moveOverlap: false
+ },
+ breaks: [
+ {
+ start: _data.breakStart,
+ end: _data.breakEnd,
+ gap: 0
+ }
+ ],
+ breakArea: {
+ expandOnClick: false,
+ zigzagAmplitude: 0,
+ zigzagZ: 200
+ }
+ }
+ ],
+ yAxis: {
+ type: 'value',
+ min: 'dataMin'
+ },
+ dataZoom: [
+ {
+ type: 'inside',
+ xAxisIndex: 0
+ },
+ {
+ type: 'slider',
+ xAxisIndex: 0
+ }
+ ],
+ series: [
+ {
+ type: 'line',
+ symbolSize: 0,
+ data: _data.seriesData
+ }
+ ]
+};
+/**
+ * Generate random data, not relevant to echarts API.
+ */
+function generateData1() {
+ var seriesData = [];
+ var time = new Date('2024-04-09T09:30:00Z');
+ var endTime = new Date('2024-04-09T15:00:00Z').getTime();
+ var breakStart = new Date('2024-04-09T11:30:00Z').getTime();
+ var breakEnd = new Date('2024-04-09T13:00:00Z').getTime();
+
+ for (var val = 1669; time.getTime() <= endTime; ) {
+ if (time.getTime() <= breakStart || time.getTime() >= breakEnd) {
+ val =
+ val +
+ Math.floor((Math.random() - 0.5 * Math.sin(val / 1000)) * 20 * 100) /
+ 100;
+ val = +val.toFixed(2);
+ seriesData.push([time.getTime(), val]);
+ }
+ time.setMinutes(time.getMinutes() + 1);
+ }
+ return {
+ seriesData: seriesData,
+ breakStart: breakStart,
+ breakEnd: breakEnd
+ };
+}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
