feat: 数据标签颜色默认同系列+可自定义;Y轴最小/最大值手动指定 v1.20.0

- 数据标签颜色:默认自动取系列颜色(柱状/折线色),也可选自定义颜色手动指定
- Y轴范围:默认自动计算,可手动指定最小/最大值;双Y轴时左/右轴可分别指定
- 主图 + 多图合并 + 服务端API 三处统一;收藏保存/恢复含两项设置
- API 新增参数 labelColorMode/labelColor, yAxisMin/yAxisMax, leftAxisMin/Max, rightAxisMin/Max
This commit is contained in:
2026-08-23 18:15:21 +08:00
parent 864c43ab99
commit 01c0536986
4 changed files with 185 additions and 8 deletions
+41 -3
View File
@@ -152,6 +152,13 @@ function applySeriesStyle(seriesItem, type, color, style) {
}
}
// Y轴 min/max:空值/非法返回 undefinedECharts 自动)
function axisNum(v) {
if (v === '' || v === undefined || v === null) return undefined;
const n = parseFloat(v);
return isNaN(n) ? undefined : n;
}
function buildChartOption(params) {
const {
data,
@@ -178,6 +185,14 @@ function buildChartOption(params) {
seriesStyles = null,
leftAxisNameLoc = 'vertical',
rightAxisNameLoc = 'vertical',
labelColorMode = 'auto',
labelColor = '#333333',
yAxisMin = '',
yAxisMax = '',
leftAxisMin = '',
leftAxisMax = '',
rightAxisMin = '',
rightAxisMax = '',
width = 800
} = params;
@@ -315,12 +330,13 @@ function buildChartOption(params) {
const st = Array.isArray(seriesStyles) ? seriesStyles[idx] : null;
applySeriesStyle(seriesItem, type, color, st);
// 数据标签:颜色默认同系列颜色,可手动自定义
if (showLabel) {
seriesItem.label = {
show: true,
position: 'top',
fontSize: 11,
color: textColor,
color: labelColorMode === 'custom' ? labelColor : color,
formatter: (p) => {
if (p.value >= 10000) return (p.value / 10000).toFixed(1) + 'w';
if (p.value >= 1000) return (p.value / 1000).toFixed(1) + 'k';
@@ -470,6 +486,8 @@ function buildChartOption(params) {
{
type: 'value',
name: leftAxisName || '左轴',
min: axisNum(leftAxisMin),
max: axisNum(leftAxisMax),
nameLocation: leftAxisNameLoc === 'top' ? 'end' : 'middle',
nameRotate: leftAxisNameLoc === 'top' ? 0 : 90,
nameGap: leftAxisNameLoc === 'top' ? 12 : 32,
@@ -489,6 +507,8 @@ function buildChartOption(params) {
type: 'value',
name: rightAxisName || '右轴',
position: 'right',
min: axisNum(rightAxisMin),
max: axisNum(rightAxisMax),
nameLocation: rightAxisNameLoc === 'top' ? 'end' : 'middle',
nameRotate: rightAxisNameLoc === 'top' ? 0 : 90,
nameGap: rightAxisNameLoc === 'top' ? 12 : 32,
@@ -500,6 +520,8 @@ function buildChartOption(params) {
}
] : {
type: 'value',
min: axisNum(yAxisMin),
max: axisNum(yAxisMax),
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { color: textColor, fontSize: 11 },
@@ -604,6 +626,14 @@ app.get('/api/chart', (req, res) => {
seriesStyles: req.query.seriesStyles ? req.query.seriesStyles.split(',') : null,
leftAxisNameLoc: req.query.leftAxisNameLoc || 'vertical',
rightAxisNameLoc: req.query.rightAxisNameLoc || 'vertical',
labelColorMode: req.query.labelColorMode || 'auto',
labelColor: req.query.labelColor || '#333333',
yAxisMin: req.query.yAxisMin || '',
yAxisMax: req.query.yAxisMax || '',
leftAxisMin: req.query.leftAxisMin || '',
leftAxisMax: req.query.leftAxisMax || '',
rightAxisMin: req.query.rightAxisMin || '',
rightAxisMax: req.query.rightAxisMax || '',
rowsAsSeries: req.query.rowsAsSeries === 'true',
width: parseInt(req.query.width) || 800,
height: parseInt(req.query.height) || 500,
@@ -1121,7 +1151,7 @@ app.get('/api/health', (req, res) => {
res.json({
status: 'ok',
service: 'data-chart-tool',
version: '1.19.0',
version: '1.20.0',
endpoints: {
'POST /api/chart': '生成图表图片(JSON body',
'GET /api/chart': '生成图表图片(URL 参数)',
@@ -1141,7 +1171,7 @@ app.get('/api/health', (req, res) => {
app.get('/api/docs', (req, res) => {
res.json({
name: '数据可视化图表生成器 API',
version: '1.19.0',
version: '1.20.0',
endpoints: [
{
method: 'POST',
@@ -1176,6 +1206,14 @@ app.get('/api/docs', (req, res) => {
seriesStyles: { type: 'array', default: null, description: '每系列样式(如 ["solid","dashed"],柱状支持 solid实体/hollow空心/shadow阴影,折线支持 solid实线/dashed虚线/dotted点线)' },
leftAxisNameLoc: { type: 'string', default: 'vertical', options: ['vertical', 'top'], description: '左轴标题显示方式:vertical=竖直显示(默认)top=轴上部横排' },
rightAxisNameLoc: { type: 'string', default: 'vertical', options: ['vertical', 'top'], description: '右轴标题显示方式:vertical=竖直显示(默认)top=轴上部横排' },
labelColorMode: { type: 'string', default: 'auto', options: ['auto', 'custom'], description: '数据标签颜色:auto=同系列颜色(默认)custom=手动指定 labelColor' },
labelColor: { type: 'string', default: '#333333', description: '数据标签自定义颜色(labelColorMode=custom 时生效)' },
yAxisMin: { type: 'string', default: '', description: '单Y轴最小值(留空=自动)' },
yAxisMax: { type: 'string', default: '', description: '单Y轴最大值(留空=自动)' },
leftAxisMin: { type: 'string', default: '', description: '双Y轴左轴最小值(留空=自动)' },
leftAxisMax: { type: 'string', default: '', description: '双Y轴左轴最大值(留空=自动)' },
rightAxisMin: { type: 'string', default: '', description: '双Y轴右轴最小值(留空=自动)' },
rightAxisMax: { type: 'string', default: '', description: '双Y轴右轴最大值(留空=自动)' },
rowsAsSeries: { type: 'boolean', default: false, description: '数据方向:false=列=系列(第一列是横坐标,每列一个系列);true=行=系列(第一行是横坐标,每行一个系列)' }
},
returns: 'image/png',