柱状图自动滚动,每次向后滚动一个,到最后一个结束后,从头开始。

eacharts柱状图自动滚动,结束后从头开始

主要代码:

dataZoom: [
          //滑动条
          {
            xAxisIndex: 0, //这里是从X轴的0刻度开始
            show: false, //是否显示滑动条,不影响使用
            type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 4, // 一次性展示几个。
          },
        ],
if (x.length > 0 && y.length > 0) {
        this.timechartes = setInterval(function () {
          // 每次向后滚动一个,最后一个从头开始。
          if (option.dataZoom[0].endValue == x.length) {
            option.dataZoom[0].endValue = 4;
            option.dataZoom[0].startValue = 0;
          } else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
          }
          myChart.setOption(option)
        }, 2000);
      }

完整代码:

 // 树状图 工人数量
    axisOption () {
      echarts.init(document.getElementById("axisMain")).dispose();//解决echarts dom已经加载的报错
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('axisMain'))
      // 若没有数据,则x轴依然显示
      const tableData1 = ["Management 管理", "Steel structure 钢结构", "Finishing 装修", "Civil 土建", "MEP 机电", "MISC 其他"]
      const x = this.tableData.x//x轴
      const y = this.tableData.y//y轴

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '8%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        dataZoom: [
          //滑动条
          {
            xAxisIndex: 0, //这里是从X轴的0刻度开始
            show: false, //是否显示滑动条,不影响使用
            type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 4, // 一次性展示几个。
          },
        ],
        xAxis: [
          {
            type: 'category',
            data: x.length && y.length > 0 ? x : tableData1, // 表数据,
            min: 0,
            // max: 4,
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              interval: 0,
              fontSize: `0.1rem`,
              // rotate: 45,
              formatter: function (value, index) {
                const b = value.split(' ')
                if (b.length > 2) {
                  return b[0] + ' ' + b[1] + '\n\n' + b[2]
                } else {
                  const a = value.replace(' ', '\n\n')
                  return a
                }
              },
              color: '#6861a6'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#e0e6f1'
              }
            }
          }
        ],
        yAxis: {
          type: 'value',
          splitLine: false,
          splitNumber: 3,
          splitArea: {
            show: true,
            areaStyle: {
              color: ['#f7f7ff', 'rgba(250,250,250,0.3)']
            }
          },//斑马纹背景
          // y轴的字体样式
          axisLabel: {
            show: true,
            color: '#5266c0',
            fontSize: `0.13rem`,
          },
          // y轴的颜色和宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: '#e0e6f1'
            }
          }
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            data: y,
            barWidth: '20%',
            barGap: '10%',/*多个并排柱子设置柱子之间的间距*/
            itemStyle: {
              borderRadius: 20,
              color: function (params) {
                if (params.dataIndex % 2 === 0) {
                  return (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 1,
                    color: '#a8aeff'
                  },
                  {
                    offset: 0,
                    color: '#97b0ff'
                  }
                  ]))
                }
                return (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 1,
                  color: '#6d8ee3'
                },
                {
                  offset: 0,
                  color: '#3d48a6'
                }
                ]))
              }
            }
          }
        ]
      }
      if (x.length > 0 && y.length > 0) {
        this.timechartes = setInterval(function () {
          // 每次向后滚动一个,最后一个从头开始。
          if (option.dataZoom[0].endValue == x.length) {
            option.dataZoom[0].endValue = 4;
            option.dataZoom[0].startValue = 0;
          } else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
          }
          myChart.setOption(option)
        }, 2000);
      }

      // 绘制图表
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