Vue Echarts实现带滚动效果的柱形图

这篇文章主要为大家详细介绍了Vue Echarts实现带滚动效果的柱形图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Vue Echarts实现带滚动效果柱形图的具体代码，供大家参考，具体内容如下

代码

<template>
  <div class="timeLineview">
    <div v-bind:style="{ height: heightData + 'px' }" ref="categoryChart"></div>
    <div v-bind:style="{ height: noHeight + 'px' }" class="nomore">
      {{ noData }}
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  components: {},
  name: "timeLine",
  props: {
    question: {}
  },
  data() {
    return {
      datainfo: [],
      datatitle: [],
      chart: null,
      heightData: 300,
      noHeight: 0,
      noData: ""
    };
  },
  methods: {
    resize() {
      this.chart.resize();
    },
    find() {
    //获取数据
      if (this.question) {
        for (let index = 0; index < this.question.length; index++) {
          if (this.question[index].statValue > 0) {
          //y轴
            this.datainfo.push(this.question[index].statValue);
            //X轴
            this.datatitle.push(this.question[index].statLabel);
          }
        }
      }

      this.chart = echarts.init(this.$refs.categoryChart);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        title: {},
        legend: {},
        dataZoom: [
          {
            type: "slider",
            start: 0,
            end: (100 / this.datainfo.length) * 5   //显示五个
          },
          {
            type: "inside",
            start: 0,
            end: (100 / this.datainfo.length) * 5//显示五个
          }
        ],
        xAxis: {
          data: this.datatitle
        },
        yAxis: { minInterval: 1 },   //显示为整数 最小间距1
        series: [
          {
            type: "bar",
            name: "数量",
            data: this.datainfo,

            itemStyle: {
              color: "#77bef7"
            }
          }
        ]
      };
      this.chart.setOption(option);
      if (this.datainfo.length > 0) {
        this.heightData = 300;
      } else {
        this.heightData = 0;
        this.noHeight = 300;
        this.noData = "暂无数据";
      }
    }
  },
  mounted() {
    this.find();
  },
  created() {}
};
</script>

<style  lang="less" scoped>
.nomore {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}
</style>

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。

您可能感兴趣的文章:

• vue+echarts实现3D柱形图
• vue基于echarts实现立体柱形图
• vue使用echarts实现水平柱形图实例
• 使用D3.js+Vue实现一个简单的柱形图
• Vue使用Echarts实现立体柱状图
• vue echarts实现横向柱状图
• vue echarts实现柱状图动态展示
• vue+echarts实现堆叠柱状图
• 如何在vue 中使用柱状图 并自修改配置
• vue使用echarts实现立体柱形图