【博客大赛】echarts实现超过指定的数量进行轮播效果

原创

歆冉 2021-04-15 11:31:30 博主文章分类：Echarts ©著作权

文章标签 echarts js echarts实现超过指定的数量进行轮 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者歆冉的原创作品，请联系作者获取转载授权，否则将追究法律责任
【博客大赛】echarts实现超过指定的数量进行轮播效果
https://blog.51cto.com/u_11871779/2707865

# 在数据可视化项目中，我们经常需要用到一些图表展示，说到图表，肯定少不了echarts的使用

# 由于在实际的开发中，可能页面位置不够，但是数据量又比较多，这个时候我们可能就需要把图表进行滚动轮播展示，类似轮播图的效果，其实原理都是一个样子

# 比如说我们现在有这样一个需求：

## 1.当后端返回的数据为空，我们在界面上显示暂无数据（友好提示）

【博客大赛】echarts实现超过指定的数量进行轮播效果_echarts实现超过指定的数量进行轮

## 2.当后端返回的数据条数小于等于6条时，直接展示图表，不需要轮播

【博客大赛】echarts实现超过指定的数量进行轮播效果_echarts实现超过指定的数量进行轮_02

## 3.当后端返回的数据条数大于6条，我们就进行轮播，展示的区域显示为6条（此处为gif图片，是一个动图，但是好像显示不了）

【博客大赛】echarts实现超过指定的数量进行轮播效果_echarts_03

# 代码实现(完整代码直接copy显示效果，需要自己引入echarts库)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #main {
        position: relative;
        width: 400px;
        height: 400px;
        margin: 100px auto;
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <div id="main"></div>
    <script src="js/echarts.min.js"></script>
    <script>
      const oBox = document.getElementById('main')
      let myChart = echarts.init(oBox)
      // 2.需要显示的个数
      let start = 0,
        end = 6
      const barLen = end - start // 指定显示的长度(超过此长度就进行轮播, 没有超过此超度就不需要轮播, 直接展示即可)
      let newXData, newYData
      let len = 0 // 数据个数
      // 1.执行init方法
      init()
      // 2入口方法封装
      async function init() {
        const res = await getData()
        const xData = res.xData
        const yData = res.yData
        len = xData.length // 获取数据长度
        if(len) {
          // 有数据
          if(xData.length > barLen) {
            // 说明需要轮播
            newXData = xData.concat(xData) // x轴数据复制一份(和轮播图原理一样) 
            newYData = yData.concat(yData) // y轴数据复制一份(和轮播图原理一样)
            // 初始化图表
            initChart(newXData.slice(start, end), newYData.slice(start, end))
            // 自动进行轮播
            setInterval(autoPlay, 1000)
          } else {
            // 说明不需要轮播
            initChart(xData, yData)
          }
        } else {
          // 没有数据 -> 显示暂无数据(友好提示)
          initChart([], [])
        }
      }
      // 3.封装自动轮播方法
      function autoPlay() {
        start++
        end++
        if (start === len) { // 临界值的判断和轮播、滑动一样的
          start = 0
          end = 6
        }
        const xT = newXData.slice(start, end)
        const yT = newYData.slice(start, end)
        initChart(xT, yT)
      }
      
      // 4.封装初始化图表方法
      function initChart(xData, yData) {
        if(!myChart) {
          myChart = echarts.init(oBox)
        }
        if(xData.length) {
          // 有数据
          const option = {
            color: ['#3398DB'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            yAxis: [
              {
                type: 'value'
              }
            ],
            xAxis: [
              {
                type: 'category',
                data: xData
              }
            ],
            series: [
              {
                name: '直接访问',
                type: 'bar',
                barWidth: '60%',
                data: yData
              }
            ]
          }
          myChart.setOption(option)
        } else {
          // 没有数据
          oBox.removeAttribute('_echarts_instance_')
          oBox.innerHTML =
          '<div class="no-data" style="text-align:center;font-size:30px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-weight: bold;">暂无数据</div>'
          // 同时 把myChart 置为空对象
          myChart = null
        }
      }
      // 5.获取数据方法
      function getData() {
        return new Promise((resolve, reject) => {
          const xData = []
          const yData = []
          // 模拟请求
          setTimeout(() => {
            for(let i = 0; i < 7;i++) {
              xData.push('类别' + i)
              yData.push(Math.round( Math.random() * 100) )
            }
            resolve({
              xData,
              yData
            })
          }, 1000)
        }) 
      }
    </script>
  </body>
</html>

# 代码说明

【博客大赛】echarts实现超过指定的数量进行轮播效果_echarts实现超过指定的数量进行轮_04