By

  阅读数： 次

前言：

本文章将使用 amcharts.js 实现立体柱状图，以下代码中的js库是直接引入网络中的js文件，所以代码拷贝下来是可以直接运行的。

效果图：

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>立体柱状图</title>
		
		<!-- 立体柱状图 -->
		<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
	    <script src="https://www.amcharts.com/lib/3/serial.js"></script>
		
    </head>
	<body>
	     <div id="car3" style="text-align:center;width:440px;height:180px;">
			 <script type="text/javascript">      
				 var chartData = [{ country: "订单未确定", visits: 50 , "color": "#067ADD"},
					 { country: "订单已确定", visits: 166 , "color": "#FA0606"},
					 { country: "订单已处理", visits: 26  , "color": "#14EF06"},
					 { country: "订单完成", visits: 80 , "color": "#F802BC"},
					 { country: "订单已发货", visits: 56 , "color": "#0FFBF9"},
				   ];
	 
				 var chart = new AmCharts.AmSerialChart();
				 chart.dataProvider = chartData;
				 chart.categoryField = "country";//获取"chartData"中的文本内容
				 chart.color = "#4C4CFD"; //标题颜色（x、y轴的字体颜色）
				 chart.startDuration = 2;  //动画特效 延迟时间 秒  
				 chart.columnWidth = 0.4; //柱状图宽度
				 chart.depth3D = 8;//3D厚度
				 chart.angle = 30;
				 chart.depth3D = 15;//控制列的深度和角度
				 
		
				 
				 var categoryAxis = chart.categoryAxis;
				 categoryAxis.gridColor = "#067ADD"; //网格线颜色
				 categoryAxis.axisColor = "#067ADD";  //横坐标轴颜色
			  
				 
				 var valueAxis = new AmCharts.ValueAxis();  //纵坐标轴
				 valueAxis.axisColor = "#067ADD";  //纵坐标轴轴线的颜色
				 chart.addValueAxis(valueAxis);
				 
				 
				 var graph = new AmCharts.AmGraph();
				 graph.valueField = "visits" ; //获取"chartData"中的数量
				 graph.colorField = "color";//获取"chartData"中的配置颜色
				 //graph.lineColor = "#067ADD";//柱状图的颜色,这里是全部设置成为统一 #067ADD 颜色
				 //graph.topRadius = 1;   //设置为椭圆柱体,默认是长方形柱体
				 graph.lineAlpha = 0.1;
				 graph.fillAlphas = 0.85;
				 graph.type = "column";//柱形，也可是设置为 line 折线图等
				 chart.addGraph(graph);
									 
				 
				 graph.fillAlphas = 1;//填充柱形图的颜色
				 graph.balloonText = "<b>[[category]]: [[value]] 单</b>";//鼠标悬浮时展示数据的格式
								 
				 chart.write('car3'); //将js写入到div容器中
			 </script>
		  </div>
				
	</body>
</html>

❤不要忘记留下你学习的足迹 [点赞 + 收藏 + 评论]嘿嘿ヾ

一切看文章不点赞都是“耍流氓”，嘿嘿ヾ(◍°∇°◍)ﾉﾞ！开个玩笑，动一动你的小手，点赞就完事了，你每个人出一份力量(点赞 + 评论)就会让更多的学习者加入进来！非常感谢！￣ω￣=