1.需要引用封装好的amcharts.js文件和css样式表；
2.在页面上创建一个div容器存放折线图；
3.引用一个自定义主题js
注意：
在页面的head部分我们需要添加amCharts JavaScript库文件的引用。由于V3 amCharts库被拆分成了几个文件，为了节省几个kb空间—你需要添加amchart.js主文件，并根据你的需求来决定添加一个或者多个图表文件。柱形图属于序列图的一种，因此我们包含这两个js文件：
<script src="amcharts/amcharts.js" type="text/javascript"></script> <script src="amcharts/serial.js" type="text/javascript"></script>添加顺序很重要，amcharts.js应该放在最前面。
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2<html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <title>amCharts examples</title> 7 <link rel="stylesheet" href="style.css" type="text/css"> 8 <script src="../amcharts/amcharts.js" type="text/javascript"></script> 9 <script src="../amcharts/serial.js" type="text/javascript"></script> 10 <script src="../amcharts/themes/dark.js" type="text/javascript"></script>//引入主题js 11 12 <script type="text/javascript"> 13 AmCharts.makeChart("chartdiv", { 14 type: "serial", 15 theme: "dark", //主题 16 dataProvider: [{ 17 "year": 2018, 18 "income": 23.5, 19 "expenses": 18.1 20 }, { 21 "year": 2017, 22 "income": 26.2, 23 "expenses": 22.8 24 }, { 25 "year": 2016, 26 "income": 30.1, 27 "expenses": 23.9 28 }, { 29 "year": 2015, 30 "income": 29.5, 31 "expenses": 25.1 32 }, { 33 "year": 2014, 34 "income": 24.6, 35 "expenses": 25 36 }], 37 categoryField: "year", // 指定X轴由年字段决定 38 startDuration: 1, //填充后的柱状图动态渲染时间，时间越长动画效果越慢 39 rotate: true,
参数rotate解释：
rotate:true
rotate:false
1// 图表线（相当于X轴） 2 3 categoryAxis: { 4 gridPosition: "start" 5 }, 6 valueAxes: [{ 7 position: "top", 8 title: "空气影响变化", //统计表标题 9 minorGridEnabled: true 10 }], 11 12 //折线图 13 graphs: [{ 14 type: "column", 15 title: "Income", 16 valueField: "income", //图例说明 17 fillAlphas:1, //填充内容透明度
柱状图的fillAlphas参数说明：
fillAlphas:0
fillAlphas:0.5
1balloonText: "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>"}, 2 3{ 4 type: "line", 5 title: "Expenses", 6 valueField: "expenses", //图例说明 7 lineThickness: 2, //折线的厚度 8 9 fillAlphas: 0, //折线线条覆盖面的透明度
线条的 fillAlphas说明：
fillAlphas: 0
fillAlphas: 0.5
1 bullet: "square", //着重表示的符号 圆形：round 2 balloonText: "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>" 3 }], 4 5 //图例 6 legend: { 7 useGraphSettings: true 8 }, 9 10 creditsPosition:"top-right" 11 12 }); 13 </script> 14 </head> 15 16 <body style="background-color:#282828;"> 17 <div id="chartdiv" style="width: 500px; height: 600px;"></div> 18 </body> 19 20</html>