vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue Echarts柱形图

Vue Echarts实现柱形图从右向左滚动效果

作者:amoureux555

这篇文章主要为大家详细介绍了Vue如何利用Echarts实现柱形图从右向左滚动的效果,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下

效果图

实现代码

vue2 代码如下

<!-- 横向柱状图测试结果 -->
<template>
  <div>
    <h3>横向柱状图测试</h3>
    <div style="width: 500px; height: 500px; background-color: antiquewhite">
      <div id="heng" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script>
// import * as echarts from 'echarts';

export default {
  name: "hengzhu",
  data() {
    return {
      // data: [1000, 800, 600, 500, 540, 1100, 528, 55, 66, 588, 980, 563, 578, 154, 55, 66, 55, 66, 452, 652]
      // data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000]
      data: [
        2000, 1900, 1800, 1700, 1600, 1500, 1400, 1300, 1200, 1100, 1000, 900,
        900, 800, 700, 600, 500, 400, 300, 200,
      ],
      start: 0,
      end: 5,
    };
  },
  created() {
    this.dingshi();
  },
  mounted() {
    this.heng();
    // this.dingshi();
  },
  methods: {
    heng() {
      // let that = this;
      // alert("执行");

      let chartDom = document.getElementById("heng");
      let myChart = this.$echarts.init(chartDom);
      let option = {
        title: {
          text: "World Population",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // xAxis: {
        yAxis: {
          type: "value",
          // boundaryGap: [0, 0.01]    // 柱图距离边界的距离
        },
        // yAxis: {
        xAxis: {
          type: "category",
          inverse: false, // ture: 从上到下显示, 默认:从下到上显示,下面的数值会跟着变动
          data: [
            "aa",
            "bb",
            "cc",
            "dd",
            "ee",
            "ff",
            "gg",
            "hh",
            "ii",
            "jj",
            "kk",
            "ll",
            "mm",
            "nn",
            "oo",
            "pp",
            "qq",
            "rr",
            "ss",
            "tt",
          ],
        },
        dataZoom: {
          type: "inside", // inside: 表示用内测滑块
          startValue: this.start, // 开始显示的数
          endValue: this.end, // 结束显示的数
          xAxisIndex: [0], // 代表是作用在y轴上的
          // yAxisIndex: [0], // 代表是作用在y轴上的
          // start: '10',
          // end: '1'
          // zoomLock: true,
          zoomOnMouseWheel: false, // 关闭滚轮缩放
          moveOnMouseWheel: true, // 开启滚轮平移
          moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
        },
        series: [
          {
            type: "bar",
            // realtimeSort: true,   // 这个可以与 yAxis-inverse 配合,让数据正序显示还是逆序显示
            data: this.data,
          },
        ],
      };
      myChart.setOption(option);
      // setInterval(function () {
      //   this.data = [1000, 800, 600, 500, 540, 1100, 528, 55, 66, 588, 980, 563, 578, 154, 55, 66, 55, 66, 452, 1200]
      // }, 2000)
    },

    /** 定时跳动 */
    dingshi() {
      let that = this;
      setInterval(function () {
        if (that.end == that.data.length) {
          that.start = 0;
          that.end = 5;
        } else {
          that.start = that.start + 1;
          that.end = that.end + 1;
        }
        that.heng();
      }, 3000);
    },
  },
};
</script>

<style scoped></style>

到此这篇关于Vue Echarts实现柱形图从右向左滚动效果的文章就介绍到这了,更多相关Vue Echarts柱形图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文