后台要加一张近 30 天销量的折线图，周五就要给领导看。用 highcharts 做这种常规报表，从引脚本到出图，半小时够了。

最小可用示例

页面放一个带 id 的 div 容器，引入 highcharts 脚本，然后初始化：

Highcharts.chart('container', { title: { text: '近30天销量' }, xAxis: { categories: ['1日','2日','3日'] }, series: [{ name: '销量', data: [120, 98, 156] }] });

结构就三块：title 是标题，xAxis 是横轴数据，series 是每条曲线的名字和数值。改配置刷新页面就能看到效果。

选型时和 echarts 的差别

highcharts 走商业授权，公司商用一般要买，个人和非商业用途免费，这点和 echarts 不一样。它是老牌库，早期以浏览器兼容性出名，老项目里常见。echarts 免费开源，中文资料多，国内新项目用得更多。两个都能画折线、柱状、饼图，普通报表差异不大，选型先看授权要求和自己团队熟悉哪套。

常见小问题速查

  • 图表不显示：九成是容器还没渲染就初始化了，或者 id 写错，先确认容器存在再建图。
  • 数据更新了图不动：要调 series 的 setData 或 update 才会重绘，直接改数组没用。
  • 横轴标签挤成一团：让它隔项显示，或者旋转角度，数据点多时还能配滚动条。
  • 提示文字是英文：改 tooltip 和按钮文案，或者引官方的语言包文件。

导出和汇报

图表右上角一般带导出菜单，能存成 PNG 这类图片，做周报截图够用。要放进文档的场景，用导出功能出图再插入，比截屏清晰。

实际选型一句：公司商用又不想买授权，先看 echarts；项目已经用着 highcharts 的，没必要为一个图迁移。