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 e97f807962db86c256850856f43f49367477cc90
Author: 100pah <sushuang0...@gmail.com>
AuthorDate: Fri Aug 8 04:31:28 2025 +0800
Add and tweak geo and graph indicator examples for doc.
---
README.md | 2 -
.../examples/ts/doc-example/geo-roam-indicator.js | 403 +++++++++++----------
.../ts/doc-example/graph-roam-indicator.js | 254 +++++++++++++
3 files changed, 472 insertions(+), 187 deletions(-)
diff --git a/README.md b/README.md
index b0655e7e..ef56d84a 100644
--- a/README.md
+++ b/README.md
@@ -261,8 +261,6 @@ node e2e/main.js --skip npm --tests bar3D*
## Release
-1. Update example exporation page and snapshots
-
If any metadata is added/deleted/changed, we need to call the command below to
sync that change to `echarts-examples/src/data/chart-list-data.js` and
`echarts-examples/src/data/chart-list-data-gl.js`
```shell
npm run build:examplelist
diff --git a/public/examples/ts/doc-example/geo-roam-indicator.js
b/public/examples/ts/doc-example/geo-roam-indicator.js
index 57e93ca2..a97017de 100644
--- a/public/examples/ts/doc-example/geo-roam-indicator.js
+++ b/public/examples/ts/doc-example/geo-roam-indicator.js
@@ -5,50 +5,62 @@ 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'],
- },
- };
+ option = {
+ title: {
+ text: 'Drag or pinch to roam the map'
+ },
+ tooltip: {},
+ geo: {
+ id: 'my_geo',
+ map: 'iceland',
+ aspectScale: Math.cos((65 * Math.PI) / 180),
+ animation: false,
- myChart.setOption(option);
+ preserveAspect: app.config.preserveAspect,
+ preserveAspectAlign: app.config.preserveAspectAlign,
+ preserveAspectVerticalAlign: app.config.preserveAspectVerticalAlign,
+ clip: app.config.clip,
+ // 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'],
+
+ // Roaming related props:
+ roam: true,
+ // Note: if `clip: true; roamTrigger: 'global'`,
+ // roaming can only be triggered inside the clip area.
+ roamTrigger: app.config.roamTrigger,
+ // center and zoom:
+ center: [
+ app.config['geo.center[0]%'] + '%',
+ app.config['geo.center[1]%'] + '%'
+ ],
+ zoom: app.config['geo.zoom']
+ }
+ };
+
+ function handleFinished() {
+ myChart.off('finished', handleFinished);
setTimeout(function () {
- updateIndicators();
- });
+ updateIndicators();
+ }, 0);
+ }
+ myChart.on('finished', handleFinished);
+
+ myChart.setOption(option);
}
function initChart() {
+ myChart.on('georoam', function () {
+ updateIndicators();
+ });
+ window.addEventListener('resize', function () {
+ updateIndicators();
+ });
- myChart.on('georoam', function () {
- updateIndicators();
- });
- myChart.on('resize', function () {
- updateIndicators();
- });
-
- updateChart();
+ updateChart();
}
/**
@@ -62,128 +74,139 @@ function initChart() {
* 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]
- }
- }]
+ 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,
+ var ignore = !app.config.showRectIndicators;
+ var indicatorRects = app.__internalAPI.retrieveViewCoordSysRects(myChart, {
+ mainType: 'geo',
+ id: 'my_geo'
+ });
+
+ var colors = ['#3B82F6', '#10B981', '#F59E0B'];
- left: app.config['geo.left'],
- right: app.config['geo.right'],
- top: app.config['geo.top'],
- bottom: app.config['geo.bottom'],
+ 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
},
- 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,
- }]
+ {
+ 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
+ ]
+ }
+ }; // End of indicatorsOption
- myChart.setOption(indicatorsOption);
+ myChart.setOption(indicatorsOption);
}
var _indicatorInfraRegistered = false;
@@ -192,44 +215,54 @@ var _indicatorInfraRegistered = false;
* 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();
- };
+ 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['geo.center[0]%'] = 50;
+ app.configParameters['geo.center[0]%'] = { min: 0, max: 100 };
+ app.config['geo.center[1]%'] = 50;
+ app.configParameters['geo.center[1]%'] = { min: 0, max: 100 };
+ app.config['geo.zoom'] = 1;
+ app.configParameters['geo.zoom'] = { min: 0.1, max: 10, step: 0.1 };
+
+ app.config.onChange = function () {
+ updateChart();
+ };
}
initFloatingControlPanelAndContext();
myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/geo/iceland.geo.json', function (geoJSON) {
- myChart.hideLoading();
-
+ myChart.hideLoading();
- echarts.registerMap('iceland', geoJSON);
+ echarts.registerMap('iceland', geoJSON);
- initChart();
+ initChart();
});
-
diff --git a/public/examples/ts/doc-example/graph-roam-indicator.js
b/public/examples/ts/doc-example/graph-roam-indicator.js
new file mode 100644
index 00000000..9a2a2300
--- /dev/null
+++ b/public/examples/ts/doc-example/graph-roam-indicator.js
@@ -0,0 +1,254 @@
+/*
+title: graph roam indicator demo
+noExplore: true
+since: 6.0.0
+*/
+
+function updateChart() {
+ option = {
+ title: {
+ text: 'Drag or pinch to roam the graph'
+ },
+ tooltip: {},
+ series: {
+ id: 'my_graph',
+ type: 'graph',
+
+ animation: false,
+
+ // `preserveXxx` requires echarts v6.0.0+.
+ preserveAspect: app.config.preserveAspect,
+ preserveAspectAlign: app.config.preserveAspectAlign,
+ preserveAspectVerticalAlign: app.config.preserveAspectVerticalAlign,
+
+ // These props determine a rectangular area for the graph series:
+ left: app.config['series.left'],
+ right: app.config['series.right'],
+ top: app.config['series.top'],
+ bottom: app.config['series.bottom'],
+
+ // Roaming related props:
+ roam: true,
+ // `roamTrigger` requires echarts v6.0.0+.
+ roamTrigger: app.config.roamTrigger,
+ center: [
+ app.config['series.center[0]%'] + '%',
+ app.config['series.center[1]%'] + '%'
+ ],
+ zoom: app.config['series.zoom'],
+
+ // Other style props:
+ symbolSize: 35,
+ label: { show: true },
+ edgeSymbol: ['circle', 'arrow'],
+ edgeSymbolSize: [4, 15],
+ lineStyle: { opacity: 1, width: 2 },
+
+ data: [
+ { name: 'node_1', x: 300, y: 200 },
+ { name: 'node_2', x: 800, y: 200 },
+ { name: 'node_3', x: 700, y: 100 },
+ { name: 'node_4', x: 400, y: 300 }
+ ],
+ edges: [
+ { source: 'node_1', target: 'node_2' },
+ { source: 'node_1', target: 'node_3' },
+ { source: 'node_2', target: 'node_3' },
+ { source: 'node_2', target: 'node_4' },
+ { source: 'node_1', target: 'node_4' }
+ ]
+ }
+ };
+
+ function handleFinished() {
+ myChart.off('finished', handleFinished);
+ setTimeout(function () {
+ updateIndicators();
+ }, 0);
+ }
+ myChart.on('finished', handleFinished);
+
+ myChart.setOption(option);
+}
+
+function initChart() {
+ myChart.on('graphroam', function () {
+ updateIndicators();
+ });
+ window.addEventListener('resize', function () {
+ updateIndicators();
+ });
+
+ updateChart();
+}
+
+/**
+ * The rectangular indicators for tutorial purposes:
+ * - `graph_allocated_rect`:
+ * Determined by
`series[type='graph'].left`/`.right`/`.top`/`.bottom`/`.width`/`.height`.
+ * - `graph_view_rect`:
+ * Determined by `graph_allocated_rect`
+ * and
`series[type='graph'].preserveAspect`/`.preserveAspectAlign`/`.preserveAspectVerticalAlign`.
+ * - `graph_content_bounding_rect`:
+ * Determined by `series[type='graph'].center`/`.zoom`.
+ */
+function updateIndicators() {
+ var ignore = !app.config.showRectIndicators;
+ var indicatorRects = app.__internalAPI.retrieveViewCoordSysRects(myChart, {
+ mainType: 'series',
+ subType: 'graph',
+ id: 'my_graph'
+ });
+
+ var colors = ['#3B82F6', '#10B981', '#F59E0B'];
+
+ var indicatorsOption = {
+ // Tricky: Use a matrix component just as an indicator for convenience.
+ matrix: {
+ id: 'graph_allocated_rect_indicator',
+ left: app.config['series.left'],
+ right: app.config['series.right'],
+ top: app.config['series.top'],
+ bottom: app.config['series.bottom'],
+ backgroundStyle: {
+ opacity: ignore ? 0 : 1,
+ borderType: 'dashed',
+ borderColor: colors[0]
+ },
+ x: { data: ['x'], show: false },
+ y: { data: ['y'], show: false },
+ body: {
+ itemStyle: { opacity: ignore ? 0 : 1 },
+ data: [
+ {
+ value:
+ 'graph_allocated_rect (determined by
series.left/right/top/bottom/width/height)',
+ label: {
+ position: 'insideTopLeft',
+ padding: 2,
+ color: colors[0],
+ borderColor: '#fff',
+ lineWidth: 2,
+ opacity: ignore ? 0 : 1
+ },
+ coord: [0, 0]
+ }
+ ]
+ }
+ },
+ graphic: {
+ elements: [
+ {
+ id: 'graph_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: 'graph_view_rect\n(determined by applying `preserveAspect`
to graph_allocated_rect)',
+ fill: colors[1],
+ padding: 2,
+ stroke: '#fff',
+ lineWidth: 2,
+ fontSize: 12
+ },
+ z: -8
+ },
+ textConfig: {
+ position: 'insideTopLeft'
+ },
+ ignore: ignore,
+ shape: indicatorRects.viewRect
+ },
+ {
+ id: 'graph_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: 'graph_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);
+}
+
+/**
+ * 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.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['series.left'] = 100;
+ app.configParameters['series.left'] = { min: 0, max: 500 };
+ app.config['series.right'] = 100;
+ app.configParameters['series.right'] = { min: 0, max: 500 };
+ app.config['series.top'] = 100;
+ app.configParameters['series.top'] = { min: 0, max: 500 };
+ app.config['series.bottom'] = 100;
+ app.configParameters['series.bottom'] = { min: 0, max: 500 };
+ app.config['series.center[0]%'] = 50;
+ app.configParameters['series.center[0]%'] = { min: 0, max: 100 };
+ app.config['series.center[1]%'] = 50;
+ app.configParameters['series.center[1]%'] = { min: 0, max: 100 };
+ app.config['series.zoom'] = 1;
+ app.configParameters['series.zoom'] = { min: 0.1, max: 10, step: 0.1 };
+
+ app.config.onChange = function () {
+ updateChart();
+ };
+}
+
+initFloatingControlPanelAndContext();
+setTimeout(function () {
+ initChart();
+}, 0);
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
