chenzhiguang
/
smartCity


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

  <body>
    <header class="title">
      <i class="iconfont icondiqiuyi"></i>
      经济创新
    </header>
    <div class="line"></div>
    <section class="s1">
      <div class="card">
        <div class="s-title"><h2>法人及产业活动单位数</h2></div>
        <div class="f-item">
          <p>法人单位数</p>
          <p class="emphasize">70533</p>
        </div>
        <div class="f-item">
          <p>产业活动单位数</p>
          <p class="emphasize">79544</p>
        </div>
      </div>
      <div class="card">
        <div class="s-title"><h2>规上企业</h2></div>
        <div class="f-item">
          <p>规模以上工业企业</p>
          <p class="emphasize">2112个</p>
        </div>
        <div class="f-item">
          <p>规模以下工业企业</p>
          <p class="emphasize">48608个</p>
        </div>
      </div>
      <div class="line"></div>
      <div class="card" style="height:180px;">
        <div class="s-title"><h2>科技发展</h2></div>
        <div class="f-item">
          <p>市属科学研究开发机构</p>
          <p class="emphasize">11家</p>
        </div>
        <div class="f-item">
          <p>高新技术企业数</p>
          <p class="emphasize">741家</p>
        </div>
        <div class="f-item">
          <p>省级科技计划项目</p>
          <p class="emphasize">9家</p>
        </div>
        <div class="f-item">
          <p>专利申请量</p>
          <p class="emphasize">17996件</p>
        </div>
      </div>
      <div class="card" style="height:180px;">
        <div class="s-title"><h2>规上企业R&D情况</h2></div>
        <div class="f-item">
          <p>R&D活动企业</p>
          <p class="emphasize">897家</p>
        </div>
        <div class="f-item">
          <p>R&D项目数</p>
          <p class="emphasize">3580个</p>
        </div>
        <div class="f-item">
          <p>R&D专利申请数</p>
          <p class="emphasize">4265个</p>
        </div>
        <div class="f-item">
          <p>R&D经费内部支出</p>
          <p class="emphasize">48.45亿元</p>
        </div>
        <div class="f-item">
          <p>R&D新产品产值</p>
          <p class="emphasize">1035.67亿元</p>
        </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" id="guding"></div>
      <div class="card" id="gongshang"></div>
    </section>

    <script src="js/echarts.min.js"></script>
    <script>
      (function() {
        let gdpOption = {
          title: {
            text: "年度GDP走势",
            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",
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: "#ffffff"
                }
              }
            }
          ],
          series: [
            {
              name: "GDP",
              type: "bar",
              barWidth: "40%",
              data: [2020.1263, 2104.7991, 2264.1883, 2444.0859, 2690.2505]
            }
          ]
        };

        let outInOption = {
          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: ["进口额", "出口额"],
            x: "60%",
            textStyle: {
              color: "#fff"
            }
          },
          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: [
            {
              position: "left",
              type: "category",
              axisTick: { show: false },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#ffffff"
                }
              },
              data: ["2013", "2014", "2015", "2016", "2017"]
            }
          ],
          series: [
            {
              name: "进口额",
              type: "bar",
              stack: "总量",
              label: {
                normal: {
                  show: false,
                  position: "right"
                }
              },
              data: [309.5884, 268.1925, 277.1032, 324.9113, 57.3362]
            },
            {
              name: "出口额",
              type: "bar",
              stack: "总量",
              label: {
                normal: {
                  show: false,
                  position: "left",
                  formatter: function(value) {
                    if (value.data < 0) {
                      return -value.data;
                    }
                  }
                }
              },
              data: [-1075.59, -993.5928, -954.6461, -926.8384, -140.0002]
            }
          ]
        };

        let addValOption = {
          title: {
            text: "规上工业增加值走势",
            textStyle: {
              color: "#fff"
            }
          },
          color: ["#ff9a32", "#ffe354"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            },
            position: "right"
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "13%",
            top: "20%",
            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: ["", 11, 8, 7, 10]
            },
            {
              name: "规模以上工业增加值（亿元）",
              type: "line",
              data: [696.9119, 847.2853, 965.7447, 1065.7959, 991.6795]
            }
          ]
        };

        let xiaofeiOption = {
          title: {
            text: "社会消费品零销总额走势",
            textStyle: {
              color: "#fff"
            }
          },
          color: ["#ffe354"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: "2%",
            right: "4%",
            bottom: "3%",
            top: "20%",
            containLabel: true
          },
          xAxis: [
            {
              type: "value",
              axisLine: {
                lineStyle: {
                  color: "#ffffff"
                }
              }
            }
          ],
          yAxis: [
            {
              // name:'(万/人)',
              position: "left",
              type: "category",
              axisTick: { show: false },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#ffffff"
                }
              },
              data: ["2013", "2014", "2015", "2016", "2017"]
            }
          ],
          series: [
            {
              name: "(亿元)",
              type: "bar",
              stack: "总量",
              label: {
                normal: {
                  show: false,
                  position: "right"
                }
              },
              data: [903.6984, 923.3509, 1034.309, 1159.0639, 1279.6336]
            }
          ]
        };

        let gudingOption = {
          title: {
            text: "固定资产投资走势",
            textStyle: {
              color: "#fff"
            }
          },
          color: ["#ff9a32"],
          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",
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: "#ffffff"
                }
              }
            }
          ],
          series: [
            {
              data: [1000.8418, 1111.6497, 1307.8743, 1517.7723, 1774.8348],
              type: "line",
              label: {
                show: false,
                position: "top",
                textStyle: {
                  color: "#fff",
                  fontSize: 10
                }
              }
            }
          ]
        };

        let gongshangOption = {
          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",
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: "#ffffff"
                }
              }
            }
          ],
          series: [
            {
              data: [158.03, 177.2, 199.01, 204.17, 222.37],
              type: "line"
            }
          ]
        };

        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("economicsClickHandle", index);
          window.economicsClickHandle && window.economicsClickHandle(index);
        });
      });
    </script>
  </body>
</html>