liyongli
/
jugou


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>图标</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/jquery-2.1.0.js"></script>
  </head>

  <body style="background: #000000">
    <div id="main"></div>
    <div id="line">
      <div id="Popup">
        <div class="time"></div>
        <div>流入：<span class="inflow">0.1</span></div>
        <div>流出：<span class="flowout">0.2</span></div>
        <div>收视率：<span class="ratings">0.3</span></div>
      </div>
    </div>
    <script src="./js/echarts.js"></script>
    <script type="text/javascript">
      $(function () {
        console.log(180 % 180);
        var time = 0;
        var datainit = canvas.dealdata();
        var i = 1;
        var now = new Date();
        canvas.draw(
          datainit[0][1],
          datainit[1][1],
          datainit[2][1],
          now.getTime()
        );
      });
      var page;
      var now = new Date();

      function curr(curr) {
        var datainit = canvas.dealdata();
        var old_page = page;
        page = Math.floor(curr / 180) + 1;
        if (curr > 0 && curr % 180 == 0) {
          page -= 1;
        }
        var start_time = now.getTime() + 180000 * (page - 1);
        if (old_page != page) {
          //todo 更新X轴
          canvas.draw(
            datainit[0][page],
            datainit[1][page],
            datainit[2][page],
            start_time
          );
        }
        if (Math.floor(curr / 180) != 0) {
          var p = curr - Math.floor(curr / 180) * 180;
        } else {
          var p = curr;
        }
        canvas.linemove(p);
      }

      var line1 = [
        0.004, 0.002, 0.0015, 0.005, 0.006, 0.0019, 0.006, 0.0014, 0.002,
        0.0013, 0.002, 0.002, 0.0015, 0.005, 0.006, 0.0019, 0.006, 0.0014,
        0.002, 0.0013, 0.002, 0.002, 0.0015, 0.005, 0.006, 0.0019, 0.006,
        0.0014, 0.002, 0.0013, 0.002, 0.002, 0.0015, 0.005, 0.006, 0.0019,
      ];
      var line2 = [
        389, 259, 262, 324, 232, 176, 196, 214, 389, 259, 262, 324, 232, 176,
        196, 214, 389, 259, 262, 324, 232, 176, 196, 214, 389, 259, 262, 324,
        232, 176, 196, 214, 389, 259, 262, 324,
      ];
      var line3 = [
        -121, -388, -233, -309, -133, -308, -297, -283, -121, -388, -233, -309,
        -133, -308, -297, -283, -121, -388, -233, -309, -133, -308, -297, -283,
        -121, -388, -233, -309, -133, -308, -297, -283, -121, -388, -233, -309,
      ];
      var canvas = {
        // 横线移动
        linemove: function (nowdate) {
          //传入的当前播放时间
          if (1.308 * (nowdate / 3) >= 60) {
            $("#Popup").animate({
              "margin-left": "-100px",
            });
          } else {
            $("#Popup").animate({
              "margin-left": "3px",
            });
          }
          $("#line").css({
            left: "" + 1.308 * (nowdate / 3) + "%", //比例乘以步长
          });
        },
        //处理数据
        dealdata: function () {
          var times = Math.ceil(line1.length / 13); //次数
          var line1obj = {};
          var line2obj = {};
          var line3obj = {};
          var start = 0;
          for (var i = 1; i <= times; i++) {
            line1obj[i] = line1.slice(start, 13 * i);
            line2obj[i] = line1.slice(start, 13 * i);
            line3obj[i] = line1.slice(start, 13 * i);
            start = 13 * i;
          }
          return (obj = [line1obj, line2obj, line3obj]); //返回数组对象
        },
        // X轴的值
        Xdata: function (time) {
          var arr = [];
          for (var i = 0; i < 13; i++) {
            var endtime = this.timeformate(time + 15000 * i);
            arr.push(endtime);
          }
          return arr;
        },
        //小时以下转换成时间戳
        hoursformate: function (s) {
          //传入时间格式为'9:51:43'
          var arr = s.split(":");
          var timechou =
            arr[0] * 60 * 60 * 1000 + arr[1] * 60 * 1000 + arr[2] * 1000;
          return timechou;
        },
        //传入时间戳格式化(包含年月日的)
        timeformate: function (times) {
          var time = new Date(times);
          hours = time.getHours();
          minutes = time.getMinutes();
          seconds = time.getSeconds();
          date = hours + ":" + minutes + ":" + seconds;
          return date;
        },
        //画图
        draw: function (line1, line2, line3, time) {
          var myChart = echarts.init(document.getElementById("main"));
          var itemStyle = {
            normal: {},
            emphasis: {
              barBorderWidth: 0.1,
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowColor: "rgba(0,0,0,0.5)",
            },
          };
          option = {
            backgroundColor: "rgba(0,0,0,.8)",
            legend: {
              data: ["流入", "流出", "收视率%"],
              bottom: "10%",
              left: "center",
              textStyle: {
                color: "#fff",
                fontSize: 12,
              },
            },
            title: {
              text: "流入/流出",
              left: 5,
              bottom: "13%",
              textStyle: {
                color: "#fff",
                fontSize: 12,
              },
            },
            tooltip: {
              show: true,
              trigger: "axis",
            },
            xAxis: {
              data: canvas.Xdata(time),
              position: "top",
              axisLine: {
                show: false,
                onZero: true,
              },
              splitLine: {
                show: false,
              },
              splitArea: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                rotate: -80,
                interval: 0,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            yAxis: [
              {
                type: "value",
                //name:'流入/流出',
                offset: -5,
                axisLine: {
                  show: false,
                },
                splitLine: {
                  show: false,
                },
                splitArea: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  textStyle: {
                    color: "#fff",
                  },
                },
                nameTextStyle: {
                  color: "#fff",
                },
              },
              {
                type: "value",
                scale: true,
                offset: -30,
                axisLine: {
                  show: false,
                },
                splitLine: {
                  show: false,
                },
                splitArea: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  textStyle: {
                    color: "#fff",
                  },
                },
                nameLocation: "middle",
                nameTextStyle: {
                  color: "#fff",
                },
              },
            ],
            grid: {
              left: "12%",
              width: "85%",
              height: "50%",
            },
            series: [
              {
                name: "流入",
                type: "bar",
                stack: "one",
                barWidth: 5,
                itemStyle: itemStyle,
                label: {
                  emphasis: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "#fff",
                      fontSize: 14,
                    },
                  },
                },
                data: line2,
              },
              {
                name: "流出",
                type: "bar",
                stack: "one",
                barWidth: 5,
                itemStyle: itemStyle,
                data: line1,
              },
              {
                name: "收视率%",
                type: "line",
                stack: "two",
                yAxisIndex: 1,
                itemStyle: itemStyle,
                data: line3,
              },
            ],
          };
          myChart.setOption(option);
          window.onresize = myChart.resize;
        },
      };
    </script>
  </body>
</html>