最近公司项目需要做各种图标展示，用了Echarts的条形图和柱状图，但是老板还是觉得不够生动，看来时候祭出大招了

由此衍生在空余时间写下了此篇博客，首先还是看效果图:

注意，此图中数据并非真实数据，只是为测试代码使用的生成的随机数值

展示网站:展示网址

 

 

首先本文代码基于:https://github.com/Jannchie/Historical-ranking-data-visualization-based-on-d3.js

项目二次修改而成，原项目需要在EXCEL的CSV文件中编辑生成好数据并点击上传后才能展示效果，我就在想既然能读取EXCEL里的数据拿来展示为何不能够用AJAX请求API来得到数据动态的生成数据展示呐

改造开始开整:

1.首先去除上传框

原项目中SVG这个元素设置的是是固定的高度和宽度，但是实际项目中由于各个电脑分辨率不同的问题所以这里，

我用JQ读取页面能够看到的高度和宽度赋值给SVG元素

2.设置完成后，我们去除 visual.js里面input上传后读取EXCEL的代码

 

3.最后一步,前台通过AJAX访问接口，读取数据并渲染

data.json内数据如下所示:

{"code":0,"msg":null,"count":0,"data":[{"type":"湖北","name":"武汉市","value":"315","date":"1月26日"},{"type":"湖北","name":"黄石市","value":"33","date":"1月26日"},{"type":"湖北","name":"十堰市","value":"23","date":"1月26日"},{"type":"湖北","name":"襄阳市","value":"61","date":"1月26日"},{"type":"湖北","name":"宜昌市","value":"12","date":"1月26日"},{"type":"湖北","name":"荆州市","value":"30","date":"1月26日"},{"type":"湖北","name":"荆门市","value":"28","date":"1月26日"},{"type":"湖北","name":"鄂州市","value":"27","date":"1月26日"},{"type":"湖北","name":"孝感市","value":"101","date":"1月26日"},{"type":"湖北","name":"黄冈市","value":"111","date":"1月26日"},{"type":"湖北","name":"咸宁市","value":"21","date":"1月26日"},{"type":"湖北","name":"随州市","value":"46","date":"1月26日"},{"type":"湖北","name":"恩施州","value":"13","date":"1月26日"},{"type":"湖北","name":"仙桃市","value":"5","date":"1月26日"},{"type":"湖北","name":"天门市","value":"11","date":"1月26日"},{"type":"湖北","name":"武汉市","value":"273","date":"1月27日"},{"type":"湖北","name":"黄石市","value":"48","date":"1月27日"},{"type":"湖北","name":"十堰市","value":"86","date":"1月27日"},{"type":"湖北","name":"襄阳市","value":"24","date":"1月27日"},{"type":"湖北","name":"宜昌市","value":"242","date":"1月27日"},{"type":"湖北","name":"荆州市","value":"415","date":"1月27日"},{"type":"湖北","name":"荆门市","value":"205","date":"1月27日"},{"type":"湖北","name":"鄂州市","value":"99","date":"1月27日"},{"type":"湖北","name":"孝感市","value":"88","date":"1月27日"},{"type":"湖北","name":"黄冈市","value":"342","date":"1月27日"},{"type":"湖北","name":"咸宁市","value":"408","date":"1月27日"},{"type":"湖北","name":"随州市","value":"286","date":"1月27日"},{"type":"湖北","name":"恩施州","value":"110","date":"1月27日"},{"type":"湖北","name":"仙桃市","value":"14","date":"1月27日"},{"type":"湖北","name":"天门市","value":"385","date":"1月27日"},{"type":"湖北","name":"武汉市","value":"9","date":"1月28日"},{"type":"湖北","name":"黄石市","value":"183","date":"1月28日"},{"type":"湖北","name":"十堰市","value":"459","date":"1月28日"},{"type":"湖北","name":"襄阳市","value":"500","date":"1月28日"},{"type":"湖北","name":"宜昌市","value":"8","date":"1月28日"},{"type":"湖北","name":"荆州市","value":"136","date":"1月28日"},{"type":"湖北","name":"荆门市","value":"331","date":"1月28日"},{"type":"湖北","name":"鄂州市","value":"430","date":"1月28日"},{"type":"湖北","name":"孝感市","value":"491","date":"1月28日"},{"type":"湖北","name":"黄冈市","value":"264","date":"1月28日"},{"type":"湖北","name":"咸宁市","value":"34","date":"1月28日"},{"type":"湖北","name":"随州市","value":"495","date":"1月28日"},{"type":"湖北","name":"恩施州","value":"117","date":"1月28日"},{"type":"湖北","name":"仙桃市","value":"166","date":"1月28日"},{"type":"湖北","name":"天门市","value":"362","date":"1月28日"},{"type":"湖北","name":"武汉市","value":"198","date":"1月29日"},{"type":"湖北","name":"黄石市","value":"343","date":"1月29日"},{"type":"湖北","name":"十堰市","value":"280","date":"1月29日"},{"type":"湖北","name":"襄阳市","value":"495","date":"1月29日"},{"type":"湖北","name":"宜昌市","value":"401","date":"1月29日"},{"type":"湖北","name":"荆州市","value":"490","date":"1月29日"},{"type":"湖北","name":"荆门市","value":"249","date":"1月29日"},{"type":"湖北","name":"鄂州市","value":"460","date":"1月29日"},{"type":"湖北","name":"孝感市","value":"196","date":"1月29日"},{"type":"湖北","name":"黄冈市","value":"64","date":"1月29日"},{"type":"湖北","name":"咸宁市","value":"253","date":"1月29日"},{"type":"湖北","name":"随州市","value":"139","date":"1月29日"},{"type":"湖北","name":"恩施州","value":"173","date":"1月29日"},{"type":"湖北","name":"仙桃市","value":"446","date":"1月29日"},{"type":"湖北","name":"天门市","value":"159","date":"1月29日"},{"type":"湖北","name":"武汉市","value":"268","date":"1月30日"},{"type":"湖北","name":"黄石市","value":"246","date":"1月30日"},{"type":"湖北","name":"十堰市","value":"420","date":"1月30日"},{"type":"湖北","name":"襄阳市","value":"36","date":"1月30日"},{"type":"湖北","name":"宜昌市","value":"171","date":"1月30日"},{"type":"湖北","name":"荆州市","value":"299","date":"1月30日"},{"type":"湖北","name":"荆门市","value":"125","date":"1月30日"},{"type":"湖北","name":"鄂州市","value":"389","date":"1月30日"},{"type":"湖北","name":"孝感市","value":"241","date":"1月30日"},{"type":"湖北","name":"黄冈市","value":"48","date":"1月30日"},{"type":"湖北","name":"咸宁市","value":"64","date":"1月30日"},{"type":"湖北","name":"随州市","value":"476","date":"1月30日"},{"type":"湖北","name":"恩施州","value":"101","date":"1月30日"},{"type":"湖北","name":"仙桃市","value":"347","date":"1月30日"},{"type":"湖北","name":"天门市","value":"167","date":"1月30日"},{"type":"湖北","name":"武汉市","value":"375","date":"1月31日"},{"type":"湖北","name":"黄石市","value":"342","date":"1月31日"},{"type":"湖北","name":"十堰市","value":"422","date":"1月31日"},{"type":"湖北","name":"襄阳市","value":"135","date":"1月31日"},{"type":"湖北","name":"宜昌市","value":"215","date":"1月31日"},{"type":"湖北","name":"荆州市","value":"227","date":"1月31日"},{"type":"湖北","name":"荆门市","value":"266","date":"1月31日"},{"type":"湖北","name":"鄂州市","value":"461","date":"1月31日"},{"type":"湖北","name":"孝感市","value":"281","date":"1月31日"},{"type":"湖北","name":"黄冈市","value":"218","date":"1月31日"},{"type":"湖北","name":"咸宁市","value":"47","date":"1月31日"},{"type":"湖北","name":"随州市","value":"324","date":"1月31日"},{"type":"湖北","name":"恩施州","value":"72","date":"1月31日"},{"type":"湖北","name":"仙桃市","value":"314","date":"1月31日"},{"type":"湖北","name":"天门市","value":"293","date":"1月31日"},{"type":"湖北","name":"武汉市","value":"143","date":"2月1日"},{"type":"湖北","name":"黄石市","value":"265","date":"2月1日"},{"type":"湖北","name":"十堰市","value":"48","date":"2月1日"},{"type":"湖北","name":"襄阳市","value":"212","date":"2月1日"},{"type":"湖北","name":"宜昌市","value":"165","date":"2月1日"},{"type":"湖北","name":"荆州市","value":"68","date":"2月1日"},{"type":"湖北","name":"荆门市","value":"370","date":"2月1日"},{"type":"湖北","name":"鄂州市","value":"308","date":"2月1日"},{"type":"湖北","name":"孝感市","value":"253","date":"2月1日"},{"type":"湖北","name":"黄冈市","value":"106","date":"2月1日"},{"type":"湖北","name":"咸宁市","value":"83","date":"2月1日"},{"type":"湖北","name":"随州市","value":"348","date":"2月1日"},{"type":"湖北","name":"恩施州","value":"381","date":"2月1日"},{"type":"湖北","name":"仙桃市","value":"279","date":"2月1日"},{"type":"湖北","name":"天门市","value":"195","date":"2月1日"}]
}

最后访问数据就能得到动态的条形图了

最后源码地址:https://github.com/jock-x/AjaxBarGraph.git