echarts如何做出多条进度条的效果_助农电商平台用弹性盒子做echarts(2)

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。

如果你需要这些资料，可以戳这里获取

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

/**

• 加载柱状图

• */
  RegionDistribution.prototype.loadBarData = function (id, currentPage) {
  // 截取所有数据，数组起始位置和终止位置
  var end = this._regions.length, start = (currentPage - 1) * 8;
  if (currentPage * 8 < this._regions.length) {
  end = currentPage * 8;
  }

  // 获取当前页展示数据
  var region = this._regions.slice(start, end),
  policeNum = this._policeNums.slice(start, end),
  criminalNum = this._criminalNums.slice(start, end);

  // 若末尾页不足8条，则填充0，防止样式错乱
  var len = region.length;
  for (var i = 0; i < 8 - len; i++) {
  region.unshift(0);
  policeNum.unshift(0);
  criminalNum.unshift(0);
  }

  // 初始化echarts元素大小
  var objHtml = document.getElementById(id);
  objHtml.style.width = objHtml.parentElement.offsetWidth + “px”;
  objHtml.style.height = objHtml.parentElement.offsetHeight + “px”;

  // echarts数据绑定开始
  var totalScoreCount = echarts.init(objHtml);
  var option = {
  color: [“#f5a623”, “#fff”],
  grid: [{//外框
  top: ‘6%’,
  left: ‘0’,
  right: ‘0’,
  bottom: ‘3%’,
  containLabel: false,
  }],
  calculable: true,
  tooltip: {
  trigger: ‘axis’
  },
  xAxis: [{
  type: ‘value’,
  splitLine: {show: false},
  axisLabel: {show: false},
  axisTick: {show: false},//不显示刻度
  axisLine: {show: false},
  boundaryGap: false,//坐标轴两边留白策略
  }],
  yAxis: [{
  type: ‘category’,
  boundaryGap: false,
  position: ‘top’,
  data: region,
  splitLine: {show: false},
  axisLabel: {show: false},
  axisTick: {show: false},//不显示刻度
  axisLine: {show: false},
  }],
  series: [
  {
  type: ‘bar’,
  data: policeNum,
  barWidth: 2,
  },
  {
  type: ‘bar’,
  data: criminalNum,
  barWidth: 2,
  barGap: ‘5px’
  }
  ]
  };
  totalScoreCount.setOption(option);//图表填充加载
  }

/**

• 定时翻页 5秒一次

• @param obj 组件对象

• @param count 总条目(param._count)

• @param screenNum 屏幕显示个数

• @author 刘欣
  */
  RegionDistribution.prototype.pagePlay = function (obj, count, screenNum, intervalTime) {
  var that = this;
  clearInterval(obj.timer);
  if (count > screenNum) {
  var pageCount = count; // 总页数
  if (pageCount % screenNum == 0) { // 获取总页数
  pageCount = pageCount / screenNum;
  } else {
  pageCount = parseInt(pageCount / screenNum) + 1;
  }
  var curPage = 1; // 当前页数
  if (count > screenNum) {
  obj.timer = setInterval(autoPaly, intervalTime); // 定时开始
  }

   function autoPaly() { // 定时函数
       curPage++;
       if (curPage > pageCount) {
           curPage = 1;
       }
       obj.goPage(curPage);
       that.loadBarData("regionDistributionBar", curPage);
   }
  
   obj.getHTML().onmouseenter = function () { // 鼠标进入，定时暂停
       clearInterval(obj.timer);
   };
  
   obj.getHTML().onmouseleave = function () { // 鼠标移开，定时继续
       obj.timer = setInterval(autoPaly, intervalTime);
   };
  
   obj.getHTML().nextElementSibling.onmouseenter = function () { // 鼠标进入，定时暂停
       clearInterval(obj.timer);
   };
  
   obj.getHTML().nextElementSibling.onmouseleave = function () { // 鼠标移开，定时继续
       obj.timer = setInterval(autoPaly, intervalTime);
   };
  

  }
  }

js是在现有的组件上进行处理的，直接拿来可能无法使用，需要自行处理，css部分内容太长，若有需要，可联系本人


菜鸟献丑，欢迎各位指正或留言交流


 



**收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。**
![img](https://img-blog.csdnimg.cn/img_convert/b34568057962d360377793250e525ba7.png)
![img](https://img-blog.csdnimg.cn/img_convert/7fbb1911ca6dcd9d404220b79b5a91e3.png)

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618679757)**

**需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**

**都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

757)**

**需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**

**都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**