This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch v6-examples-supplement
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit 5299ddedb5a87b6633c258e5dce088b03388bc41
Author: 100pah <sushuang0...@gmail.com>
AuthorDate: Thu Aug 7 04:41:18 2025 +0800
Add example.
---
.../examples/ts/doc-example/geo-roam-indicator.js | 235 +++++++++++++++++++++
public/examples/ts/doc-example/grid-outerBounds.js | 188 +++++++++--------
2 files changed, 337 insertions(+), 86 deletions(-)
diff --git a/public/examples/ts/doc-example/geo-roam-indicator.js
b/public/examples/ts/doc-example/geo-roam-indicator.js
new file mode 100644
index 00000000..57e93ca2
--- /dev/null
+++ b/public/examples/ts/doc-example/geo-roam-indicator.js
@@ -0,0 +1,235 @@
+/*
+title: geo roam indicator demo
+noExplore: true
+since: 6.0.0
+*/
+
+function updateChart() {
+ option = {
+ title: {
+ text: 'Drag or pinch to roam the map',
+ },
+ tooltip: {},
+ geo: {
+ id: 'my_geo',
+ map: 'iceland',
+ aspectScale: Math.cos(65 * Math.PI / 180),
+
+ preserveAspect: app.config.preserveAspect,
+ preserveAspectAlign: app.config.preserveAspectAlign,
+ preserveAspectVerticalAlign:
app.config.preserveAspectVerticalAlign,
+ clip: app.config.clip,
+ roam: true,
+ // Note: if `clip: true; roamTrigger: 'global'`,
+ // roaming can only be triggered inside the clip area.
+ roamTrigger: app.config.roamTrigger,
+
+ // These props determine a rectangular area for the geo component:
+ left: app.config['geo.left'],
+ right: app.config['geo.right'],
+ top: app.config['geo.top'],
+ bottom: app.config['geo.bottom'],
+ },
+ };
+
+ myChart.setOption(option);
+
+ setTimeout(function () {
+ updateIndicators();
+ });
+}
+
+function initChart() {
+
+ myChart.on('georoam', function () {
+ updateIndicators();
+ });
+ myChart.on('resize', function () {
+ updateIndicators();
+ });
+
+ updateChart();
+}
+
+/**
+ * The rectangular indicators for tutorial purposes:
+ * - `geo_allocated_rect`:
+ * Determined by
`geo.left`/`.right`/`.top`/`.bottom`/`.width`/`.height`/`.aspectScale`.
+ * - `geo_view_rect`:
+ * Determined by `geo_allocated_rect`
+ * and
`geo.preserveAspect`/`.preserveAspectAlign`/`.preserveAspectVerticalAlign`.
+ * - `geo_content_bounding_rect`:
+ * Determined by `geo.map`/`.projection`/`.center`/`.zoom`.
+ */
+function updateIndicators() {
+ if (!_indicatorInfraRegistered) {
+ _indicatorInfraRegistered = true;
+ echarts.registerMap('geo_allocated_rect_indicator_fake_map', {
+ geoJSON: {
+ type: 'FeatureCollection',
+ features: [{
+ type: 'Feature',
+ geometry: {
+ type: 'Polygon',
+ coordinates: [[[0, 0], [0, 100], [100, 100], [100, 0]]]
+ },
+ properties: {
+ name: 'geo_allocated_rect (determined by
geo.left/right/top/bottom)',
+ cp: [50, 98]
+ }
+ }]
+ }
+ });
+ }
+
+ var ignore = !app.config.showRectIndicators;
+ var indicatorRects = app.__internalAPI.retrieveViewCoordSysRects(myChart,
{mainType: 'geo', id: 'my_geo'});
+
+ var colors = [
+ '#3B82F6',
+ '#10B981',
+ '#F59E0B'
+ ];
+
+ var indicatorsOption = {
+ // Tricky: Use another geo component just as an indicator for
convenience.
+ geo: {
+ id: 'geo_allocated_rect_indicator',
+ map: 'geo_allocated_rect_indicator_fake_map',
+ aspectScale: 1,
+ roam: false,
+ zoom: 1,
+ silent: true,
+ itemStyle: {
+ borderColor: colors[0],
+ borderWidth: 1,
+ borderType: 'dashed',
+ color: 'transparent',
+ },
+ label: {
+ show: true,
+ padding: 2,
+ color: colors[0],
+ borderColor: '#fff',
+ lineWidth: 2,
+ },
+ z: -12,
+ show: !ignore,
+
+ left: app.config['geo.left'],
+ right: app.config['geo.right'],
+ top: app.config['geo.top'],
+ bottom: app.config['geo.bottom'],
+ },
+ graphic: {
+ elements: [{
+ id: 'geo_view_rect_indicator',
+ type: 'rect',
+ silent: true,
+ z: -9,
+ style: {
+ // fill: '#e0e0e0',
+ fill: 'none',
+ stroke: colors[1],
+ lineWidth: 1,
+ lineDash: 'dashed',
+ },
+ textContent: {
+ type: 'text',
+ style: {
+ text: 'geo_view_rect\n(determined by applying
`preserveAspect` to geo_allocated_rect)',
+ fill: colors[1],
+ padding: 2,
+ stroke: '#fff',
+ lineWidth: 2,
+ fontSize: 12,
+ },
+ z: -8,
+ },
+ textConfig: {
+ position: 'insideTopLeft',
+ },
+ ignore: ignore,
+ shape: indicatorRects.viewRect,
+ }, {
+ id: 'geo_content_bounding_rect_indicator',
+ type: 'rect',
+ silent: true,
+ z: -6,
+ style: {
+ fill: 'none',
+ stroke: colors[2],
+ lineWidth: 1,
+ lineDash: 'dashed',
+ },
+ textContent: {
+ type: 'text',
+ style: {
+ text: 'geo_content_bounding_rect',
+ fill: colors[2],
+ padding: 2,
+ stroke: '#fff',
+ lineWidth: 2,
+ fontSize: 12,
+ },
+ z: -5,
+ },
+ textConfig: {
+ position: 'insideTop'
+ },
+ ignore: ignore,
+ shape: indicatorRects.contentBoundingRect,
+ }]
+ }
+ }; // End of indicatorsOption
+
+ myChart.setOption(indicatorsOption);
+}
+var _indicatorInfraRegistered = false;
+
+/**
+ * Note: The floating control panel are not relevant to echarts API,
+ * just for illustration purposes.
+ */
+function initFloatingControlPanelAndContext() {
+ app.config = {};
+
+ app.configParameters = {};
+ app.config.showRectIndicators = true;
+ app.configParameters.showRectIndicators = {options: [true, false]};
+ app.config.clip = true;
+ app.configParameters.clip = {options: [true, false]};
+ app.config.preserveAspect = true;
+ app.configParameters.preserveAspect = {options: [true, false, 'contain',
'cover']};
+ app.config.preserveAspectAlign = 'center';
+ app.configParameters.preserveAspectAlign = {options: ['center', 'left',
'right']};
+ app.config.preserveAspectVerticalAlign = 'middle';
+ app.configParameters.preserveAspectVerticalAlign = {options: ['middle',
'top', 'bottom']};
+ app.config.roamTrigger = 'selfRect';
+ app.configParameters.roamTrigger = {options: ['selfRect', 'global']};
+ app.config['geo.left'] = 100;
+ app.configParameters['geo.left'] = {min: 0, max: 500};
+ app.config['geo.right'] = 100;
+ app.configParameters['geo.right'] = {min: 0, max: 500};
+ app.config['geo.top'] = 100;
+ app.configParameters['geo.top'] = {min: 0, max: 500};
+ app.config['geo.bottom'] = 100;
+ app.configParameters['geo.bottom'] = {min: 0, max: 500};
+
+ app.config.onChange = function () {
+ updateChart();
+ };
+}
+
+initFloatingControlPanelAndContext();
+
+myChart.showLoading();
+$.get(ROOT_PATH + '/data/asset/geo/iceland.geo.json', function (geoJSON) {
+ myChart.hideLoading();
+
+
+ echarts.registerMap('iceland', geoJSON);
+
+ initChart();
+});
+
diff --git a/public/examples/ts/doc-example/grid-outerBounds.js
b/public/examples/ts/doc-example/grid-outerBounds.js
index b7404fcc..20106b67 100644
--- a/public/examples/ts/doc-example/grid-outerBounds.js
+++ b/public/examples/ts/doc-example/grid-outerBounds.js
@@ -1,92 +1,18 @@
-app.config = {};
-app.configParameters = {};
-
-app.config.showRectIndicators = true;
-app.configParameters.showRectIndicators = {options: [false, true]};
-app.config.xAxisType = 'value';
-app.configParameters.xAxisType = {options: ['value', 'category', 'time',
'log']},
-app.config.yAxisType = 'value';
-app.configParameters.yAxisType = {options: ['value', 'category', 'time',
'log']};
-app.config.containLabel = false;
-app.configParameters.containLabel = {options: [false, true]};
-app.config.outerBoundsMode = 'auto';
-app.configParameters.outerBoundsMode = {options: ['auto', 'same', 'none']};
-app.config.chartDataLength = 'medium_data';
-app.configParameters.chartDataLength = {options: ['small_data', 'medium_data',
'big_data']};
-app.config.xAxisNameLocation = 'center';
-app.configParameters.xAxisNameLocation = {options: ['center', 'start', 'end']};
-app.config.yAxisNameLocation = 'center';
-app.configParameters.yAxisNameLocation = {options: ['end', 'center', 'start']};
-app.config.xAxisLabelRotate = 0;
-app.configParameters.xAxisLabelRotate = {options: [0, 30, 45, 60, 90]};
-app.config.yAxisLabelRotate = 0;
-app.configParameters.yAxisLabelRotate = {options: [0, 30, 45, 60, 90]};
-app.config.hideOverlap = false;
-app.configParameters.hideOverlap = {options: [true, false]};
-app.config.yAxisCount = 1;
-app.configParameters.yAxisCount = {options: [1, 2]};
-app.config['grid.left'] = 70;
-app.config['grid.right'] = 260;
-app.config['grid.top'] = 50;
-app.config['grid.bottom'] = 45;
-app.configParameters['grid.left'] = {min: 0, max: 500};
-app.configParameters['grid.right'] = {min: 0, max: 500};
-app.configParameters['grid.top'] = {min: 0, max: 500};
-app.configParameters['grid.bottom'] = {min: 0, max: 500};
-app.config['grid.outerBounds.left'] = 0;
-app.config['grid.outerBounds.right'] = 0;
-app.config['grid.outerBounds.top'] = 0;
-app.config['grid.outerBounds.bottom'] = 0;
-app.configParameters['grid.outerBounds.left'] = {min: 0, max: 500};
-app.configParameters['grid.outerBounds.right'] = {min: 0, max: 500};
-app.configParameters['grid.outerBounds.top'] = {min: 0, max: 500};
-app.configParameters['grid.outerBounds.bottom'] = {min: 0, max: 500};
-
-/**
- * Initail echarts option.
- */
-option = createOption();
-
-app.config.onChange = function () {
- chartSetOptionUpdate();
-};
-
-
-function calcOuterBoundsIndicatorShape() {
- // This implementation is an copy of echarts internal logic.
- var gridOuterBoundsParsed = {};
- var parsedOuterBoundsMode = app.config.outerBoundsMode;
- if (app.config.containLabel) {
- parsedOuterBoundsMode = 'same';
- }
- if (parsedOuterBoundsMode === 'none') {
- // 'none' effectively indicates outerBounds infinity.
- gridOuterBoundsParsed.left = -1000;
- gridOuterBoundsParsed.top = -1000;
- gridOuterBoundsParsed.right = -1000;
- gridOuterBoundsParsed.bottom = -1000;
- }
- else if (parsedOuterBoundsMode == 'same') {
- gridOuterBoundsParsed.left = app.config['grid.left'];
- gridOuterBoundsParsed.top = app.config['grid.top'];
- gridOuterBoundsParsed.right = app.config['grid.right'];
- gridOuterBoundsParsed.bottom = app.config['grid.bottom'];
- }
- else {
- gridOuterBoundsParsed = {
- left: app.config['grid.outerBounds.left'],
- top: app.config['grid.outerBounds.top'],
- right: app.config['grid.outerBounds.right'],
- bottom: app.config['grid.outerBounds.bottom']
- };
- }
- return gridOuterBoundsParsed;
-}
+/*
+title: grid outerBounds example
+noExplore: true
+since: 6.0.0
+*/
function makeAxisName({xy, idx}) {
return xy + 'Axis_' + idx + 'name';
}
+/**
+ * The rectangular indicators for tutorial purposes:
+ * - grid axis aligned rect (determined by
`grid.left`/`.right`/`.top`/`.bottom`/`.width`/`.height`)
+ * - grid outer bounds rect (determined by `grid.outerBoundsMode` and
`grid.outerBounds`).
+ */
function makeIndicatorOption() {
var gridOuterBoundsParsed = calcOuterBoundsIndicatorShape();
var ignore = !app.config.showRectIndicators;
@@ -104,7 +30,7 @@ function makeIndicatorOption() {
return [
{
type: 'rect',
- id: 'grid_box_indicator',
+ id: 'grid_axis_aligned_rect_indicator',
ignore,
shape: {
x: app.config['grid.left'],
@@ -335,10 +261,100 @@ function createOption() {
};
}
-function chartSetOptionUpdate(chartIdx) {
+function updateChart(chartIdx) {
var option = createOption();
myChart.setOption(
option,
{replaceMerge: ['series', 'xAxis', 'yAxis']}
);
}
+
+function calcOuterBoundsIndicatorShape() {
+ // This implementation is an copy of echarts internal logic.
+ var gridOuterBoundsParsed = {};
+ var parsedOuterBoundsMode = app.config.outerBoundsMode;
+ if (app.config.containLabel) {
+ parsedOuterBoundsMode = 'same';
+ }
+ if (parsedOuterBoundsMode === 'none') {
+ // 'none' effectively indicates outerBounds infinity.
+ gridOuterBoundsParsed.left = -1000;
+ gridOuterBoundsParsed.top = -1000;
+ gridOuterBoundsParsed.right = -1000;
+ gridOuterBoundsParsed.bottom = -1000;
+ }
+ else if (parsedOuterBoundsMode == 'same') {
+ gridOuterBoundsParsed.left = app.config['grid.left'];
+ gridOuterBoundsParsed.top = app.config['grid.top'];
+ gridOuterBoundsParsed.right = app.config['grid.right'];
+ gridOuterBoundsParsed.bottom = app.config['grid.bottom'];
+ }
+ else {
+ gridOuterBoundsParsed = {
+ left: app.config['grid.outerBounds.left'],
+ top: app.config['grid.outerBounds.top'],
+ right: app.config['grid.outerBounds.right'],
+ bottom: app.config['grid.outerBounds.bottom']
+ };
+ }
+ return gridOuterBoundsParsed;
+}
+
+/**
+ * Note: The floating control panel are not relevant to echarts API,
+ * just for illustration purposes.
+ */
+function initFloatingControlPanelAndContext() {
+ app.config = {};
+ app.configParameters = {};
+
+ app.config.showRectIndicators = true;
+ app.configParameters.showRectIndicators = {options: [false, true]};
+ app.config.xAxisType = 'value';
+ app.configParameters.xAxisType = {options: ['value', 'category', 'time',
'log']},
+ app.config.yAxisType = 'value';
+ app.configParameters.yAxisType = {options: ['value', 'category', 'time',
'log']};
+ app.config.containLabel = false;
+ app.configParameters.containLabel = {options: [false, true]};
+ app.config.outerBoundsMode = 'auto';
+ app.configParameters.outerBoundsMode = {options: ['auto', 'same', 'none']};
+ app.config.chartDataLength = 'medium_data';
+ app.configParameters.chartDataLength = {options: ['small_data',
'medium_data', 'big_data']};
+ app.config.xAxisNameLocation = 'center';
+ app.configParameters.xAxisNameLocation = {options: ['center', 'start',
'end']};
+ app.config.yAxisNameLocation = 'center';
+ app.configParameters.yAxisNameLocation = {options: ['end', 'center',
'start']};
+ app.config.xAxisLabelRotate = 0;
+ app.configParameters.xAxisLabelRotate = {options: [0, 30, 45, 60, 90]};
+ app.config.yAxisLabelRotate = 0;
+ app.configParameters.yAxisLabelRotate = {options: [0, 30, 45, 60, 90]};
+ app.config.hideOverlap = false;
+ app.configParameters.hideOverlap = {options: [true, false]};
+ app.config.yAxisCount = 1;
+ app.configParameters.yAxisCount = {options: [1, 2]};
+ app.config['grid.left'] = 70;
+ app.config['grid.right'] = 260;
+ app.config['grid.top'] = 50;
+ app.config['grid.bottom'] = 45;
+ app.configParameters['grid.left'] = {min: 0, max: 500};
+ app.configParameters['grid.right'] = {min: 0, max: 500};
+ app.configParameters['grid.top'] = {min: 0, max: 500};
+ app.configParameters['grid.bottom'] = {min: 0, max: 500};
+ app.config['grid.outerBounds.left'] = 0;
+ app.config['grid.outerBounds.right'] = 0;
+ app.config['grid.outerBounds.top'] = 0;
+ app.config['grid.outerBounds.bottom'] = 0;
+ app.configParameters['grid.outerBounds.left'] = {min: 0, max: 500};
+ app.configParameters['grid.outerBounds.right'] = {min: 0, max: 500};
+ app.configParameters['grid.outerBounds.top'] = {min: 0, max: 500};
+ app.configParameters['grid.outerBounds.bottom'] = {min: 0, max: 500};
+
+ app.config.onChange = function () {
+ updateChart();
+ };
+}
+
+
+initFloatingControlPanelAndContext();
+// Initialize echarts option.
+option = createOption();
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
