zmcoding
/
data_view


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621
							<!doctype html>
<meta charset="utf-8">
<title>警情警力分析</title>
<link href="css/style.css"  rel="stylesheet" type="text/css" media="all" />
<script src="js/echarts.min.js" charset="utf-8"></script>


<body>
<div class="wpbox">
<div class="bnt">
  <div class="topbnt_left fl">
   <ul><li class="active"><a href="#">警情警力</a></li>
      <li><a href="#">实有人口</a></li>
      <li><a href="#">流动人口</a></li>
      <li><a href="#">实名制</a></li>
   </ul>
  </div>
  <h1 class="tith1 fl">矛盾纠纷分析</h1>
  <div class=" fr topbnt_right">
    <ul>
       <li><a href="#">返回</a></li>
       <li><a href="#">分析报告</a></li>
       <li><a href="#">交通</a></li>
       <li><a href="#">舆情</a></li>
    </ul>
   </ul>
  </div>
</div>
<!-- bnt end -->
<div class="left1">
    <div class="aleftboxttop"><h2 class="tith2">今日矛盾纠纷数据统计</h2>
    <div class="lefttoday_tit" style=" height:8%"><p class="fl">地区：甘孜</p><p class="fr">2018-06-14</p></div>
    <div class="lefttoday_number">
      <div class="widget-inline-box text-center fl">
        <p>矛盾纠纷</p>
        <h3 class="ceeb1fd">54</h3>
        <h4 class="text-muted pt6">环比<img src="img/iconup.png" height="16" />2%</h4>
      </div>
      <div class="widget-inline-box text-center fl">
         <p>已调节</p>
        <h3 class="c24c9ff">54</h3>
        <h4 class="text-muted pt6">环比<img src="img/icondown.png" height="16" />3%</h4>
      </div>
      <div class="widget-inline-box text-center fl">
         <p>未调节</p>
        <h3 class="cffff00">4</h3>
        <h4 class="text-muted pt6">环比<img src="img/icondown.png" height="16" />3%</h4>
      </div>
      <div class="widget-inline-box text-center fl">
         <p>处理中</p>
        <h3 class="c11e2dd">4</h3>
        <h4 class="text-muted pt6">环比<img src="img/icondown.png" height="16" />3%</h4>
      </div>
    </div>
    <!-- lefttoday_number end -->
    </div>
    <div class="aleftboxtmidd">
      <h2 class="tith2">矛盾纠纷地区统计</h2>
          <div class="lefttoday_tit height ht"><p class="fl">状态：已调节</p><p class="fr">时间段：2018-06-10 至 2018-06-14</p></div>
      <div id="aleftboxtmidd" class="aleftboxtmiddcont"></div>
  </div>
  <div class="aleftboxtbott">
    <h2 class="tith2">矛盾纠纷类型统计</h2>
        <div class="lefttoday_tit height"><p class="fl">状态：已调节</p><p class="fr">时间段：2018-06-10 至 2018-06-14</p></div>
    <div id="aleftboxtbott" class="aleftboxtbott_cont" ></div>
