feat: 双Y轴左右轴可独立命名 + 不同轴可设不同图表类型

- 双Y轴:左右两个轴都可单独命名(左轴名称/右轴名称输入框)
- 修复系列类型下拉不生效的 bug(seriesTypeOverrides 只写不读),
  现在每个系列可独立设置柱状/折线,结合轴分配实现'左轴柱状+右轴折线'
- 后端 /api/chart 新增 leftAxisName + seriesTypes 参数(POST/GET 均可)
This commit is contained in:
2026-08-19 13:19:28 +08:00
parent 68e4b72d46
commit 576024af76
5 changed files with 40 additions and 15 deletions
+16 -5
View File
@@ -116,7 +116,9 @@ function buildChartOption(params) {
seriesColors: customColors = null,
dualYAxis = false,
rightAxisSeries = null,
rightAxisName = ''
leftAxisName = '',
rightAxisName = '',
seriesTypes = null
} = params;
const parsedData = parseData(data);
@@ -137,6 +139,11 @@ function buildChartOption(params) {
? (idx % 2 === 0 ? 'bar' : 'line')
: chartType;
// 每系列独立类型覆盖(seriesTypes 数组按系列顺序对应)
if (Array.isArray(seriesTypes) && seriesTypes[idx] && seriesTypes[idx] !== 'auto') {
type = seriesTypes[idx];
}
const seriesItem = {
name: name,
type: type,
@@ -280,7 +287,7 @@ function buildChartOption(params) {
yAxis: dualYAxis ? [
{
type: 'value',
name: '左轴',
name: leftAxisName || '左轴',
nameTextStyle: { color: textColor, fontSize: 11, padding: [0, 0, 0, 4] },
axisLine: { show: false },
axisTick: { show: false },
@@ -402,7 +409,9 @@ app.get('/api/chart', (req, res) => {
splitStyle: req.query.splitStyle || 'solid',
dualYAxis: req.query.dualYAxis === 'true',
rightAxisSeries: req.query.rightAxisSeries ? req.query.rightAxisSeries.split(',') : null,
leftAxisName: req.query.leftAxisName || '',
rightAxisName: req.query.rightAxisName || '',
seriesTypes: req.query.seriesTypes ? req.query.seriesTypes.split(',') : null,
width: parseInt(req.query.width) || 800,
height: parseInt(req.query.height) || 500,
format: req.query.format || 'png',
@@ -919,7 +928,7 @@ app.get('/api/health', (req, res) => {
res.json({
status: 'ok',
service: 'data-chart-tool',
version: '1.11.1',
version: '1.12.0',
endpoints: {
'POST /api/chart': '生成图表图片(JSON body',
'GET /api/chart': '生成图表图片(URL 参数)',
@@ -934,7 +943,7 @@ app.get('/api/health', (req, res) => {
app.get('/api/docs', (req, res) => {
res.json({
name: '数据可视化图表生成器 API',
version: '1.11.1',
version: '1.12.0',
endpoints: [
{
method: 'POST',
@@ -962,7 +971,9 @@ app.get('/api/docs', (req, res) => {
pixelRatio: { type: 'number', default: 2, description: '像素倍率(清晰度)' },
dualYAxis: { type: 'boolean', default: false, description: '是否启用双Y轴(左右量度不同)' },
rightAxisSeries: { type: 'array', default: null, description: '右轴系列名列表(如 ["利润"],指定哪些系列用右轴)' },
rightAxisName: { type: 'string', default: '', description: '轴名称' }
leftAxisName: { type: 'string', default: '', description: '轴名称' },
rightAxisName: { type: 'string', default: '', description: '右轴名称' },
seriesTypes: { type: 'array', default: null, description: '每系列图表类型(如 ["bar","line"],按系列顺序对应,bar/line/auto' }
},
returns: 'image/png',
example: {