最近公司项目需要做各种图标展示，用了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日"
}
]
}最后访问数据就能得到动态的条形图了
