feat: enhance polar line to simulate radar
Brief Information
This pull request is in the type of:
- [ ] bug fixing
- [x] new feature
- [ ] others
What does this PR do?
Enhances polar coordinate system to enable line series to simulate radar chart functionality with single category + single metric use cases.
Fixed issues
N/A
Details
Before: What was the problem?
The traditional radar chart in ECharts has several limitations:
-
Limited Data Structure Support: The original radar chart only works well with multiple metrics + single category structure. When dealing with single metric + single category data (which is common), it becomes difficult to use effectively.
-
Implementation Inconsistencies: The radar chart was implemented as a standalone component with its own logic, separate from the polar coordinate system. This resulted in:
- Many features available in polar line charts being unavailable in radar charts
- Several unresolved bugs and missing functionality
- Duplicated code and inconsistent API design
-
Industry Standard Mismatch: Most other charting libraries implement radar charts as an extension of polar line charts, which provides better flexibility and feature consistency. ECharts lacked the necessary features to support this approach.
After: How does it behave after the fixing?
This PR enhances the polar coordinate system with two new features that enable line series to simulate radar chart behavior:
1. Added connectEnds option to line series
- Connects the end point back to the start point, creating a closed shape
- Only effective in polar coordinate system
- Works seamlessly with smooth curves (automatically adds control points for smooth closure)
- Supports both polyline and polygon (with area fill)
2. Added splitLine.shape option to radius axis
- New option:
'arc'(default, original behavior) or'polygon' - When set to
'polygon'with category angle axis, creates polygon-shaped grid lines by connecting angle tick points - Perfectly simulates the radar chart's web-like grid appearance
Benefits:
- Users can now use polar line charts for single category + single metric scenarios
- Inherits all line series features: smooth curves, sampling, custom styles, etc.
- More flexible than the traditional radar chart
- Consistent with industry standards and other popular charting libraries
- Unified API design with the rest of ECharts
Document Info
One of the following should be checked.
- [ ] This PR doesn't relate to document changes
- [x] The document should be updated later
- [ ] The document changes have been made in apache/echarts-doc#xxx
Documentation needed:
- New
connectEndsoption for line series in polar coordinate system - New
splitLine.shapeoption for radius axis - Usage examples showing how to create radar-like charts using enhanced polar line
Misc
Security Checking
- [ ] This PR uses security-sensitive Web APIs.
Note: This PR only uses standard canvas drawing APIs for rendering geometry (polygons, lines). No security-sensitive Web APIs are involved.
ZRender Changes
- [ ] This PR depends on ZRender changes (ecomfe/zrender#xxx).
Related test cases or examples to use the new APIs
Basic usage example:
const option = {
polar: { radius: '70%' },
radiusAxis: {
type: 'value',
min: 0,
max: 10,
splitLine: {
show: true,
shape: 'polygon' // New option
}
},
angleAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F'],
boundaryGap: false,
startAngle: 90,
axisLine: {
show: false
},
},
series: [{
type: 'line',
coordinateSystem: 'polar',
connectEnds: true, // New option
data: [[8, 'A'], [6, 'B'], [7, 'C'], [5, 'D'], [8, 'E'], [6, 'F']],
areaStyle: {}
}]
};
Merging options
- [x] Please squash the commits into a single one when merging.
Other information
Thanks for your contribution! The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.
Please DO NOT commit the files in dist, i18n, and ssr/client/dist folders in a non-release pull request. These folders are for release use only.
Document changes are required in this PR. Please also make a PR to apache/echarts-doc for document changes and update the issue id in the PR description. When the doc PR is merged, the maintainers will remove the PR: awaiting doc label.
The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-21378@b4ed481
Thanks for your contribution.
Would it be better to implement this as a new custom series in echarts-custom-series and only add
splitLine.shapein this PR? Using a line series to simulate a radar chart seems like a workaround. Also, since the line series is a commonly used chart type, we should be cautious about both the additional logic and the impact on bundle size.It looks like you may need to remove `shape: 'polygon'` in the test case above and test the default value.
Re: custom series — The goal here is to extend and reuse polar line capabilities,not as a workaround. For single-metric + single-dimension (a common use case), the radar chart doesn't work well.
Re: line series changes — Agreed on being cautious. That's why only two options are added (connectEnds + splitLine.shape), both strictly scoped to polar coordinate system.
Re: bundle size — The actual delta is ~150 lines across 5 files. the size changing is minimal.
Re: default value test — Fixed
It looks like you may need to remove `shape: 'polygon'` in the test case above and test the default value.