</div>
</div>
<!--  left1 end -->
<div class="mrbox">
      <div class="mrbox_topmidd" style="width: 69%;">
          <div class="amiddboxttop">
              <h2 class="tith2 pt1">实时监控统计</h2>
                <div class="amiddboxttop_map" style="">
                 <span class="camera_l"  style=" top:34%;left:32%"></span>
                 <span class="camera_l" style=" top:10%;left:10%"></span>
                 <span class="camera_l" style=" top:5%;left:40%"></span>
                 <span class="camera_l" style=" top:10%;left:50%"></span>
                 <span style=" top:30%;left:75%"></span>
                 <span style=" top:5%;left:92%"></span>
                 <span style=" top:40%;left:83%"></span>
                </div>
            </div>
            <!--  amiddboxttop end-->
                <div class="amidd_bott">
                  <div class="amiddboxtbott1 fl" >
                    <h2 class="tith2 pt1">矛盾纠纷环比分析</h2>
                    <div id="amiddboxtbott1" class="amiddboxtbott1content" ></div>
                  </div>

                <div class="amiddboxtbott2 fl"><h2 class="tith2 pt1">案件统计</h2>
                    <div id="amiddboxtbott2" class="amiddboxtbott2content"></div>
                </div>
            </div>
            <!-- amidd_bott end -->
          </div>
        <!-- mrbox_top end -->
        <div class="mrbox_top_right">
          <div class="arightboxtop"><h2 class="tith2">警力分析</h2>
            <div class="lefttoday_tit"><p class="fl">状态：已调节</p><p class="fr">时间段：2018-06-10</p></div>
            <div class="left2_table">
               <ul>
                    <li>
                    <p class="fl"><b>康定市公安局</b><br>
                      村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。<br>
                    </p>
                    <p class="fr pt17">2018-06-22</p>
                    </li>
                    <li class="bg">
                    <p class="fl"><b>康定市公安局</b><br>
                      村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。<br>
                    </p>
                    <p class="fr pt17">2018-06-22</p>
                    </li>
                    <li>
                    <p class="fl"><b>康定市公安局</b><br>
                      村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。<br>
                    </p>
                    <p class="fr pt17">2018-06-22</p>
                    </li>
                    <li class="bg">
                    <p class="fl"><b>康定市公安局</b><br>
                      村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。<br>
                    </p>
                    <p class="fr pt17">2018-06-22</p>
                    </li>
                    <li>
                    <p class="fl"><b>康定市公安局</b><br>
                      村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。<br>
                    </p>
                    <p class="fr pt17">2018-06-22</p>
                    </li>
                    <li class="bg">
                    <p class="fl"><b>康定市公安局</b><br>
                      村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。<br>
                    </p>
                    <p class="fr pt17">2018-06-22</p>
                    </li>
                    <li>
                    <p class="fl"><b>康定市公安局</b><br>
                      村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。<br>
                    </p>
                    <p class="fr pt17">2018-06-22</p>
                    </li>
                    <li class="bg">
                    <p class="fl"><b>康定市公安局</b><br>
                      村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。<br>
                    </p>
                    <p class="fr pt17">2018-06-22</p>
                    </li>

               </ul>
            </div>

          </div>
            <div class="arightboxbott"><h2 class="tith2 ">矛盾纠纷七日数据分析</h2>
              <div class="lefttoday_tit"><p class="fl">状态：已调节</p><p class="fr">时间：2018-06-14</p></div>
              <div id="arightboxbott" class="arightboxbottcont" style=""></div>
            </div>
        </div>
        <!-- mrbox_top_right end -->
      </div>

    </div>
