import { col } from '../csv.js'; import { PALETTE, FONT, axisCommon, categoryAxis, titleStyle, legendStyle, lineSeries, footnote, watermarks, LAYOUT, } from '../theme.js'; /** * 图 4:营收到利润的增速对比 —— 四条线看"利润弹性" * 净利增速跑在最上面、成本增速在最下面,中间夹着毛利和营收 */ export function growthChart(rows, { width, height }) { const pct = (p) => `${p.value}%`; return { backgroundColor: '#fff', title: { ...titleStyle, text: '营收到利润的增速对比(半年与年度)' }, legend: { ...legendStyle, top: LAYOUT.legendTop, itemGap: 34, data: ['非国际归母净利', '毛利润', '营业收入', '营业成本'].map(name => ({ name, icon: 'emptyCircle', // 全部折线图 })), }, grid: { left: 84, right: 56, top: LAYOUT.gridTop, bottom: 64 }, tooltip: { trigger: 'axis', valueFormatter: (v) => `${v}%`, textStyle: { fontFamily: FONT }, }, xAxis: { ...categoryAxis, data: col(rows, 'period') }, yAxis: { ...axisCommon, type: 'value', name: '同比增速(%)', nameLocation: 'middle', nameGap: 58, nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT }, min: -45, max: 400, interval: 100, axisLabel: { ...axisCommon.axisLabel, formatter: '{value}%' }, }, series: [ lineSeries({ name: '非国际归母净利', data: col(rows, 'non_gaap_net_profit'), color: PALETTE.red, labelPosition: 'top', formatter: pct, width: 3.5, }), lineSeries({ name: '毛利润', data: col(rows, 'gross_profit'), color: PALETTE.coral, labelPosition: 'top', formatter: pct, }), lineSeries({ name: '营业收入', data: col(rows, 'revenue'), color: PALETTE.navy, labelPosition: 'bottom', formatter: pct, }), lineSeries({ name: '营业成本', data: col(rows, 'cost'), color: PALETTE.sage, labelPosition: 'top', formatter: pct, }), ], graphic: [ ...watermarks(width, height), footnote('示例数据 | @思考的Joey'), ], }; }