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

Posted 2022-11-29 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