</div>

                <script type="text/javascript">
                        var myChart = echarts.init(document.getElementById('aleftboxtmidd'));
                        option = {
                          color:['#76c4bf','#e5ffc7','#508097','#4d72d9'],
                            backgroundColor: 'rgba(1,202,217,.2)',
                            grid: {
                											left:10,
                											right:40,
                											top:20,
                											bottom:0,
                                      containLabel: true
                										},
                                      // legend: {
                                      //     x : 'center',
                                      //     y : '70%',
                                      //     textStyle:{
                                      //       fontSize: 10,
                                      //       color:'rgba(255,255,255,.7)'
                                      //     },
                                      //     data:['康定市','丹巴县','甘孜县','理塘县']
                                      // },
                                      calculable : true,
                                      series : [

                                          {
                                              name:'面积模式',
                                              type:'pie',
                                              radius : [5, 60],
                                              center : ['50%', '55%'],
                                              roseType : 'area',
                                              data:[
                                                  {value:10, name:'康定市'},
                                                  {value:5, name:'丹巴县'},
                                                  {value:15, name:'甘孜县'},
                                                  {value:25, name:'理塘县'}
                                              ]
                                          }
                                      ]
                                  };
                        myChart.setOption(option);
                    </script>
                    <script type="text/javascript">
                            var myChart = echarts.init(document.getElementById('aleftboxtbott'));
                            option = {
                              color:['#7ecef4'],
                                backgroundColor: 'rgba(1,202,217,.2)',
                                grid: {
                    											left:20,
                    											right:20,
                    											top:13,
                    											bottom:6,
                                          containLabel: true
                    										},

                                      xAxis: {
                                          type: 'value',
                                          axisLine:{
                                           lineStyle:{
                                             color:'rgba(255,255,255,.2)'
                                           }
                                         },
                                         splitLine:{
                                           lineStyle:{
                                             color:'rgba(255,255,255,0)'
                                           }
                                         },
                                         axisLabel:{
                                             color:"rgba(255,255,255,0)"
                                         },
                                          boundaryGap: [0, 0.01]
                                      },
                                      yAxis: {
                                          type: 'category',
                                          axisLine:{
                                           lineStyle:{
                                             color:'rgba(255,255,255,.5)'
                                           }
                                         },
                                         splitLine:{
                                           lineStyle:{
                                             color:'rgba(255,255,255,.1)'
                                           }
                                         },
                                         axisLabel:{
                                             color:"rgba(255,255,255,.5)"
                                         },
                                          data: ['未调节','调节中','未调节']
                                      },
                                      series: [
                                          {
                                              name: '2011年',
                                              type: 'bar',
                                              barWidth :30,
                                              itemStyle: {
                                                  normal: {
                                                      color: new echarts.graphic.LinearGradient(
                                                          1, 0, 0, 1,
                                                          [
                                                              {offset: 0, color: 'rgba(230,253,139,.7)'},
                                                              {offset: 1, color: 'rgba(41,220,205,.7)'}
                                                          ]
                                                      )
                                                  }
                                              },
                                              data: [18203, 23489, 29034]
                                          }
                                      ]
                                  };
                            myChart.setOption(option);
                        </script>
                        <script type="text/javascript">
                                var myChart = echarts.init(document.getElementById('amiddboxtbott1'));
                                var data = [
                                    [[28604,77,17099,'Australia',1990],[31163,77.4,2440,'Canada',1990],[1516,68,1605773,'China',1990],[13670,74.7,10082,'Cuba',1990],[28599,75,49805,'Finland',1990],[29476,77.1,569499,'France',1990],[31476,75.4,789237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870776,'India',1990],[29550,79.1,129285,'Japan',1990],[2076,67.9,201954,'North Korea',1990],[12087,72,42954,'South Korea',1990],[24021,75.4,33934,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,381958,'Poland',1990],[19349,69.6,1475652,'Russia',1990],[10670,67.3,53905,'Turkey',1990],[26424,75.7,57117,'United Kingdom',1990],[37062,75.4,252810,'United States',1990]],
                                    [[44056,81.8,23973,'Australia',2015],[43294,81.7,35927,'Canada',2015],[13334,76.9,1376043,'China',2015],[21291,78.5,11562,'Cuba',2015],[38923,80.8,55057,'Finland',2015],[37599,81.9,64345,'France',2015],[44053,81.1,80545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311027,'India',2015],[36162,83.5,126571,'Japan',2015],[1390,71.4,251317,'North Korea',2015],[34644,80.7,503439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,386194,'Poland',2015],[23038,73.13,143918,'Russia',2015],[19360,76.5,78630,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321771,'United States',2015]]
                                ];

                                option = {
                                    backgroundColor: 'rgba(1,202,217,.2)',
                                    grid: {
                                      left:40,
                                      right:40,
                                      top:50,
                                      bottom:40
                        										},
                                    title: {
                                      top: 5,
                                      left:20,
                                        textStyle:{
                                          fontSize:10,
                                          color:'rgba(255,255,255,.6)'
                                        },
                                        text: '环比类型：日环比'
                                    },
                                    legend: {
                                        right: 10,
                                        top: 5,
                                        textStyle:{
                                          fontSize:10,
                                          color:'rgba(255,255,255,.6)'
                                        },
                                        data: ['1990', '2015']
                                    },
                                    xAxis: {
                                      axisLine:{
                                        lineStyle:{
                                          color:'rgba(255,255,255,.2)'
                                        }
                                      },
                                      splitLine:{
                                        lineStyle:{
                                          color:'rgba(255,255,255,.1)'
                                        }
                                      },
                                      axisLabel:{
                                          color:"rgba(255,255,255,.7)"
                                      }
                                    },
                                    yAxis: {
                                      axisLine:{
                                        lineStyle:{
                                          color:'rgba(255,255,255,.2)'
                                        }
                                      },
                                      splitLine:{
                                        lineStyle:{
                                          color:'rgba(255,255,255,.1)'
                                        }
                                      },
                                      axisLabel:{
                                          color:"rgba(255,255,255,.7)"
                                      },
                                        scale: true
                                    },
                                    series: [{
                                        name: '1990',
                                        data: data[0],
                                        type: 'scatter',
                                        symbolSize: function (data) {
                                            return Math.sqrt(data[2]) / 5e2;
                                        },
                                        label: {
                                            emphasis: {
                                                show: true,
                                                formatter: function (param) {
                                                    return param.data[3];
                                                },
                                                position: 'top'
                                            }
                                        },
                                        itemStyle: {
                                            normal: {
                                                shadowBlur: 10,
                                                shadowColor: 'rgba(120, 36, 50, 0.5)',
                                                shadowOffsetY: 5,
                                                color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                                                    offset: 0,
                                                    color: 'rgb(251, 118, 123)'
                                                }, {
                                                    offset: 1,
                                                    color: 'rgb(204, 46, 72)'
                                                }])
                                            }
                                        }
                                    }, {
                                        name: '2015',
                                        data: data[1],
                                        type: 'scatter',
                                        symbolSize: function (data) {
                                            return Math.sqrt(data[2]) / 5e2;
                                        },
                                        label: {
                                            emphasis: {
                                                show: true,
                                                formatter: function (param) {
                                                    return param.data[3];
                                                },
                                                position: 'top'
                                            }
                                        },
                                        itemStyle: {
                                            normal: {
                                                shadowBlur: 10,
                                                shadowColor: 'rgba(25, 100, 150, 0.5)',
                                                shadowOffsetY: 5,
                                                color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                                                    offset: 0,
                                                    color: 'rgb(129, 227, 238)'
                                                }, {
                                                    offset: 1,
                                                    color: 'rgb(25, 183, 207)'
                                                }])
                                            }
                                        }
                                    }]
                                };
                                myChart.setOption(option);
                            </script>

                        <script type="text/javascript">
                                var myChart = echarts.init(document.getElementById('amiddboxtbott2'));
                                option = {
                                    backgroundColor: 'rgba(1,202,217,.2)',
                                    grid: {
                        											left:60,
                        											right:60,
                        											top:50,
                        											bottom:40
                        										},

                              toolbox: {
                                  feature: {
                                      dataView: {show: true, readOnly: false},
                                      magicType: {show: true, type: ['line', 'bar']},
                                      restore: {show: true},
                                      saveAsImage: {show: true}
                                  }
                              },
                              legend: {
                                top:10,
                                textStyle:{
                                  fontSize: 10,
                                  color:'rgba(255,255,255,.7)'
                                },
                                  data:['2017年','2018年','同比增速']
                              },
                              xAxis: [
                                  {
                                      type: 'category',
                                      axisLine:{
                												lineStyle:{
                													color:'rgba(255,255,255,.2)'
                												}
                											},
                											splitLine:{
                												lineStyle:{
                													color:'rgba(255,255,255,.1)'
                												}
                											},
                											axisLabel:{
                													color:"rgba(255,255,255,.7)"
                											},

                                      data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
                                      axisPointer: {
                                          type: 'shadow'
                                      }
                                  }
                              ],
                              yAxis: [
                                  {
                                      type: 'value',
                                      name: '',
                                      min: 0,
                                      max: 250,
                                      interval: 50,
                                      axisLine:{
                												lineStyle:{
                													color:'rgba(255,255,255,.3)'
                												}
                											},
                											splitLine:{
                												lineStyle:{
                													color:'rgba(255,255,255,.01)'
                												}
                											},

                                      axisLabel: {
                                          formatter: '{value} ml'
                                      }
                                  },
                                  {
                                      type: 'value',
                                      name: '',
                                      max: 25,
                                      interval: 5,
                                      axisLine:{
                												lineStyle:{
                													color:'rgba(255,255,255,.3)'
                												}
                											},
                											splitLine:{
                												lineStyle:{
                													color:'rgba(255,255,255,.1)'
                												}
                											},
                                      axisLabel: {
                                          formatter: '{value} °C'
                                      }
                                  }
                              ],
                              series: [

                                  {
                                      name:'2017年',
                                      type:'bar',
                                      itemStyle: {
                                                      normal: {
                                                          color: new echarts.graphic.LinearGradient(
                                                              0, 0, 0, 1,
                                                              [
                                                                  {offset: 0, color: '#b266ff'},
                                                                  {offset: 1, color: '#121b87'}
                                                              ]
                                                          )
                                                      }
                                                  },
                                      data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                                  },
                                  {
                                      name:'2018年',
                                      type:'bar',
                                      itemStyle: {
                                                      normal: {
                                                          color: new echarts.graphic.LinearGradient(
                                                              0, 0, 0, 1,
                                                              [
                                                                  {offset: 0, color: '#00f0ff'},
                                                                  {offset: 1, color: '#032a72'}
                                                              ]
                                                          )
                                                      }
                                                  },
                                      data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                                  },
                                  {
                                      name:'同比增速',
                                      type:'line',
                                      itemStyle: {
                                                      normal: {
                                                          color: new echarts.graphic.LinearGradient(
                                                              0, 0, 0, 1,
                                                              [
                                                                  {offset: 0, color: '#fffb34'},
                                                                  {offset: 1, color: '#fffb34'}
                                                              ]
                                                          )
                                                      }
                                                  },
                                      yAxisIndex: 1,
                                      data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                                  }
                              ]
                          };
                                myChart.setOption(option);
                            </script>
                            <script type="text/javascript">
                                    var myChart = echarts.init(document.getElementById('arightboxbott'));
                                    option = {
                                      color:['#7de494','#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a',  '#00b7ee', '#81dabe','#5fc5ce'],
                                        backgroundColor: 'rgba(1,202,217,.2)',

                                        grid: {
                                            left: '5%',
                                            right: '8%',
                                            bottom: '7%',
                                            top:'8%',
                                            containLabel: true
                                        },
                                        toolbox: {
                                            feature: {
                                                saveAsImage: {}
                                            }
                                        },
                                        xAxis: {
                                            type: 'category',
                                            boundaryGap: false,
                                            axisLine:{
                                              lineStyle:{
                                                color:'rgba(255,255,255,.2)'
                                              }
                                            },
                                            splitLine:{
                                              lineStyle:{
                                                color:'rgba(255,255,255,.1)'
                                              }
                                            },
                                            axisLabel:{
                                                color:"rgba(255,255,255,.7)"
                                            },
                                            data: ['6-08','6-09','6-10','6-11','6-12','6-13','6-14']
                                        },
                                        yAxis: {
                                            type: 'value',
                                            axisLine:{
                                              lineStyle:{
                                                color:'rgba(255,255,255,.2)'
                                              }
                                            },
                                            splitLine:{
                                              lineStyle:{
                                                color:'rgba(255,255,255,.1)'
                                              }
                                            },
                                            axisLabel:{
                                                color:"rgba(255,255,255,.7)"
                                            },
                                        },
                                        series: [
                                            {
                                                name:'2014年',
                                                type:'line',
                                                stack: '总量',
                                                  areaStyle: {normal: {}},
                                                data:[120, 132, 101, 134, 90, 230, 210]
                                            }

                                        ]
                                        };
                                    myChart.setOption(option);
                                </script>


</body>
</html>