开发编码 本地计算 开箱即用 内置示例 不留痕迹

折线图生成器

每行输入「类目,数值」（类目可省略），点「计算」画出带数据点的折线图；自动给出点数、最大/最小、首末变化量与变化率、升降趋势。

折线图用来观察数值随时间的变化趋势，适合日活、销量、体重、温度这类有先后顺序的数据。与柱状图的区别在于：柱状图强调各类目谁大谁小，折线图强调同一序列怎么走 —— 只有带先后顺序的数据才适合连线。

工具同时给出首末变化量、变化率与升降趋势判定（变化率绝对值小于 0.1% 记为持平）；首点为 0 时无法计算相对变化率，改按末点正负判断。需要注意趋势判定只描述首末两点，中间波动要靠「较前一点」列逐段看，不能只看结论。

—
—
—
—
—

使用步骤

  1. 每行填「类目,数值」；类目可省略（自动编号），按输入顺序从左到右连线。
  2. 点「计算」出图，数据点会画在折线上便于定位。
  3. 看统计卡的趋势与首末变化，再对照「较前一点」列检查中间波动。
  4. 确认后右键另存图片，或截取图表区域放进周报。

计算原理与示例

数据怎么填

每行一条数据，格式「类目,数值」；类目可省略（自动按 1、2、3…编号），最多 50 行，按输入顺序从左到右连线。

趋势怎么判

「首末变化」= 末点 − 首点，括号内是相对首点的变化率；趋势按变化率判定：|变化率| < 0.1% 记「持平」，否则升/降；首点为 0 时按末点正负判。

支持负值吗

y 轴范围自动适配：有负值时下限取负的整数刻度，刻度同样取「1/2/5×10ⁿ」档位。

代码示例

JavaScript 用 ECharts 画折线图 

const chart = echarts.init(document.getElementById('chart'));

chart.setOption({
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三'] },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    smooth: false,
    symbolSize: 6,   // 数据点可见，便于定位异常值
    data: [820, 932, 901],
  }],
});

Shell 命令行算变化量与变化率 

# 逐行打印较前一行的变化量
awk -F, 'NR==1{prev=$2; print $0 ",变化"; next} {printf "%s,%+d\n", $0, $2-prev; prev=$2}' data.csv

# 首末变化率
awk -F, 'NR==1{first=$2} {last=$2} END{printf "首末变化率 %.2f%%\n", (last-first)/first*100}' data.csv

常见问题

适合什么数据？

按时间或顺序排列的序列，如月度销量、体重记录、温度变化；类目间无顺序关系的对比请用柱状图。

折线图支持负值吗？

支持。y 轴下限会自动下探到负的整数刻度（如最低 -15 → 下限 -20），正负都能画。

「持平」的判定标准是什么？

首末变化率的绝对值小于 0.1% 记为持平；这是为了避免浮点尾差把微小波动判成趋势。

首点是 0 时变化率怎么算？

变化率除以 0 无意义，此时只给变化量，趋势按末点正负判定：正数记「上升」，负数记「下降」，0 记「持平」。

画折线图需要联网吗？

不会。解析、统计与绘制全部在浏览器本地完成，断网可用。

「较前一点」列是什么？

明细表里每点减去前一点的差值，正数带 + 号；第一点没有前点，显示「—」。

能画多条线吗？

当前版本一次画一条。多组数据可分别生成多张图对比，或把差值算好再画。

延伸阅读

来自本站原创文章，讲清这个工具背后的算法与口径。