echarts5.0使用动态柱形图用定时器限定次数vue

Posted 2021-12-05 Afololer

<style scoped>
  #chart_example{
    width: 50%;
    height: 500px;
  }
</style>
<template>
  <div  >
    <h2>vue中插入Echarts示例</h2>
    <div id="chart_example">

    </div>

  </div>
</template>
<script>
  import * as echarts from 'echarts'
  //import world from '../node_modules/echarts/map/js/world.js'
  // import '../../node_modules/echarts/map/js/china.js' // 引入中国地图数据

  export default {
    data() {
      return {}
    },

    mounted() {
      let cnt = 0
      var timeData = [];
      var now = new Date("February 27, 2020 11:13:00");
      Date.prototype.getMonthDay = function(){
        return (this.getMonth() + 1) + '.' + this.getDate();
      }
      timeData.push(now.getMonthDay());
      for(var i = 0 ; i < 2 ; i ++){
        now.setDate(now.getDate() + 1);

        timeData.push(now.getMonthDay())
      }
      const data = [];
      for (let i = 0; i < 5; ++i) {
        data.push(Math.round(Math.random() * 200));
      }
      let myChart = echarts.init(document.getElementById('chart_example'),'dark');

      let option = {
                xAxis: {
                  max: 'dataMax'
                },
                yAxis: {
                  type: 'category',
                  data: ['A', 'B', 'C', 'D', 'E'],
                  inverse: true,
                  animationDuration: 300,
                  animationDurationUpdate: 300,
                  max: 2 // only the largest 3 bars will be displayed
                },
                series: [
                  {
                    realtimeSort: true,
                    name: 'X',
                    type: 'bar',
                    data: data,
                    label: {
                      show: true,
                      position: 'right',
                      valueAnimation: true
                    }
                  }
                ],
                legend: {
                  show: true
                },
                animationDuration: 0,
                animationDurationUpdate: 3000,
                animationEasing: 'linear',
                animationEasingUpdate: 'linear'
              };
      function run() {
        for (var i = 0; i < data.length; ++i) {
          if (Math.random() > 0.9) {
            data[i] += Math.round(Math.random() * 2000);
          } else {
            data[i] += Math.round(Math.random() * 200);
          }
        }
        myChart.setOption({
          series: [
            {
              type: 'bar',
              data
            }
          ]
        });
      }
      setTimeout(function () {
        run();
      }, 0);
      // function sleep(millisecond) {
      //   return new Promise(resolve => {
      //     setTimeout(() => {
      //       resolve()
      //     }, millisecond)
      //   })
      // }
     //alert(timeData.length)
      let myvar = setInterval(function () {
        if(cnt>timeData.length)
        {
          clearInterval(myvar)
        }

        run();
        cnt++;
      }, 3000); //次数为timeData的长
      myChart.setOption(option)

      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize',function() {myChart.resize()});
    },
    methods: {},
    watch: {},
    created() {

    }

  }
</script>

可以根据指定天数动态更新数据

注意
使用时如果echarts不是5.0版本，要升级到5.0
同时

import echarts from "echarts";

更换为

  import * as echarts from 'echarts'

由于是动态的，无法截图，可以参考官方示例
https://echarts.apache.org/examples/zh/editor.html?c=bar-race