earchs 柱状图无缝滚动

最新推荐文章于 2024-05-21 14:50:22 发布

reahcriy

最新推荐文章于 2024-05-21 14:50:22 发布

阅读量196

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/lln_1211/article/details/130808768

版权

<!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">
  <title>eCharts 无缝滚动</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      padding: 20px;
      background: #222;
      font-size: 0;
    }

    .chartBox {
      width: 700px;
      height: 400px;
      background: #fff;
    }
  </style>
</head>

<body>

  <div id="chartBox" class="chartBox"></div>



  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.common.min.js"></script>
  <script>
    $(function () {
      var data = {
        names: [
          'zs', 'ls', 'ww', 'zl', 'ln',
        ],
        series: [{
          data: [
            20, 25, 30, 35, 40, 
            ],
        },

		],
      };
      chartFun($('#chartBox'), data);

      function chartFun(dom, chartData, time) {
        var chart = echarts.init(dom.get(0));
        var chartOptions = {
   
          grid: {
            top: "13%",
            bottom: "5%",
            left: "5%",
            right: "8%",
            containLabel: true
          },
          yAxis: [{
         
            type: 'category',
            data: []
          }],
          xAxis: [{
            type: 'value',
            scale: true,
            min: 0,
          
          }],
          series: [
          {
           
            type: 'bar',
            data: []
          }]
        };

        var maxIndex = 3, // 最大显示个数
          curIndex = 0; // 当前显示的第一项下标

        setInter();

        function setInter() {
          var ops = {
              names: [],
              series: [{
                  data: []
                },
              ]
            },
          leng = chartData.names.length,
            
          isIntval = leng > maxIndex;

          maxIndex = isIntval ? maxIndex : leng;

          for (var i = curIndex; i < curIndex + maxIndex; i++) {

            var j = i >= leng ? i - leng : i;

            ops.names.push(chartData.names[j]);

            ops.series[0].data.push(chartData.series[0].data[j]);

            

          }
          chartOptions.yAxis[0].data = ops.names;
          ops.series.map(function (item, index) {
            chartOptions.series[index].data = item.data;
          });
          console.log(chartOptions);
          chart.setOption(chartOptions);

          if (isIntval) {

            setTimeout(function () {

              curIndex = curIndex >= leng ? 0 : curIndex;

              curIndex++;

              setInter();

            }, 3000);
            
          }
        }

      }

    });
  </script>
</body>

</html>