前端如何制作可视化报表？

这里介绍2个制作前端可视化报表的js库，一个是echarts，一个是g2，这2个库涵盖了大部分报表的制作，包括折线图、柱状图、饼图、散点图等，使用简单，文档详细，示例丰富，下面我简单介绍一下这2个库：

• echarts：这个是百度开发的一个前端可视化js库，可以流畅的运行在移动和PC设备上，兼容大部分浏览器，提供直观，交互丰富，高度可定制的可视化图标，下面我简单介绍一下这个库的使用：
  

1.下载echart.js到本地，如下，开发的话，建议下载源码版本：

2.下载成功后，我们就可以本地引入echarts.js到html中，测试代码如下，简单绘制一个柱状图，很简单：

很多读者看到漂亮的图表都会问“这个怎么做”，“用什么工具实现”。制作漂亮的可视化一般有这样几个方式：

1. 利用Excel内置的图表做一些常规的统计图。高级复杂的譬如动态图表，图表的筛选展示可以通过写VBA来实现。
2. 通过R、Python一类的数据分析语言，调用图表功能包，呈现可视化的数据，数据分析常用。
3. 借助Echarts、HighCharts、D3.js等开源的可视化插件，嵌入代码，开发成插件包，可视化工程师和前端开发常用。

可视化最实用的场景就是做报表。既然这次的主题是可视化，那小编今天就细细地讲一下酷炫的可视化报表是怎么做的？有哪些基础和高级的可视化图表？代码开发是怎么一回事？大屏又是如何操作？

代表工具FineReport（www.finereport.com），此前介绍过其使用场景和功能。本质是一个通用的报表制作和数据可视化工具，是一个开放的商业报表工具。好比Excel，小到可以存储统计数据、制作各式各样的图表、dashboard，大到制作财务报表、开发进销存系统。大家若不熟悉，可自行和Excel绑定对比。

柱形图、折线图、饼图、气泡图、散点图等能满足常规的数据统计。拿到数据后，先分析要展示几个维度，选用什么样的图表，需要几个图表展示等。

如何选择图表的类型？

这里介绍个报表工具润乾报表V2018，统计图有自带的统计图，第三方统计图（echarts,D3）,还支持自定义统计图形，可实现的页面交互效果也挺丰富如折叠报表，滚动公告的效果，图表联动等。

润乾报表提供了功能强大的交互式报表，可以实现 OLAP 功能。如下图所示，可以实现的功能包括：字段拖拽改名、修改数据显示格式、拖拽形成分组交叉报表、同时展示多个表格统计图、保存拖拽形成的图标、复杂过滤条件可视化配置、添加复杂计算、钻取、旋转等功能。

1.1.1 跨行组运算

润乾报表的交互式报表可以实现占比、累计、比上期等跨行组计算，如下图。

可以用专门做数据可视化分析的工具来做。比如奥威BI工具就能从数据库中取数，在前端以拖拉拽、点击的方式快速制作数据可视化报表。

数据可视化报表截图：