汇智动力

售前免费咨询热线: 4 0 0 - 1 8 6 - 0 9 0 5
汇智资讯Huizhi information

当前位置:首页 »前端如何制作可视化报表?

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

日期:2021-08-30 10:57:56 访问量: 来源:

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

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

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

前端如何制作可视化报表

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

前端如何制作可视化报表

保存这个html文件,用浏览器打开,效果如下:

前端如何制作可视化报表

这里只是一个简单的入门实例,更多示例的话,可以看看官网的examples,涵盖了各种报表的制作,包括地图、极坐标图、热力图等,过程非常详细,可以在线编辑运行,这里我就不再赘述了,如下:

前端如何制作可视化报表

g2:这个是阿里开发的一个前端可视化库,简单易学,以数据驱动,具有高度的扩展性和易用性,用户无需关注底层的实现细节,几条语句便可快速构建出统计报表,下面我简单介绍一下这个库的使用:

1.测试代码如下,这里可以在线引入g2.js库,也可以下载g2.js到本地,再引入,这里简单绘制了一个柱状图:

前端如何制作可视化报表

浏览器效果如下:

前端如何制作可视化报表

更多示例,可以查看官网教程,介绍的很详细,各种组件都有介绍,代码也很详尽,点击进去,便可查看源码和运行效果图:

前端如何制作可视化报表

至此,我们就完成了echarts和g2这2个可视化js库的简单使用。总的来说,这两个库都非常好使用,简单易学,容易上手,提供了非常丰富的教程供开发者使用,当然,除了这2个库,还有D3,Highcharts等可视化库

相关阅读Reading

全国热线:400-186-0905

总部热线:028-6547-1147

周一至周日9:30-24:00

我要咨询
汇智动力微信

汇智动力微信公众号