echarts仪表盘和模拟进度条

<script type="text/javascript">
           var officeurl="${ctx}/budgetall/budgetAll/qiantai?bumen=${officename}";
           var url="${ctx}/reimburse/budgetReimburse/shouye";
           function mainall(officeid){
               officeurl="${ctx}/budgetall/budgetAll/qiantai?bumen="+officeid;
               url="${ctx}/reimburse/budgetReimburse/shouye?bumen="+officeid;
               getChartData();
               getdata();
           }
        
        
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            var option = {
//             title: {
//                 text: '预算指标', //标题文本内容
//             },
            series: [{
                    name: '预算指标',
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    radius : 150,  //仪表盘的半径
                    center : [ '20%','70%' ],//圆心坐标，支持绝对值（px）和百分比
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, 'lightgreen'],[0.4, 'orange'],[1, '#ff4500']],
                            width: 80
                        }
                    },   
                    splitLine: { //分割线样式
                        length: 80
                    },
                    detail : {
                        offsetCenter: [0, 30],       // x, y，单位px
                        formatter:'{value}%',
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontSize : 30
                    }
                },
                data: [{value: 0}]
                    },
                    {
                     name: '预算指标',
                     type: 'gauge',
                     startAngle: 180,
                     endAngle: 0,
                     radius : 150,  //仪表盘的半径
                     center : [ '50%','70%' ],//圆心坐标，支持绝对值（px）和百分比
                     axisLine : { // 坐标轴线  
                         lineStyle : { // 属性lineStyle控制线条样式  
                             color: [[0.2, 'lightgreen'],[0.5, 'orange'],[1, '#ff4500']],
                                width: 80
                         }  
                     },
                     splitLine: {           // 分隔线
                         show: true,        // 默认显示，属性show控制显示与否
                         length :80,         // 属性length控制线长
                         lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                             color: '#eee',
                             width: 2,
                             type: 'solid'
                         }
                     },
                       detail : {
                            offsetCenter: [0, 30],       // x, y，单位px
                            formatter:'{value}%',
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontSize : 30
                       }
                   },
                     data: [{value: 0}]
                         },
                         {
                             name: '预算指标',
                             type: 'gauge',
                             startAngle: 180,
                             endAngle: 0,
                             radius : 150,  //仪表盘的半径
                             center : [ '80%','70%' ],//圆心坐标，支持绝对值（px）和百分比
                             axisLine : { // 坐标轴线  
                                 lineStyle : { // 属性lineStyle控制线条样式  
                                     color: [[0.2, 'lightgreen'],[0.6, 'orange'],[1, '#ff4500']],
                                     width: 80
                                 }  
                             },
                             splitLine: { //分割线样式
                                 length: 80
                             },
                            detail : {
                               offsetCenter: [0, 30],       // x, y，单位px
                               formatter:'{value}%',
                               textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                   fontSize : 30
                               }
                           },
                             data: [{value: 0}]
                         },
                     ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            getChartData();
//              setInterval(function(){//把option.series[0].data[0].value的值使用random()方法获取一个随机数
//                 option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
//                 myChart.setOption(option, true);
//             }, 2000);
            
        function getChartData() {            
            //获得图表的options对象  
            var options = myChart.getOption();  
            //通过Ajax获取数据  
            $.ajax({  
                type : "post",  
                async : false, //同步执行  
                url : url,  
                dataType : "json", //返回数据形式为json  
                success : function(result) {  
                    var result=eval(result);
                    console.log(result)
                        $("#span1").html( result.list1[0].reimburseCode);
                        $("#span2").html( result.list2[0].reimburseCode);
                        $("#span3").html( result.list3[0].reimburseCode);
                        $("#span11").html( result.list1[0].reimburseNum);
                        $("#span22").html( result.list2[0].reimburseNum);
                        $("#span33").html( result.list3[0].reimburseNum);
                        $("#span111").html( result.list1[0].halfYear+"%");
                        $("#span222").html( result.list2[0].halfYear+"%");
                        $("#span333").html( result.list3[0].halfYear+"%");
                       options.series[0].data = result.list1[0].halfYear;
                       options.series[1].data = result.list2[0].halfYear;
                       options.series[2].data = result.list3[0].halfYear;
                       myChart.hideLoading();  
                       myChart.setOption(options);  
                },  
                error : function(errorMsg) {  
                    alert("不好意思，大爷，图表请求数据失败啦!");  
                    myChart.hideLoading();  
                }  
            });  
        }  
        var keChart = echarts.init(document.getElementById('kemu'));
        keChart.title = '堆叠条形图';

          var kmoption = {
              tooltip : {
                  trigger: 'axis',
                  axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                      type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
              legend: {
                  show:false,
                  data: ['预算剩余金额', '已报销金额','总金额']
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              xAxis:  {
                  type: 'value'
              },
              yAxis: {
                  type: 'category',
                  /* data: ['科目一','科目二','科目三','科目四','科目五','科目六'] */
                  data: []
              },
              series: [
                  {
                      name: '预算剩余金额',
                      type: 'bar',
                      stack: '总量',
                      /* color:'white', */
                      label: {
                          normal: {
                              show: true,
                              position: 'insideRight'
                          }
                      },
                      data: []
                  },
                  {
                      name: '已报销金额',
                      type: 'bar',
                      stack: '总量',
                      label: {
                          normal: {
                              show: true,
                              position: 'insideRight'
                          }
                      },
                      data: []
                  }
            /*     {
                      name: '总金额',
                      type: 'bar',
                      stack: '总量',
                      show:false,
                      label: {
                          show:false,
                          normal: {
                              show:false,
                              position: 'insideRight'
                          }
                      },
                      data: []
                  } */
              ]
          };
           keChart.setOption(kmoption);
          getdata();
          
          
          function getdata() {    
                //获得图表的options对象  
               /*  var options = myChart.getOption();  */
              
               var options1 = kmoption;
                for(var k=0;k<options1.yAxis.data.length;k++){
                options1.yAxis.data=[];
                   options1.series[0].data=[];
                   options1.series[1].data=[];
           /*         options1.series[2].data=[]; */
               }
                //通过Ajax获取数据  
                $.ajax({  
                    type : "POST",  
                    async : false, //同步执行   
                    url : officeurl,  
                    dataType : "json", //返回数据形式为json  
                    success : function(data) {
                        for(i in data)
                        {
                            for(var j=0;j<data[i].length;j++){
                                options1.yAxis.data[j]=data[i][j].acname+'\n总金额:'+data[i][j].zjout;
                                options1.series[0].data[j]=data[i][j].zjout-data[i][j].reimbursableNum;
                                options1.series[1].data[j]=data[i][j].reimbursableNum;
                                /* options1.series[2].data[j]=data[i][j].outresult; */
                                /* options1.series[2].show=false; */
                            }
                        }
                        keChart.setOption(options1, true);
                    },  
                    error : function(errorMsg) {  
                        alert("失败");  
                        myChart.hideLoading();  
                    }  
                });  
            }  
        </script>