echarts3 折线图、柱状图

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="e" uri="/firefly-theme-taglib" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
//TODO 引入jquery
<script src="${pageContext.request.contextPath}/system/script/echarts3/echarts.min.js"></script>
<style type="text/css">
    #main{margin:0 auto;border:0px solid #000;width:700px;height:500px}
</style>
<script type="text/javascript">
$(function() {
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    myChart.setOption ({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            
            legend: {
                data:['批准经费','报销经费','剩余经费']
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                   {
                       type : 'value',
                       min: 0,
                       name: '（万元）',
                   }
            ],
            series: [
                {
                    name:'批准经费',
                    type:'bar',
                    data:[]
                },
                {
                    name:'报销经费',
                    type:'bar',
                    data:[]
                },
                {
                    name:'剩余经费',
                    type:'bar',
                    data:[]
                }
            ]
    });
    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
    var names=[];    //预算科目类别数组（实际用来盛放X轴坐标值）
    var numsOne=[];    //批准经费数组（实际用来盛放Y坐标值）
    var numsTwo=[];    //报销经费数组（实际用来盛放Y坐标值）
    var numsThree=[];  //剩余经费数组（实际用来盛放Y坐标值）
    $.ajax({
        type : "post",
        async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "talentProjectAction!do_selectDate.action",  //请求发送到action处
        data : {},    //传送请求数据
        dataType : "json",        //返回数据形式为json
        success : function(data) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (data) {
                for(var i=0;i<data.length;i++){       
                    names.push(data[i].name);    //挨个取出类别并填入类别数组
                    numsOne.push(data[i].approvalFee);    //挨个取出类别并填入类别数组
                    numsTwo.push(data[i].expendedFee);    //挨个取出类别并填入类别数组
                    numsThree.push(data[i].surplusFee);    //挨个取出类别并填入类别数组
                }                
                   myChart.hideLoading();    //隐藏加载动画
                   myChart.setOption({        //加载数据图表
                       xAxis: [
                               {
                                   type: 'category',
                                   data: names,
                                   axisPointer: {
                                       type: 'shadow'
                                   }
                               }
                           ],
                        series: [
                              {
                                  name:'批准经费',
                                  type:'bar',
                                  data: numsOne
                              },
                              {
                                  name:'报销经费',
                                  type:'bar',
                                  data: numsTwo
                              },
                              {
                                  name:'剩余经费',
                                  type:'bar',
                                  data: numsThree
                              }
                          ]
                   });
            }
       },
      error : function(errorMsg) {
            //请求失败时执行该函数
        ep.alert("图表请求数据失败!");
        myChart.hideLoading();
      }
   })
});
</script>
</head>
<body class="ep-nopadding-body popOperate">
    <div id="main"></div>
</body>
</html>
echarts3 折线图、柱状图

猜你喜欢
