现在做数据、做运营、做内容的人，几乎都绕不开图表。写周报要放趋势图，做后台要上数据看板，发一期内容想配个对比图，临时去找在线工具，导出来还带水印，改一次就得重做一次。这次整理的是 3 款主流前端图表库，直接在自己页面里生成图表，全部开源免费可商用，一次配置好后面反复用，改样式也不用求人，不用再看第三方工具的脸色。
三款库各自的强项
Chart.js 轻量，压缩后大概 200KB，折线、柱状、饼图、雷达、气泡这些常规图表都有，配置简单，新手看半小时文档就能上手。ECharts 是百度开源的，中文文档最全，图表类型和交互效果最丰富，官方还自带 37 套主题，国内的运营大屏和数据看板基本都在用它。Plotly.js 偏科学计算方向，三维图、热力图、箱线图、金融 K 线这类专业图表支持得好，做数据分析的人会更顺手。
引入到页面只要两步
用法没什么门槛。第一步，把库里对应的 js 文件引入页面，线上用压缩版体积小、加载快，本地调试用未压缩版方便看代码。第二步，在页面上放一个容器元素，然后按各库的文档写几行配置，图表就出来了。数据可以用写死的，也可以从接口拉，更新数据只要改配置里那一段，图表会自己重画，不需要把整个页面重新搭一遍，这点对经常做报表的人很友好。
怎么选、怎么搭着用
如果只是常规图表、想快速出效果，选 Chart.js 最省时间；如果站点是中文环境，要图表类型多、交互丰富、还想做大屏，ECharts 更合适；如果要做三维图、热力图这类偏科学的可视化，Plotly.js 是首选。三款库互不冲突，一个项目里混着用没问题，比如主看板用 ECharts，某个特殊图表用 Plotly，各取所长，谁也不用迁就谁。
配色和中文这两件事
图表好不好看，八成看配色。ECharts 自带的 37 套主题可以直接套用，改一行配置整体风格就换了，省得自己一个个调颜色。另外要提醒一句，中文标签如果显示成方框，通常是字体没配好，在配置里指定一个中文字体家族即可，三款库的解决办法都差不多。截图发出去之前建议把图例和坐标轴的文字调大一点，手机上看图，字太小等于白做。
资源在文末付费区下载，三款库分目录放好，压缩版和未压缩版都有，配套的许可文件和说明也一并附上了。ECharts 那 37 套官方主题也一起打包，换个主题就能改整体配色，省得自己从头调。授权都写得明明白白，可以放心用在自己的项目和商用场景里。拿到之后建议先挑一款出个小图试试手感，觉得合适再往项目里铺，别一上来就动大工程。
暂无评论内容