chenzhiguang
/
smartCity


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style/reset.css" />
    <link rel="stylesheet" href="style/public.css" />
    <link rel="stylesheet" href="style/survey.css" />
    <link rel="stylesheet" href="font/iconfont.css" />
    <title>Document</title>
  </head>

  <body>
    <header class="title">
      <i class="iconfont iconwenzhangguanli"></i>
      江门概况
    </header>
    <div class="line"></div>
    <section class="s1">
      <div class="s-title"><h2>地理环境</h2></div>
      <p class="describe">
        江门，别称“五邑”，是广东省地级市，喂鱼珠江三角洲西部，濒临南海，毗邻港澳，属粤港澳大湾区城市群，是珠江三角洲西部地区的中心城市之一，“中国舞蹈之城”，“中国侨都”。
      </p>
    </section>
    <div class="line"></div>

    <section class="s2">
      <div class="card xingzheng">
        <div class="s-title"><h2>行政区划</h2></div>
        <p>下辖<span class="emphasize">3</span>个区</p>
        <p>代管<span class="emphasize">4</span>个县级市</p>
        <div class="f-item">
          <p><span class="emphasize">61</span>个镇</p>
          <p><span class="emphasize">12</span>个街道</p>
        </div>
        <div class="f-item">
          <p><span class="emphasize">1050</span>个村</p>
          <p><span class="emphasize">275</span>个社区</p>
        </div>
      </div>
      <div class="card qihoulvyou">
        <div class="s-title"><h2>气候概况</h2></div>
        <div class="f-item">
          <span>全年降雨量</span>
          <span class="emphasize">1990.0mm</span>
        </div>
        <div class="f-item">
          <span>全年平均温度</span>
          <span class="emphasize">23.1℃</span>
        </div>
        <div class="f-item">
          <span>历史最高气温</span>
          <span class="emphasize">38℃</span>
        </div>
        <div class="f-item">
          <span>历史最低气温</span>
          <span class="emphasize">5℃</span>
        </div>
      </div>
      <div class="line"></div>
      <div class="card" id="people"></div>
      <div class="card" id="people-tree"></div>
      <div class="line"></div>
      <div class="card jiaotong-body">
        <div class="s-title"><h2>交通路况</h2></div>
        <div class="jiaotongcon">
          <div class="fix-item">
            <span>交通指数</span>
            <div id="zhishu">3.4</div>
          </div>
          <div class="fix-item">
            <span>平均车速</span>
            <div id="chesu">32.8km/h</div>
          </div>
        </div>
      </div>
      <div class="card qihoulvyou">
          <div class="s-title"><h2>旅游概况</h2></div>
          <div class="f-item">
            <span>旅游景点</span>
            <span class="classifier"><span class="emphasize">70</span>个</span>
          </div>
          <div class="f-item">
            <span>旅游机构</span>
            <span class="classifier"><span class="emphasize">183</span>个</span>
          </div>
          <div class="f-item">
            <span>旅游宾馆</span>
            <span class="classifier"><span class="emphasize">899</span>家</span>
          </div>
          <div class="f-item">
            <span>旅游收入合计</span>
            <span class="classifier"><span class="emphasize">492.53</span>亿元</span>
          </div>
        </div>
    </section>

    <script src="js/echarts.min.js"></script>
    <script>
        (function() {
          let option = {
            title: {
              text: "户籍总人口",
              textStyle: {
                color: "#fff"
              }
            },
            color: ["#ffe354"],
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
              borderColor: "#fff"
            },
            xAxis: [
              {
                type: "category",
                data: ["2013", "2014", "2015", "2016", "2017"],
                axisTick: {
                  alignWithLabel: true
                },
                axisLine: {
                  lineStyle: {
                    color: "#ffffff"
                  }
                }
              }
            ],
            yAxis: [
              {
                name: "(万人)",
                type: "value",
                boundaryGap: true,
                min: 390,
                splitLine: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: "#ffffff"
                  }
                }
              }
            ],
            series: [
              {
                name: "人口",
                type: "bar",
                barWidth: "40%",
                data: [393, 393.5, 391.5, 393.8, 396.3]
              }
            ]
          };
  
          let treeOption = {
            title: {
              text: "户籍自然增长率",
              textStyle: {
                color: "#fff"
              }
            },
            color: ["#ff9a32", "#ffe354"],
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              top: "20%",
              containLabel: true,
              borderColor: "#fff"
            },
            legend: {
              itemWidth: 14,
              itemHeight: 5,
              itemGap: 1,
              data: ["自然增长人数（人）", "自然增长率（%）"],
              x: "55%",
              textStyle: {
                color: "#fff",
                fontSize: 10
              }
            },
            xAxis: {
              data: ["2013", "2014", "2015", "2016", "2017"],
              axisLine: {
                lineStyle: {
                  color: "#ffffff"
                }
              },
              axisTick: {
                show: false //隐藏X轴刻度
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff" //X轴文字颜色
                }
              }
            },
            yAxis: [
              {
                type: "value",
                splitLine: {
                  show: false
                },
                splitLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: "#ffffff"
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#fff"
                  }
                }
              },
              {
                type: "value",
  
                position: "right",
                splitLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: "#ffffff"
                  }
                },
                axisLabel: {
                  show: true,
                  formatter: "{value} %", //右侧Y轴文字显示
                  textStyle: {
                    color: "#fff"
                  }
                }
              }
            ],
            series: [
              {
                name: "自然增长率（%）",
                type: "line",
                yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                smooth: true, //平滑曲线显示
                showAllSymbol: true, //显示所有图形。
                symbol: "circle", //标记的图形为实心圆
                symbolSize: 10, //标记的大小
  
                data: [0.39, 0.23, 0.57, 0.74, 0.67]
              },
              {
                name: "自然增长人数（人）",
                type: "bar",
                data: [15232, 9092, 22431, 28824, 26452]
              }
            ]
          };
  
          // let treeOption = {
          //   title: {
          //     text: "人口",
          //     textStyle: {
          //       color: "#fff"
          //     }
          //   },
          //   color: ["#ffe354", "#ff9a32"],
          //   tooltip: {
          //     trigger: "axis",
          //     axisPointer: {
          //       // 坐标轴指示器，坐标轴触发有效
          //       type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          //     },
          //     formatter: function(params) {
          //       // 改鼠标悬浮提示值格式
          //       var relVal = params[0].name + "<br/>";
          //       relVal +=
          //         params[0].seriesName + " : " + params[0].value + "<br/>";
          //       relVal +=
          //         params[1].seriesName + " : " + -params[1].value + "<br/>";
          //       return relVal;
          //     }
          //   },
          //   legend: {
          //     data: ["男", "女"]
          //   },
          //   grid: {
          //     left: "2%",
          //     right: "4%",
          //     bottom: "3%",
          //     containLabel: true
          //   },
          //   xAxis: [
          //     {
          //       type: "value",
          //       axisLabel: {
          //         formatter: function(value) {
          //           if (value < 0) {
          //             return -value;
          //           } else {
          //             return value;
          //           }
          //         }
          //       },
          //       axisLine: {
          //         lineStyle: {
          //           color: "#ffffff"
          //         }
          //       }
          //     }
          //   ],
          //   yAxis: [
          //     {
          //       name: "(万/人)",
          //       position: "left",
          //       type: "category",
          //       axisTick: { show: false },
          //       axisLine: {
          //         show: true,
          //         lineStyle: {
          //           color: "#ffffff"
          //         }
          //       },
          //       data: ["100", "200", "300", "400", "500", "600", "700"]
          //     }
          //   ],
          //   series: [
          //     {
          //       name: "男",
          //       type: "bar",
          //       stack: "总量",
          //       label: {
          //         normal: {
          //           show: true,
          //           position: "right"
          //         }
          //       },
          //       data: [320, 302, 241, 274, 290, 320, 302]
          //     },
          //     {
          //       name: "女",
          //       type: "bar",
          //       stack: "总量",
          //       label: {
          //         normal: {
          //           show: true,
          //           position: "left",
          //           formatter: function(value) {
          //             if (value.data < 0) {
          //               return -value.data;
          //             }
          //           }
          //         }
          //       },
          //       data: [-120, -132, -101, -134, -190, -200, -210]
          //     }
          //   ]
          // };
          let peopleChart = echarts.init(document.querySelector("#people"));
          let treeChart = echarts.init(document.querySelector("#people-tree"));
  
          peopleChart.setOption(option);
          treeChart.setOption(treeOption);
        })();
        Array.from(document.querySelectorAll(".s2 .card")).forEach(
          (dom, index) => {
            dom.addEventListener("click", e => {
              console.log("surveyClickHandle", index);
              window.surveyClickHandle && window.surveyClickHandle(index)
            });
          }
        );
        let $zhishu = document.getElementById("zhishu");
        let $chesu = document.getElementById("chesu");
  
        setInterval(() => {
          $zhishu.innerHTML = ((Math.random() + 2) * 3).toFixed(1);
          $chesu.innerHTML = ((Math.random() + 1) * 30).toFixed(1) + "km/h";
        }, 2000);
    </script>
  </body>
</html>