chenzhiguang
/
smartCity


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

  <body>
    <header class="title">
      <i class="iconfont iconshuye"></i>
      人居环境
    </header>
    <div class="line"></div>
    <section class="s1">
      <div class="card" id="gongshang"></div>
      <div class="card" id="no-nongdu"></div>
      <div class="line"></div>
      <div class="card" id="pm-nongdu"></div>
      <div class="card" id="so-nongdu"></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>
    </section>

    <script src="js/echarts.min.js"></script>
    <script>
        (function() {
          let gongshangOption = {
            title: {
              text: "空气质量指数",
              textStyle: {
                color: "#fff"
              }
            },
            series: [
              {
                type: "gauge",
                radius: "100%",
                center: ["50%", "68%"],
  
                splitNumber: 0, //刻度数量
                startAngle: 220,
                endAngle: -40,
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 20,
                    color: [[0.5, "#fe9b36"], [1, "#ccc"]]
                  }
                },
                //分隔线样式。
                splitLine: {
                  show: false
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                  show: false
                },
                title: {
                  show: true,
                  offsetCenter: [0, "20%"], // x, y，单位px
                  textStyle: {
                    color: "#01d4ea",
                    fontSize: 10
                  }
                },
                //仪表盘详情，用于显示数据。
                detail: {
                  show: true,
                  offsetCenter: [0, "-20%"],
                  color: "#fff",
                  formatter: function(params) {
                    return params;
                  },
                  textStyle: {
                    fontSize: 18,
                    fontWeight: "bold"
                  }
                },
                data: [
                  {
                    name: "温馨提示：可以正常在\n户外运动，易敏感人群\n减少外出",
                    value: ['63 良'],
                    textStyle: {
                      fontSize: 18
                    }
                  }
                ]
              }
            ]
          };
  
          let noOption = {
            title: {
              text: "NO2季日平均浓度",
              textStyle: {
                color: "#fff"
              }
            },
            series: [
              {
                type: "gauge",
                radius: "100%",
                center: ["50%", "68%"],
  
                splitNumber: 0, //刻度数量
                startAngle: 220,
                endAngle: -40,
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 20,
                    color: [[0.68, "#ffe354"], [1, "#ccc"]]
                  }
                },
                //分隔线样式。
                splitLine: {
                  show: false
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                    show: true,
                    width: "8%",
                    length: '70%',
                },
                itemStyle:{
                  color:'#fff'
                },
                title: {
                  show: false,
                  offsetCenter: [0, "20%"], // x, y，单位px
                  textStyle: {
                    color: "#01d4ea",
                    fontSize: 10
                  }
                },
                //仪表盘详情，用于显示数据。
                detail: {
                  show: true,
                  offsetCenter: [0, "40%"],
                  color: "#fff",
                  formatter: function(params) {
                    return params;
                  },
                  textStyle: {
                    fontSize: 18,
                    fontWeight: "bold"
                  }
                },
                data: [
                  {
                    show:false,
                    name: "温馨提示：可以正常在\n户外运动，易敏感人群\n减少外出",
                    value: 63,
                    textStyle: {
                      fontSize: 18
                    }
                  }
                ]
              }
            ]
          };
  
          let pmOption = {
            title: {
              text: "PM2.5季日平均浓度",
              textStyle: {
                color: "#fff"
              }
            },
            series: [
              {
                type: "gauge",
                radius: "100%",
                center: ["50%", "68%"],
  
                splitNumber: 0, //刻度数量
                startAngle: 220,
                endAngle: -40,
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 20,
                    color: [[0.68, "#06cafd"], [1, "#ccc"]]
                  }
                },
                //分隔线样式。
                splitLine: {
                  show: false
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                    show: true,
                    width: "8%",
                    length: '70%',
                },
                itemStyle:{
                  color:'#fff'
                },
                title: {
                  show: false,
                  offsetCenter: [0, "20%"], // x, y，单位px
                  textStyle: {
                    color: "#01d4ea",
                    fontSize: 10
                  }
                },
                //仪表盘详情，用于显示数据。
                detail: {
                  show:true,
                  offsetCenter: [0, "40%"],
                  color: "#fff",
                  formatter: function(params) {
                    return params;
                  },
                  textStyle: {
                    fontSize: 18,
                    fontWeight: "bold"
                  }
                },
                data: [
                  {
                    show:false,
                    name: "温馨提示：可以正常在\n户外运动，易敏感人群\n减少外出",
                    value: 46,
                    textStyle: {
                      fontSize: 18
                    }
                  }
                ]
              }
            ]
            };
  
          let soOption = {
            title: {
              text: "SO2季日平均浓度",
              textStyle: {
                color: "#fff"
              }
            },
            series: [
              {
                type: "gauge",
                radius: "100%",
                center: ["50%", "68%"],
  
                splitNumber: 0, //刻度数量
                startAngle: 220,
                endAngle: -40,
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 20,
                    color: [[0.68, "#ffe354"], [1, "#ccc"]]
                  }
                },
                //分隔线样式。
                splitLine: {
                  show: false
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                    show: true,
                    width: "8%",
                    length: '70%',
                },
                itemStyle:{
                  color:'#fff'
                },
                title: {
                  show: false,
                  offsetCenter: [0, "20%"], // x, y，单位px
                  textStyle: {
                    color: "#01d4ea",
                    fontSize: 10
                  }
                },
                //仪表盘详情，用于显示数据。
                detail: {
                  show:true,
                  offsetCenter: [0, "40%"],
                  color: "#fff",
                  formatter: function(params) {
                    return params;
                  },
                  textStyle: {
                    fontSize: 18,
                    fontWeight: "bold"
                  }
                },
                data: [
                  {
                    show:false,
                    name: "温馨提示：可以正常在\n户外运动，易敏感人群\n减少外出",
                    value: 28,
                    textStyle: {
                      fontSize: 18
                    }
                  }
                ]
              }
            ]};
          
          let gdpOption = {
            title: {
              text: "森林面积及覆盖率",
              textStyle: {
                color: "#fff"
              }
            },
            color: ["#ff9a32", "#ffe354"],
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "13%",
              top: "27%",
              containLabel: true,
              borderColor: "#fff"
            },
            legend: {
              itemWidth: 14,
              itemHeight: 5,
              itemGap: 1,
              data: ["森林面积（千公顷）", "森林覆盖率"],
              x: "0",
              y: "90%",
              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: [43.6, 45.2, 45.7, 45.7, 46.3]
              },
              {
                name: "森林面积（千公顷）",
                type: "bar",
                data: [407.3, 421.51, 430.18, 430.49, 437.9]
              }
            ]
          };
  
          let outInOption = {
            title: {
              text: "公园面积及个数",
              textStyle: {
                color: "#fff"
              }
            },
            color: ["#ffe354", "#ff9a32"],
            legend: {
              icon: "rect",
              itemWidth: 14,
              itemHeight: 5,
              itemGap: 1,
              data: ["公园面积（公顷）", "公园个数"],
              x: "0",
              y:'90%',
              textStyle: {
                fontSize: 12,
                color: "#fff"
              }
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "13%",
              top: "22%",
              containLabel: true,
              borderColor: "#fff"
            },
            xAxis: [
              {
                type: "category",
                data: ["2013","2014","2015", "2016", "2017"],
                axisTick: {
                  alignWithLabel: true
                },
                axisLine: {
                  lineStyle: {
                    color: "#ffffff"
                  }
                }
              }
            ],
            yAxis: [
              {
                type: "value",
                splitLine: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: "#ffffff"
                  }
                }
              },
              {
                type: "value",
                position: "right",
                max:500,
                splitLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: "#ffffff"
                  }
                },
                axisLabel: {
                  show: true,
                  formatter: "{value}", //右侧Y轴文字显示
                  textStyle: {
                    color: "#fff"
                  }
                }
              }
            ],
            series: [
              {
                name: "公园面积（公顷）",
                type: "bar",
                barWidth: "40%",
                data: [2364, 3260.32, 2999.49, 3546.44,3666.35],
              },{ 
                name: "公园个数",
                type: "bar",
                barWidth: "40%",
                yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                data: [117,134,141,161,378],
                barGap:"-100%"
              }
            ]
          };
  
          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: ["2013","2014","2015", "2016", "2017"],
                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, 100, 100]
              }
            ]
          };
  
          let xiaofeiOption = {
            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
                },
                axisLine: {
                  lineStyle: {
                    color: "#ffffff"
                  }
                }
              }
            ],
            series: [
              {
                name: "天数(天)",
                type: "bar",
                barWidth: "40%",
                data: [341, 293, 322, 309, 282]
              }
            ]
          };
  
          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 gongshangChart = echarts.init(document.querySelector("#gongshang"));
          let noChart = echarts.init(document.querySelector("#no-nongdu"));
          let pmChart = echarts.init(document.querySelector("#pm-nongdu"));
          let soChart = echarts.init(document.querySelector("#so-nongdu"));
  
          gdpChart.setOption(gdpOption);
          outInChart.setOption(outInOption);
          addValChart.setOption(addValOption);
          xiaofeiChart.setOption(xiaofeiOption);
          gongshangChart.setOption(gongshangOption);
          noChart.setOption(noOption);
          pmChart.setOption(pmOption);
          soChart.setOption(soOption);
  
        })();
        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('environmentClickHandle',index);
            window.environmentClickHandle && window.environmentClickHandle(index)
          })
        })
     </script>
  </body>
</html>