vue echarts 柱状图 自动循环 x轴竖向显示

根据echarts官网案例   加上找到的demo做再次修改  实现：

建立一个简单的柱状图  设置宽高 

  <el-col :span="24" :style="{ height: height + 'px' }">
    <div id="barEchrats" :style="{ width: '100%', height: '100%' }"></div>
  </el-col>复制

想要做成组件  所以数据做了props

  props: {
    xData: {
      type: Array,
    },
    yData: {
      type: Array,
    },
  },复制

没有调用到props 在data做初始化假数据

data() {
    return {
      height: window.innerHeight / 3,
      xAxisData: [],
      xProgram: [
        10, 22, 28, 43, 49, 10, 22, 28, 43, 49, 10, 22, 28, 43, 49, 10, 22, 28,
        43, 49, 10, 22, 28, 43, 49,
      ], // 横轴数据
      yProgram: [
        5, 4, 3, 5, 10, 5, 4, 3, 5, 10, 5, 4, 3, 5, 10, 5, 4, 3, 5, 10, 5, 4, 3,
        5, 10, 5, 4, 3, 5, 10,
      ], // 竖轴数据
    };
  },复制

建立初始化方法 

  mounted() {
    // 初始化
    this.initCharts();
  },复制

 this 会随着上下文环境而变换它的指向，在当前作用域中设置一个变量用来存储 this 可以防止在其他地方找不到 this 的错误。

  initCharts() {
      
      let that = this;
      // id获取元素
      const chartDom = document.getElementById("barEchrats");
 
      // 全局引用的方式
      var myChart = echarts.init(chartDom);
 
      let option = {
        color: [
          "#5cc99e",
          "#409af7",
          "#f8cd46",
          "#fa4da9",
          "#faa346",
          "#df5259",
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        grid: {
          left: "10%",
          right: "10%",
        },
        legend: {
          top: "10",
          itemWidth: 12.5,
          itemHeight: 12.5,
          data: [
            {
              name: "项目一",
              // 强制设置图形为圆。
              textStyle: {
                color: "rgba(0, 0, 0, 0.7)",
              },
            },
            {
              name: "项目二",
              // 强制设置图形为圆。
              textStyle: {
                color: "rgba(0, 0, 0, 0.7)",
              },
            },
          ],
        },
     
        xAxis: {
          axisTick: { show: false },
          axisLabel: {
            textStyle: { color: "rgba(0, 0, 0, 0.7)", fontSize: 14 },
            interval: 0,
            formatter: function (value, index) {
              return value.split("").join("\n");
            },
          },
 
          data: [
            "横向1",
            "横向2",
            "横向3",
            "横向4",
            "横向5",
            "横向1",
            "横向2",
            "横向3",
            "横向4",
            "横向5",
            "横向1",
            "横向2",
            "横向3",
            "横向4",
            "横向5",
            "横向1",
            "横向2",
            "横向3",
            "横向4",
            "横向5",
            "横向1",
            "横向2",
            "横向3",
            "横向4",
            "横向5",
          ], // 底部坐标轴
        },
        yAxis: [
          {
            axisLabel: {
              textStyle: { color: "rgba(0, 0, 0, 0.7)"  },
              formatter: function (value, index) {
                return value;
              },
            },
            axisTick: { show: false },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#14ABDF",
                opacity: "0.15",
              },
            },
            boundaryGap: [0, 0.1],
          },
          {
            axisLabel: {
              textStyle: { color: "rgba(255, 255, 255, 0.7)", fontSize: 14 },
              formatter: function (value, index) {
                return value + "%";
              },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#14ABDF",
                opacity: "0.15",
              },
            },
            boundaryGap: [0, 0.1],
          },
        ],
        series: [
          {
            name: "项目一", // 最上方
            data: that.xProgram,
            type: "bar",
          },
          {
            name: "项目二",
            data: that.yProgram,
            type: "bar",
          },
        ],
      };
 
     
      // 绘制图表
      if (option && typeof option === "object") {
        myChart.setOption(option);
      } // 此处仍需要再绘制一次，否则会出现第一个数据不显示的问题
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },复制

x轴label竖向显示

 formatter: function (value, index) {
              return value.split("").join("\n");
            },复制

 实现滑动

dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

现在支持这几种类型的 dataZoom 组件：

• 内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。

• 滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。

• 框选型数据区域缩放组件（dataZoomSelect）：提供一个选框进行数据区域缩放。即 toolbox.feature.dataZoom，配置项在 toolbox 中。

  // 滑动
        dataZoom: [
          {
            type: "inside",
            xAxisIndex: [0],
            show: false,
            startValue: 0, // 从头开始
            endValue: 5, // 一次性展示几个
          },
        ],复制

实现循环效果 

可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 或 dataZoom.radiusAxisIndex 或 dataZoom.angleAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。

startValue  数据窗口范围的起始数值。

endValue数据窗口范围的结束数值

 setInterval(function () {
        // 每次向左滑动一个，最后一个从头开始。
        // console.log("option.dataZoom[0].endValue", option.dataZoom[0].endValue);
        // console.log("that.xProgram.length" + that.xProgram.length);
 
        if (option.dataZoom[0].endValue == that.xProgram.length) {
          option.dataZoom[0].startValue = 0;
          option.dataZoom[0].endValue = 3;
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        if (option && typeof option === "object") {
          myChart.setOption(option);
        }
      }, 3000);复制

运行效果