feat: 数据标签颜色默认同系列+可自定义;Y轴最小/最大值手动指定 v1.20.0
- 数据标签颜色:默认自动取系列颜色(柱状/折线色),也可选自定义颜色手动指定 - Y轴范围:默认自动计算,可手动指定最小/最大值;双Y轴时左/右轴可分别指定 - 主图 + 多图合并 + 服务端API 三处统一;收藏保存/恢复含两项设置 - API 新增参数 labelColorMode/labelColor, yAxisMin/yAxisMax, leftAxisMin/Max, rightAxisMin/Max
This commit is contained in:
@@ -152,6 +152,13 @@ function applySeriesStyle(seriesItem, type, color, style) {
|
||||
}
|
||||
}
|
||||
|
||||
// Y轴 min/max:空值/非法返回 undefined(ECharts 自动)
|
||||
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',
|
||||
|
||||
Reference in New Issue
Block a user