map.html 13.3 KB

原文件审查历史永久链接

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/assets/web/home/css/index.css" />
    <title>map</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-echarts/4.0.2/vue-echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="top">
        <div class="title">云旅店智慧大屏</div>
      </div>
      <div class="box">
        <div class="left">
          <div class="first_chart">
            <div class="chart_title">烟感报警设备</div>
            <div
              id="main"
              style="width: 360px; height: 250px; margin: auto"
            ></div>
          </div>
          <div class="first_chart">
            <div class="chart_title">各区每周异常设备</div>
            <div class="echart_title">南斯港社区隐藏设备数量：25</div>
            <div class="list">
              <ul>
                <li class="date_time">天</li>
                <li class="date_week">周</li>
              </ul>
            </div>
            <div
              id="main1"
              style="
                width: 360px;
                height: 250px;
                margin: auto;
                position: relative;
                top: -30px;
              "
            ></div>
          </div>
          <div class="first_chart">
            <div class="chart_title">烟感累计报警器</div>
            <div
              id="main2"
              style="width: 480px; height: 200px; left: -85px"
            ></div>
          </div>
        </div>
        <div class="center">
          <div class="main_chart">
            <div class="chart_title">小镇地图</div>
            <div class="top_info">
              <div class="info_item">
                <div class="info_item_left">
                  <img src="img/1.png" alt="" />
                </div>
                <div class="word">
                  <span>设备重量</span>
                  <p>1245<b>只</b></p>
                </div>
              </div>
              <div class="info_item">
                <div class="info_item_left">
                  <img src="img/2.png" alt="" />
                </div>
                <div class="word">
                  <span>设备异常总量</span>
                  <p>124<b>只</b></p>
                </div>
              </div>
              <div class="info_item">
                <div class="info_item_left">
                  <img src="img/3.png" alt="" />
                </div>
                <div class="word">
                  <span>智能锁总量</span>
                  <p>1000<b>把</b></p>
                </div>
              </div>
              <div class="info_item">
                <div class="info_item_left">
                  <img src="img/4.png" alt="" />
                </div>
                <div class="word">
                  <span>智能锁故障总量</span>
                  <p>12<b>把</b></p>
                </div>
              </div>
            </div>
            <div id="map">
              <img src="img/map.jpg" alt="" />
            </div>
            <div id="alertBox">
              <p class="alertTitle">深港村</p>
              <div class="alertContent">
                <div class="boxLeft">
                  <span>250</span>
                  <p>设备总量</p>
                </div>
                <div class="boxRight">
                  <span>18</span>
                  <p>设备异常总量</p>
                </div>
                <div class="boxLeft">
                  <span>250</span>
                  <p>智能锁总量</p>
                </div>
                <div class="boxRight">
                  <span>2</span>
                  <p>智能锁故障总量</p>
                </div>
              </div>
            </div>
          </div>
          <div class="bottom_chart">
            <div class="chart_title">小镇入驻概况</div>
            <div
              id="main3"
              style="width: 700px; height: 380px; margin: auto"
            ></div>
          </div>
        </div>
        <div class="right">
          <div class="first_chart">
            <div class="chart_title">各区新入用户</div>
            <div class="selectlist">
              <span>南斯港社区</span>
              <img src="img/rent.png" alt="" />
            </div>
            <div
              id="main5"
              style="
                width: 360px;
                height: 250px;
                margin: auto;
                position: relative;
                top: -30px;
              "
            ></div>
          </div>
          <div class="first_chart">
            <div class="chart_title">智能设备故障统计</div>
            <div class="selectlist">
              <span>南斯港社区</span>
              <img src="img/rent.png" alt="" />
            </div>
            <div
              id="main4"
              style="width: 400px; height: 200px; top: 10px"
            ></div>
            <div class="circle"></div>
            <p class="number1">120<span>占比40%</span></p>
            <p class="number2">300</p>
          </div>
          <div class="first_chart">
            <div class="chart_title">代办事项</div>
            <div class="cardList">
              <div class="card">
                <img src="img/5.png" alt="" />
                <p>241<span>只</span></p>
                <b>设备异常总量</b>
              </div>
              <div class="card">
                <img src="img/6.png" alt="" />
                <p>58<span>把</span></p>
                <b>智能锁故障总量</b>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      var option = {
        color: ["#2ab7fe", "#15ebc9"],
        tooltip: {},
        legend: {
          data: ["销量", "数量"],
          textStyle: {
            color: "#2ab7fe",
          },
        },
        xAxis: {
          data: ["6-7", "6-8", "6-9", "6-10", "6-11", "6-12", "6-13"],
          axisLabel: {
            color: "#2ab7fe",
          },
        },
        yAxis: {
          name: "（次）",
          nameLocation: "end",
          nameTextStyle: {
            color: "#2ab7fe",
          },
          axisLabel: {
            color: "#2ab7fe",
          },
        },
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20, 30],
            stack: "x",
          },
          {
            name: "数量",
            type: "bar",
            data: [10, 20, 6, 30, 18, 20, 16],
            stack: "x",
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById("main1"));
      option = {
        color: ["#2ab7fe", "#15ebc9"],
        xAxis: {
          type: "category",
          data: ["6-7", "6-8", "6-9", "6-10", "6-11", "6-12", "6-13"],
          axisLabel: {
            color: "#2ab7fe",
          },
        },
        yAxis: {
          type: "value",
          name: "（只）",
          nameLocation: "end",
          nameTextStyle: {
            color: "#2ab7fe",
          },
          axisLabel: {
            color: "#2ab7fe",
          },
        },
        series: [
          {
            data: [50, 32, 60, 30, 38, 75, 63],
            type: "line",
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
    <script type="text/javascript">
      var chartDom = document.getElementById("main2");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        color: [
          "#503eff",
          "#74c9ff",
          "#2b8fff",
          "#ff7e28",
          "#15e6a2",
          "#fb0942",
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical", //垂直显示
          y: "center", //延Y轴居中
          x: "right", //居右显示
          data: [
            "群星村",
            "平安村",
            "双兵村",
            "陈濠里社区",
            "南杨村",
            "溪港村",
          ],
          textStyle: {
            color: "#2ab7fe",
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["30%", "60%"],
            labelLine: {
              length: 30,
            },
            data: [
              { value: 40, name: "群星村" },
              { value: 15, name: "陈濠里社区" },
              { value: 20, name: "双兵村" },
              { value: 10, name: "平安村" },
              { value: 5, name: "南杨村" },
              { value: 10, name: "溪港村" },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    </script>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main3"));

      // 指定图表的配置项和数据
      var option = {
        color: ["#2ab7fe", "#15ebc9"],
        tooltip: {},
        legend: {
          data: ["出租", "总用户"],
          textStyle: {
            color: "#2ab7fe",
          },
        },
        xAxis: {
          axisLabel: {
            color: "#2ab7fe",
            //  让x轴文字方向为竖向
            interval: 0,
            formatter: function (value) {
              return value.split("").join("\n");
            },
          },
          data: [
            "万心村",
            "群星村",
            "金联村",
            "平安村",
            "双兵村",
            "南斯竿社区",
            "平安村",
            "龙南村",
            "陈濠里社区",
            "南杨村",
            "溪港村",
          ],
        },
        yAxis: {
          name: "（户）",
          nameLocation: "end",
          nameTextStyle: {
            color: "#2ab7fe",
          },
          axisLabel: {
            color: "#2ab7fe",
          },
        },
        series: [
          {
            name: "出租",
            type: "bar",
            data: [40, 50, 40, 60, 50, 40, 55, 57, 36, 50, 40],
            stack: "x",
          },
          {
            name: "总用户",
            type: "bar",
            data: [20, 20, 25, 20, 20, 18, 20, 25, 22, 24, 40],
            stack: "x",
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
    <script>
      var chartDom = document.getElementById("main4");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        color: ["#2ab7fe", "#15ebc9"],
        tooltip: {},
        legend: {
          orient: "vertical", //垂直显示
          y: "center", //延Y轴居中
          x: "45%", //居右显示
          itemGap: 50,
          data: ["该区域智能锁设备故障重量", "该区域智能锁设备总量"],
          textStyle: {
            color: "#fff",
            fontSize: 14,
            fontWeight: 800,
          },
        },

        series: [
          {
            // name: "半径模式",
            type: "pie",
            radius: [20, 70],
            center: ["25%", "50%"],
            roseType: "radius",
            itemStyle: {
              borderRadius: 5,
            },
            label: {
              show: false,
            },
            data: [
              { value: 50, name: "该区域智能锁设备故障重量" },
              { value: 30, name: "该区域智能锁设备总量" },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    </script>
    <script>
      var myChart = echarts.init(document.getElementById("main5"));
      option = {
        color: ["#15ebc9", "#2ab7fe"],
        xAxis: {
          type: "category",
          data: ["6-7", "6-8", "6-9", "6-10", "6-11", "6-12", "6-13"],
          axisLabel: {
            color: "#2ab7fe",
          },
        },
        yAxis: {
          name: "（人）",
          nameLocation: "end",
          nameTextStyle: {
            color: "#2ab7fe",
          },
          data: ["0", "20", "40", "60", "80", "100"],
          type: "value",
          axisLabel: {
            color: "#2ab7fe",
          },
        },
        series: [
          {
            data: [50, 32, 60, 30, 38, 75, 63],
            type: "line",
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
    <!-- map -->
    <script>
     $(document).ready(function(){
      $("#map").click(function(){
        $("#alertBox").toggle();
      });
    });
    </script>
  </body>
</html>