Skip to content

fix(JadeJueChart): use the axisTick.customValues property to divide … #153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

fix(JadeJueChart): use the axisTick.customValues property to divide … #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 12 additions & 32 deletions src/components/JadeJueChart/labelFormatter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,36 +67,6 @@ const setChildDefaultMax = (data, angleAxis, fill) => {
});
};

// 配置玉闋图外围坐标系百分比展示文本
const setAxisLabel = (sum, iChartOption, baseOpt) => {
if (iChartOption.max) {
baseOpt.angleAxis.sum = iChartOption.max;
const formatter = params => {
if (params === iChartOption.max) {
return '100%';
}
if ((params / iChartOption.max) * 100 > 100) {
return '';
}
const x = Math.ceil((params / iChartOption.max) * 100);
return `${Math.ceil(x / 10) * 10}%`;
};
return formatter;
} else {
const formatter = params => {
if (params === sum) {
return '100%';
}
if ((params / sum) * 100 > 100) {
return '';
}
const x = Math.ceil((params / sum) * 100);
return `${Math.ceil(x / 10) * 10}%`;
};
return formatter;
}
};

/**
* 此函数两部分作用：（1）根据data和max,将数据分为四种数据类型，分类处理angleAxis的sum和max值
* （2）根据用户传入的formatter，配置极坐标系文本
Expand Down Expand Up @@ -141,15 +111,16 @@ const handleLabelFormatter = (iChartOption, baseOpt) => {
* 传入函数，用户自定义展示内容
*/
let formatter = angleAxis.axisLabel.formatter;
const defaultFormatter = (params) => `${(params / angleAxis.sum * 100).toFixed(0)}%`;
switch (formatter) {
case 'percent':
formatter = setAxisLabel(angleAxis.sum, iChartOption, baseOpt);
formatter = defaultFormatter;
break;
case 'number':
formatter = undefined;
break;
case undefined:
formatter = setAxisLabel(angleAxis.sum, iChartOption, baseOpt);
formatter = defaultFormatter;
break;
}
if (type === 'process') {
Expand All @@ -158,6 +129,15 @@ const handleLabelFormatter = (iChartOption, baseOpt) => {
return;
}
angleAxis.axisLabel.formatter = formatter;
// 使用customValues属性(echarts5.5.1以上版本才支持)将刻度均分为5份。
const customValues = [0];
const interval = angleAxis.splitNumber || 5;
const averageVal = angleAxis.sum / interval;
for (let i = 0; i < interval; i++) {
customValues.push(customValues[customValues.length - 1] + averageVal);
}
angleAxis.axisTick.customValues = customValues;
angleAxis.axisLabel.customValues = customValues;
Comment on lines +132 to +140
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify ECharts version compatibility and add input validation.

The implementation correctly divides the scale into equal parts using customValues. However, there are two considerations:

  1. The comment indicates this feature requires ECharts 5.5.1+, but there's no version check.
  2. The splitNumber value should be validated to prevent potential issues.

Consider adding version validation and input checks:

 // 使用customValues属性(echarts5.5.1以上版本才支持)将刻度均分为5份。
+const ECHARTS_MIN_VERSION = '5.5.1';
+const MIN_SPLIT_NUMBER = 2;
+const MAX_SPLIT_NUMBER = 10;
+
+// Ensure splitNumber is within reasonable bounds
+const validSplitNumber = Math.max(MIN_SPLIT_NUMBER, 
+  Math.min(MAX_SPLIT_NUMBER, angleAxis.splitNumber || 5));
+
 const customValues = [0];
-const interval = angleAxis.splitNumber || 5;
+const interval = validSplitNumber;
 const averageVal = angleAxis.sum / interval;

Please verify the ECharts version requirement:

🌐 Web query:

What is the minimum ECharts version that supports axisTick.customValues?

💡 Result:

The axisTick.customValues feature for specifying custom tick positions was introduced in Apache ECharts 5.0.0. This version marked a major upgrade with significant API improvements and new customization capabilities[5][9].

Key points:

  • Version 5.x introduced enhanced axis configuration options as part of its focus on flexibility and developer experience[5].
  • The customValues property allows explicit definition of tick locations instead of relying on automatic calculation[9].
  • Earlier versions (4.x and below) do not support this feature natively, requiring workarounds for custom tick positioning[10].

For implementation details:

yAxis: {
  type: 'value',
  axisTick: {
    customValues: [0, 25, 50, 75, 100] // Explicitly set tick positions
  }
}

Citations:

ECharts Version Mismatch—Update Version Check and Validate Input

The research shows that the axisTick.customValues feature was introduced in Apache ECharts 5.0.0, not 5.5.1 as indicated in the comment. The suggested validation for the splitNumber is still a good improvement, but the version requirement should be updated accordingly.

  • In file src/components/JadeJueChart/labelFormatter.js (lines 132-140), update the version constant (and comment) from 5.5.1 to 5.0.0.
  • Ensure that any added validation of angleAxis.splitNumber aligns with acceptable input ranges.

Committable suggestion skipped: line range outside the PR's diff.

};

export { handleLabelFormatter };
1 change: 1 addition & 0 deletions src/option/config/angleAxis/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ function angleAxis(iChartOption, chartName) {
switch (chartName) {
case 'JadeJueChart':
angleAxisOpt = base();
angleAxisOpt.splitNumber = 5;
angleAxisOpt.axisTick.show = true;
merge(angleAxisOpt, iChartOption.angleAxis);
break;
Expand Down