网页的柱形图，折线图，面积图，饼状图的实现

首先引入jquery文件，以及 jquery.jqChart.css 和 jquery.jqChart.min.js 文件。

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/jquery.jqChart.css"/>
<script src="${pageContext.request.contextPath}/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery.jqChart.min.js" type="text/javascript"></script>

其次引入javaScript

<script lang="javascript" type="text/javascript">
        $(document).ready(function () {
     
            var background = {
                type: 'linearGradient',//
                x0: 0,
                y0: 0,
                x1: 0,
                y1: 1,
                colorStops: [{ offset: 0, color: 'white' }, //表格图片背景色渐变之浅
                             { offset: 1, color: '#75cce8' }] // 表格图片背景色渐变之深
            };
        
            $('#jqChart').jqChart({
        
                title: { text: '产品销售走向图' },  // 表格标题
                
                //x轴 y轴 参数设置
                axes : [ { title: { text: '   '},
                            location : 'left',// y轴位置，取值：left,right    
                            //minimum : 0// y轴刻度最小值
                           // maximum : 100,// y轴刻度最大
                           // interval : 10 // 刻度间距
                         },


                      {title: { text: '   '},
                               location : 'bottom',  
                               interval : 1

                      }],
                      
                border: { strokeStyle:'#dbf4fb' }, // 整表格边框色
                background: background, //背景色渐变
                chartAreaBackground: '#dbf4fb',   // 表格背景色
                animation: { duration: 2 },  //柱状图动画增长速度
           
              //图标数据和颜色
                series: [{
                        type: 'column', //设置条形图类型
                        title: '柱状图',	
                        fillStyle: '#fb5410',
                        data: [['第一季度', 50], ['第二季度', 105], ['第三季度', 40],['第四季度',80]]
                        }/* , 
           
                        {
                        type: 'line',
                        title: '折线图',
                        fillStyle: '#418CF0',
                        data: [['第一季度', 12], ['第二季度', 35], ['第三季度', 7], ['第四季度', 24]]
                    },
                    
                    {
                        type: 'splineArea',
                        title: '面积图',
                        fillStyle: '#FCB441',
                        data: [['第一季度', 8], ['第二季度', 44], ['第三季度', 14], ['第四季度', 78]]
                    },
                    
                    {
                        type: 'pie',
                        title: '饼状图',
                        fillStyle: 'green',
                        data: [['第一季度', 8], ['第二季度', 44], ['第三季度', 14], ['第四季度', 78]]
                    } */],
            });
        });
    </script>

body里面写一个div就行了

<div id="jqChart" style="width: 500px; height: 300px;">  </div>