实现echarts y轴是分类,x轴是数据的柱形图 多条数据时滚动显示

实现echarts y轴是分类,x轴是数据的柱形图 多条数据时滚动显示

水平方向的柱形图, y轴是分类,x轴是数据的柱形图 多条数据时滚动显示

<template>
  <div class="barEcharts" id="barEcharts" style="width: 100%; height: 400px"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      timer: null,
    };
  },
  methods: {
    // 数据
    getTestData(res) {
      let myChart = echarts.init(document.getElementById("barEcharts"));
      clearInterval(this.timer);
      const option = {
        tooltip: {
          trigger: "axis",
          formatter: "{c}%",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: false,
        },
        grid: {
          left: "1%",
          right: "20%",
          containLabel: true, // 保证label不会被挤掉
        },
        xAxis: {
          max: 100,
          min: 0,
          type: "value",
          boundaryGap: [0, 0.01],
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "#fff",
              margin: 15,
            },
            formatter: "{value} %", //y轴的每一个刻度值后面加上‘%’号
          },
          splitLine: {
            lineStyle: {
              color: "rgba(107,255,252,0.29)",
            },
          },
        },
        dataZoom: [
          //滑动条
          {
            yAxisIndex: 0, //这里是从X轴的0刻度开始
            show: false, //是否显示滑动条，不影响使用
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 6, // 一次性展示6个。
          },
        ],
        yAxis: {
          type: "category",
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "#fff",
              margin: 15,
            }
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            //y轴线的颜色以及宽度
            lineStyle: {
              color: "blue",
              width: 1,
              type: "solid",
            },
          },
          splitLine: {
            lineStyle: {
              color: "gray",
            },
          },
          data: ['A','B','C', 'D', 'E', 'F', 'G', 'H', 'I'],
        },
        series: [
          {
            name: "test",
            type: "bar",
            barWidth: 14,
            data: [10, 20, 30, 40, 50, 60, 70, 80, 90],
            itemStyle: {
              color: 'red'
            },
            label: {
              show: true,
              position: "right",
              color: "#ffffff",
              formatter: "{c}%",
            },
          },
        ],
      };


        this.timer = setInterval(function () {
          // 每次向后滚动一个，最后一个从头开始。
          if (option.dataZoom[0].endValue == res.processNames.length) {
            option.dataZoom[0].endValue = 6;
            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);
        }, 5000);
      
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    }
  }
};
</script>