Browse Source

图表更新,百度的图表有更新,这次更换为载入本地JS,还有部分调用方式更改,部分图表增加时间轴

Chente 9 years ago
parent
commit
f648f0c3ff

+ 2 - 1
r-project-section-detail.html

@@ -242,7 +242,6 @@
                 myChart.setOption(option); 
                 //4 标段期数计量进度//
                 //5 期数组成//
-                // 基于准备好的dom,初始化echarts图表
                 var myChart = echarts.init(document.getElementById('chartContainer5'));   
                 var option = {
                   color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
@@ -253,6 +252,7 @@
                       text: '期数计量组成',
                       x:'left'
                   },
+
                   tooltip : {
                       trigger: 'item',
                       formatter: "{a} <br/>{b}:{c} 元<br>占标段:{d} %"
@@ -262,6 +262,7 @@
                       {
                           name:'标段计量分布',
                           type:'pie',
+                          roseType: 'angle',
                           radius : '40%',
                           center: ['45%', 155],
                           data:[

+ 1 - 0
s-project-section-detail.html

@@ -258,6 +258,7 @@
                       {
                           name:'标段计量分布',
                           type:'pie',
+                          roseType: 'angle',
                           radius : '40%',
                           center: ['45%', 155],
                           data:[

+ 42 - 71
s-project-section.html

@@ -67,49 +67,44 @@
           </div>
         </div>
         <!--图表5-->
-        <!--表-->
         <div class="fL" style="width:70%;height:300px;overflow:hide">
+          <div id="chartContainer7" style="height: 300px; width: 100%;">
+          </div>
+        </div>
+      </div> 
+        <div class="proSection clearfix">
+                  <!--表-->
           <table class="table table-striped">
             <thead>
               <tr>
                 <th width="15%">标段名</th><th width="16%" class="taC">总价/期数</th><th width="40%" class="taC">截止上期累计完成/本期完成/未完成</th>
               </tr>
-            </thead>
-          </table>
-          <div style="height:264px;overflow-y:auto">
-          <table class="table table-striped">
-            <tr>
-              <td width="15%"><a href="s-project-section-detail.html">GZ-HJDQ-JL-001(点我)</a><br>土建合同</td><td width="16%" class="taR">¥<b>5,000,000.00</b><br>共 2 期(本期 <span class="colOrange">审批中</span>)</td><td width="40%" class="taR"><div class="progress">
-                <div data-original-title="截止本期累计完成:¥731,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width: 45%;" class="bar bar-success">45%</div>
-                <div data-original-title="本期完成:¥31,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width:25%;" class="bar">25%</div>
-                <div data-original-title="未完成:¥71,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width:30%;" class="bar bar-gary">30%</div>
-              </div></td>
-            </tr>
-            <tr>
-              <td width="15%"><a href="#">GZ-HJDQ-JL-002</a><br>土建合同</td><td width="16%" class="taR">¥<b>5,000,000.00</b><br>共 2 期(本期 <span class="colGreen">已完成</span>)</td><td width="40%" class="taR"><div class="progress">
-                <div data-original-title="截止本期累计完成:¥731,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width: 29%;" class="bar bar-success">29%</div>
-                <div data-original-title="本期完成:¥31,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width:5%;" class="bar">5%</div>
-                 <div data-original-title="未完成:¥71,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width:66%;" class="bar bar-gary">66%</div>
-              </div></td>
-            </tr>
-            </tr>
-            <tr>
-              <td width="15%"><a href="#">GZ-HJDQ-JL-003</a><br>监理合同</td><td width="16%" class="taR">¥<b>5,000,000.00</b><br>共 2 期(本期 <span class="colOrange">审批中</span>)</td><td width="40%" class="taR"><div class="progress">
-                <div data-original-title="截止本期累计完成:¥731,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width:15%;" class="bar bar-success">15%</div>
-                <div data-original-title="本期完成:¥31,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width:45%;" class="bar">45%</div>
-                 <div data-original-title="未完成:¥71,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width:40%;" class="bar bar-gary">40%</div>
-              </div></td>
-            </tr>
-            </tr>
-          </table>
+              <tr>
+                <td width="15%"><a href="s-project-section-detail.html">GZ-HJDQ-JL-001(点我)</a><br>土建合同</td><td width="16%" class="taR">¥<b>5,000,000.00</b><br>共 2 期(本期 <span class="colOrange">审批中</span>)</td><td width="40%" class="taR"><div class="progress">
+                  <div data-original-title="截止本期累计完成:¥731,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width: 45%;" class="bar bar-success">45%</div>
+                  <div data-original-title="本期完成:¥31,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width:25%;" class="bar">25%</div>
+                  <div data-original-title="未完成:¥71,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width:30%;" class="bar bar-gary">30%</div>
+                </div></td>
+              </tr>
+              <tr>
+                <td width="15%"><a href="#">GZ-HJDQ-JL-002</a><br>土建合同</td><td width="16%" class="taR">¥<b>5,000,000.00</b><br>共 2 期(本期 <span class="colGreen">已完成</span>)</td><td width="40%" class="taR"><div class="progress">
+                  <div data-original-title="截止本期累计完成:¥731,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width: 29%;" class="bar bar-success">29%</div>
+                  <div data-original-title="本期完成:¥31,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width:5%;" class="bar">5%</div>
+                   <div data-original-title="未完成:¥71,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width:66%;" class="bar bar-gary">66%</div>
+                </div></td>
+              </tr>
+              </tr>
+              <tr>
+                <td width="15%"><a href="#">GZ-HJDQ-JL-003</a><br>监理合同</td><td width="16%" class="taR">¥<b>5,000,000.00</b><br>共 2 期(本期 <span class="colOrange">审批中</span>)</td><td width="40%" class="taR"><div class="progress">
+                  <div data-original-title="截止本期累计完成:¥731,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width:15%;" class="bar bar-success">15%</div>
+                  <div data-original-title="本期完成:¥31,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width:45%;" class="bar">45%</div>
+                   <div data-original-title="未完成:¥71,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width:40%;" class="bar bar-gary">40%</div>
+                </td>
+              </tr>
+            </table>
           </div>
-        </div>
         <!--表-->
-      </div>
-      <div class="proSection clearfix">
-        <div id="chartContainer7" style="height: 300px; width: 100%;">
         </div>
-      </div>
     </div>
   </div>
         <!--内容-->
@@ -138,6 +133,7 @@
                       {
                           name:'标段计量分布',
                           type:'pie',
+                          roseType: 'angle',
                           radius : '40%',
                           center: ['50%', 155],
                           data:[
@@ -152,41 +148,30 @@
                 myChart.setOption(option); 
                 //5 期数组成//
                 //6 标段计量分布//
-                // 基于准备好的dom,初始化echarts图表
                 var myChart = echarts.init(document.getElementById('chartContainer7'));   
                 var option = {
-                          color:['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
-                          '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
-                          '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
-                          '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
+                          color:['#ff6666','#3cb371'],
                           title : {
-                              text: '标段按月进度'
+                              text: '项目按月进度'
                           },
                           tooltip : {
                               trigger: 'axis',
-                              formatter: "{b} <br/>{a}:{c} %<br/>{a1}:{c1} %<br/>{a2}:{c2} %"
+                              formatter: "{b} <br/>{a}:{c} %<br/>{a1}:{c1} %"
                           },
                           legend: {
-                              data:['GZ-HJDQ-JL-001','GZ-HJDQ-JL-002','GZ-HJDQ-JL-003']
-                          },
-                          toolbox: {
-                              show : true,
-                              feature : {
-                                  magicType : {show: true, type: ['line', 'bar']}
-                              }
+                              data:['累计完成','本月完成']
                           },
     dataZoom : {
         show : true,
-        realtime: true,
-        start :0,
+        start :50,
         end : 100
     },
     xAxis : [
         {
                                   type : 'category',
-                                  boundaryGap : false,
+                                  boundaryGap : true,
             data : [
-                '2013年2月','3月','4月','5月','6月','7月','8月','9月','10月'
+                '2月','3月','4月','5月','6月','7月','8月','9月','10月'
             ]
         }
     ],
@@ -201,7 +186,7 @@
                           ],
     series : [
                               {
-                                  name:'GZ-HJDQ-JL-001',
+                                  name:'累计完成',
                                   type:'line',
                                   itemStyle: {
                                       normal: {
@@ -216,7 +201,7 @@
                                   data:[10, 10, 30, 40, 50, 60, 80, 85, 100]
                               },
                               {
-                                  name:'GZ-HJDQ-JL-002',
+                                  name:'本月完成',
                                   type:'line',
                                   itemStyle: {
                                       normal: {
@@ -228,22 +213,7 @@
                                           }
                                       }
                                   },
-                                  data:[20, 0, 10, 10, 10, 10, 10, 5, 15]
-                              },
-                              {
-                                  name:'GZ-HJDQ-JL-003',
-                                  type:'line',
-                                  itemStyle: {
-                                      normal: {
-                                          lineStyle: {
-                                              shadowColor : 'rgba(0,0,0,0.4)',
-                                              shadowBlur: 5,
-                                              shadowOffsetX: 3,
-                                              shadowOffsetY: 3
-                                          }
-                                      }
-                                  },
-                                  data:[10, 0, 10, 15, 15, 5, 5, 5, 15]
+                                  data:[10, 0, 20, 10, 10, 10, 10, 5, 15]
                               }
                           ]
 };
@@ -251,7 +221,8 @@
                     
                 // 为echarts对象加载数据 
                 myChart.setOption(option); 
-                //3 标段计量分布//
+                //6 标段计量分布//                
+                
     </script>
 
 </body>

+ 7 - 6
w-project-detail.html

@@ -71,21 +71,21 @@
     <div class="project">
       <div class="proSection clearfix">
         <!--图表1-->
-        <div class="fL" style="width:49%">  
+        <div class="fL" style="width:39%">  
           <div id="chartContainer" style="height: 300px; width: 100%;">
           </div>
         </div>
           <!--图表1-->
         <!--图表2-->
-        <div class="fR" style="width:49%">
-          <div id="chartContainer2" style="height: 300px; width: 100%;">
+        <div class="fR" style="width:59%">
+          <div id="chartContainer3" style="height: 300px; width: 100%;">
           </div>
         </div>
         <!--图表2-->
       </div>
       <div class="proSection clearfix">
         <!--图表3-->
-        <div id="chartContainer3" style="height: 300px; width: 100%;">
+        <div id="chartContainer2" style="height: 300px; width: 100%;">
         </div>
         <!--图表3-->
       </div>
@@ -163,6 +163,7 @@
                       {
                           name:'标段计量分布',
                           type:'pie',
+                          roseType: 'angle',
                           radius : '60%',
                           center: ['60%', 175],
                           data:[
@@ -221,12 +222,12 @@
         {
             name:'总价',
             type:'bar',
-            data:[27814964.00,41043186.10, 42917475.00, 27634982.00],
+            data:[27814964.00,41043186.10, 42917475.00, 27634982.00]
         },
         {
             name:'累计完成计量',
             type:'bar',
-            data:[20571481.02,28770211.71, 23427801.00, 1708798.00],
+            data:[20571481.02,28770211.71, 23427801.00, 1708798.00]
         },
         {
             name:'完成进度百分比',

+ 7 - 2
w-project-section-detail.html

@@ -180,8 +180,12 @@
     ],
     yAxis : [
         {
-            type : 'value',
-            position: 'left',
+           type : 'value',
+            name : '金额',
+            position:'left',
+            axisLabel : {
+                formatter: '{value} 元'
+            },
             splitArea : {show : true}
         },
         {
@@ -257,6 +261,7 @@
                       {
                           name:'标段计量分布',
                           type:'pie',
+                          roseType: 'angle',
                           radius : '40%',
                           center: ['45%', 155],
                           data:[