chenzhiguang
/
smartCity


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703
							<!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/livelihood.css" />
    <link rel="stylesheet" href="font/iconfont.css" />
    <title>Document</title>
  </head>

  <body>
    <header class="title">
      <i class="iconfont iconminshengxingfu"></i>
      民生幸福
    </header>
    <div class="line"></div>
    <section class="s1">
      <div class="card">
        <div class="s-title"><h2>医疗卫生</h2></div>
        <div class="f-item">
          <span>卫生机构数</span>
          <span class="emphasize">1608</span>
        </div>
        <div class="f-item">
          <span>医院</span>
          <span class="emphasize">44</span>
        </div>
        <div class="f-item">
          <span>床位数</span>
          <span class="emphasize">22774</span>
        </div>
        <div class="f-item">
          <span>人员数</span>
          <span class="emphasize">34531</span>
        </div>
      </div>
      <div class="card">
        <div class="s-title"><h2>运输邮电</h2></div>
        <div class="f-item">
          <span>机动车辆总数</span>
          <span class="emphasize">293.37万辆</span>
        </div>
        <div class="f-item">
          <span>货运量</span>
          <span class="emphasize">14975万吨</span>
        </div>
        <div class="f-item">
          <span>货物周转量</span>
          <span class="emphasize">186.62亿吨公里</span>
        </div>
        <div class="f-item">
          <span>货物吞吐量</span>
          <span class="emphasize">8267.42万吨</span>
        </div>
      </div>
      <div class="line"></div>
      <div class="card">
        <div class="s-title"><h2>教育资源</h2></div>
        <div class="f-item">
          <span>普通中学</span>
          <span class="emphasize">189所</span>
        </div>
        <div class="f-item">
          <span>小学</span>
          <span class="emphasize">319所</span>
        </div>
        <div class="f-item">
          <span>幼儿教育</span>
          <span class="emphasize">275所</span>
        </div>
        <div class="f-item">
          <span>高等院校</span>
          <span class="emphasize">3所</span>
        </div>
        <div class="f-item">
          <span>中等职业教育学校</span>
          <span class="emphasize">22所</span>
        </div>
      </div>
      <div class="card">
        <div class="s-title"><h2>文体服务</h2></div>
        <div class="f-item">
          <span>博物馆</span>
          <span class="emphasize">6所</span>
        </div>
        <div class="f-item">
          <span>公共图书馆</span>
          <span class="emphasize">8所</span>
        </div>
        <div class="f-item">
          <span>广播电视台</span>
          <span class="emphasize">8个</span>
        </div>
        <div class="f-item">
          <span>文化站</span>
          <span class="emphasize">74个</span>
        </div>
      </div>
    </section>
    <div class="line"></div>

    <section class="s2">
      <div class="card" id="gdp"></div>
      <div class="card" id="outIn"></div>
      <div class="line"></div>
      <div class="card" id="addVal"></div>
      <div class="card" id="xiaofei"></div>
      <div class="line"></div>
      <div class="card" style="height:240px;" id="guding"></div>
      <div class="card" style="height:240px;" id="gongshang"></div>
    </section>

    <script src="js/echarts.min.js"></script>
    <script>
      (function() {
        let gdpOption = {
          title: {
            text: "社会保障",
            textStyle: {
              color: "#fff"
            }
          },
          color: ["#ffe354", "#ff9a32", "#dc9518"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              lineStyle: {
                color: "#57617B"
              }
            }
          },
          legend: {
            data: [
              "城镇职工养老保险人数",
              "城乡居民基养老保险人数",
              "城乡基本医疗保险人数"
            ],
            icon: "rect",
            itemWidth: 10,
            itemHeight: 5,
            itemGap: 2,
            right: "0",
            x: "40%",
            textStyle: {
              fontSize: 12,
              color: "#F1F1F3"
            }
          },
          grid: {
            left: "1%",
            right: "6%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              axisLine: {
                lineStyle: {
                  color: "#fff"
                }
              },
              data: ["2013", "2014", "2015", "2016", "2017"]
            }
          ],
          yAxis: [
            {
              name:"(万人)",
              type: "value",
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: "#fff"
                }
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  fontSize: 14
                }
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#57617B"
                }
              }
            }
          ],
          series: [
            {
              name: "城镇职工养老保险人数",
              type: "line",
              smooth: true,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(137, 189, 27, 0.3)"
                      },
                      {
                        offset: 0.8,
                        color: "rgba(137, 189, 27, 0)"
                      }
                    ],
                    false
                  ),
                  shadowColor: "rgba(253, 225, 89, 1)",
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: "#ffe354"
                }
              },
              data: [181.2026, 186.1874, 191.9834, 193.571, 186.2082]
            },
            {
              name: "城乡居民基养老保险人数",
              type: "line",
              smooth: true,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(0, 136, 212, 0.3)"
                      },
                      {
                        offset: 0.8,
                        color: "rgba(0, 136, 212, 0)"
                      }
                    ],
                    false
                  ),
                  shadowColor: "rgba(253, 225, 89, 1)",
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: "#ff9a32"
                }
              },
              data: [149.5543, 142.4777, 149.1736, 156.006, 155.4064]
            },
            {
              name: "城乡基本医疗保险人数",
              type: "line",
              smooth: true,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(219, 50, 51, 0.3)"
                      },
                      {
                        offset: 0.8,
                        color: "rgba(219, 50, 51, 0)"
                      }
                    ],
                    false
                  ),
                  shadowColor: "rgba(253, 225, 89, 1)",
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: "#dc9518"
                }
              },
              data: [385.3142, 388.7146, 386.9919, 382.6387, 388.8139]
            }
          ]
        };

        let outInOption = {
          title: {
            text: "邮电服务",
            textStyle: {
              color: "#fff"
            }
          },
          color: ["#ffe354", "#ff9a32"],
          tooltip: {
            trigger: "axis"
          },
          legend: {
            icon: "rect",
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 1,
            data: ["客运量", "货物吞吐量"],
            x: "60%",
            textStyle: {
              fontSize: 12,
              color: "#fff"
            }
          },
          grid: {
            left: "2%",
            right: "4%",
            bottom: "3%",
            top: "30%",
            containLabel: true
          },
          xAxis: [
            {
              type: "category",
              data: ["2013", "2014", "2015", "2016", "2017"],
              axisLine: {
                lineStyle: {
                  color: "#ffffff"
                }
              }
            }
          ],
          yAxis: [
            {
              type: "value",
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: "#ffffff"
                }
              }
            }
          ],
          series: [
            {
              name: "客运量",
              type: "bar",
              data: [20102, 9545, 9239, 9746, 9606],
              barGap: 0
            },
            {
              name: "货物吞吐量",
              type: "bar",
              data: [6737.08, 7352.17, 7524.62, 7923, 8267.42],
              barGap: 0
            }
          ]
        };

        let addValOption = {
          title: {
            text: "升学率、入学率",
            textStyle: {
              color: "#fff"
            }
          },
          color: ["#ffe354"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            top: "33%",
            containLabel: true,
            borderColor: "#fff"
          },
          xAxis: [
            {
              type: "category",
              data: [
                "学龄\n儿童",
                "小学\n升学",
                "初中\n适龄",
                "初中\n升学",
                "高中\n升学"
              ],
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                lineStyle: {
                  color: "#ffffff"
                }
              }
            }
          ],
          yAxis: [
            {
              name: "(%)",
              type: "value",
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: "#ffffff"
                }
              }
            }
          ],
          series: [
            {
              name: "升学入学率",
              type: "bar",
              barWidth: "40%",
              data: [100, 100, 100, 98.58, 87.79]
            }
          ]
        };

        let xiaofeiOption = {
          title: {
            text: "卫生机构人员比例",
            textStyle: {
              color: "#fff"
            }
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            textStyle: {
              fontSize: 12
            }
          },
          legend: {
            data: [
              "执业医师",
              "执业助理医师",
              "注册护士",
              "药师（士）",
              "技师（士）",
              "其他卫生技术人员"
            ],
            itemWidth: 10,
            itemHeight: 5,
            itemGap: 2,
            right: "0",
            x: "48%",
            y: "30%",
            textStyle: {
              fontSize: 12,
              color: "#F1F1F3"
            }
          },
          series: [
            {
              name: "卫生机构人员比例",
              type: "pie",
              center: ["25%", "60%"],
              radius: ["50%", "65%"],
              avoidLabelOverlap: false,
              color: ["#ffe354", "#ff9a32","#dc9518","#9b9b9b","#dc9518","#bfbfbf","#d9d9d9"],
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: "12",
                    fontWeight: "bold"
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                { value: 2904.1, name: "其他卫生技术人员" },
                { value: 8002.28, name: "执业医师" },
                { value: 1857.6, name: "执业助理医师" },
                { value: 12908.45, name: "注册护士" },
                { value: 1894.6, name: "药师（士）" },
                { value: 1320.5, name: "技师（士）" }
              ]
            }
          ]
        };

        let gudingOption = {
          title: {
            text: "民生公共支出情况",
            textStyle: {
              color: "#fff"
            }
          },
          color: ["#ffe354"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            top: "23%",
            containLabel: true,
            borderColor: "#fff"
          },
          xAxis: [
            {
              axisLabel:{  
                  interval:0,  
                  rotate:45,
                  // margin:2,  
                  textStyle:{  
                    fontSize:10
                  }
              },
              type: "category",
              data: [
                "一般公共服务",
                "公共安全",
                "教育",
                "文化体育与传媒",
                "社会保障和就业",
                "医疗卫生",
                "节能环保",
                "城乡社区事务",
                "交通运输",
                "其他支出"
              ],
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                lineStyle: {
                  color: "#ffffff"
                }
              }
            }
          ],
          yAxis: [
            {
              type: "value",
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: "#ffffff"
                }
              }
            }
          ],
          series: [
            {
              name: "（万元）",
              type: "bar",
              barWidth: "40%",
              data: [
                393354,
                273139,
                732484,
                76247,
                530281,
                373195,
                47605,
                47605,
                219034,
                97014,
                7055
              ]
            }
          ]
        };

        let gongshangOption = {
          title: {
            text: "城镇登记失业率",
            textStyle: {
              color: "#fff"
            }
          },
          color: ["#ffe354"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            top: "33%",
            containLabel: true,
            borderColor: "#fff"
          },
          xAxis: [
            {
              type: "category",
              data: ["2013", "2014", "2015", "2016", "2017"],
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                lineStyle: {
                  color: "#ffffff"
                }
              }
            }
          ],
          yAxis: [
            {
              name: "(%)",
              type: "value",
              splitLine: {
                show: false
              },
              max:100,
              axisLine: {
                lineStyle: {
                  color: "#ffffff"
                }
              }
            }
          ],
          series: [
            {
              name: "失业率(%)",
              type: "bar",
              barWidth: "40%",
              data: [2.32, 2.36, 2.37, 2.37, 2.38]
            }
          ]
        };

        let gdpChart = echarts.init(document.querySelector("#gdp"));
        let outInChart = echarts.init(document.querySelector("#outIn"));
        let addValChart = echarts.init(document.querySelector("#addVal"));
        let xiaofeiChart = echarts.init(document.querySelector("#xiaofei"));
        let gudingChart = echarts.init(document.querySelector("#guding"));
        let gongshangChart = echarts.init(document.querySelector("#gongshang"));

        gdpChart.setOption(gdpOption);
        outInChart.setOption(outInOption);
        addValChart.setOption(addValOption);
        xiaofeiChart.setOption(xiaofeiOption);
        gudingChart.setOption(gudingOption);
        gongshangChart.setOption(gongshangOption);
      })();
      let arr = Array.from(document.querySelectorAll(".s1 .card")).concat(
        Array.from(document.querySelectorAll(".s2 .card"))
      );
      arr.forEach((dom, index) => {
        dom.addEventListener("click", e => {
          console.log("livelihoodClickHandle", index);
          window.livelihoodClickHandle && window.livelihoodClickHandle(index);
        });
      });
    </script>
  </body>
</html>