使用定时器，定时改变柱状图中的数据

冰晨之露

已于 2023-06-17 15:01:54 修改

阅读量224

点赞数

文章标签： echarts javascript ecmascript

于 2023-06-17 10:59:03 首次发布

本文链接：https://blog.csdn.net/lll19960406/article/details/131257978

版权

该代码示例展示了如何在Vue.js应用中全局引入Echarts库，创建一个动态更新的柱状图。数据来源于随机生成的数组，通过定时器实现每500毫秒更新一次图表内容，展示不同水果的价格变化。用户可以点击按钮重置或开始动画效果。

摘要由CSDN通过智能技术生成

以下代码需要在main.js中全局引入echarts文件

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

在运行以下代码即可

<template>
 <div style="width:800px;background:#fff;">
  	<div id="myChart" :style="{ width: '450px', height: '400px' }"></div>


	<p style="font-size:40px;color:#000;" type="button" @click="reset()">重新获取</p>
	<p style="font-size:40px;color:#000;" type="button" @click="updateYear()">开始</p>
 </div>
</template>
 
<script>
// import { ref, onMounted } from "vue";
// import * as echarts from "echarts";
 	export default {
 		data(){
			return{
				newArr:[],
				fruits:["苹果", "香蕉", "桔子", "芒果", "葡桃", "西瓜"],
				timell:null
			}
 		},
		methods:{
			price(){
				let num = [];
  				for (let i = 0, min = 5, max = 99; i < 6; i++) {
  				  num.push(Math.floor(Math.random() * (max + 1 - min) + min)); //取[min, max)之间的随机整数
  				}
  				return num;
			},
			getNum(){
				for (let i = 0; i < 60; i++) {
					console.log(i);
  					let Object = {
  					  cdate: i,
  					  cname: this.fruits,
  					  cut: this.price(),
  					};
  					this.newArr.push(Object);
				}
				console.log(this.newArr);

			},
			updateYear (){
				let that=this
					let i=0
					that.timell=setInterval(function () {
					   i++
				       that.initchart(that.newArr[i].cdate,that.newArr[i].cname,that.newArr[i].cut)
					   if(i==59){
							clearInterval(this.timell)
							i=0
					   }
					}, 500)
  			},
			initchart(startYear,startName,startCut){
				   let myChart = this.$echarts.init(document.getElementById("myChart"),null);
 				   var option = {
    					// x 轴数据
    					xAxis: {
    					  max: "dataMax", //坐标值最大刻度，可以设置成特殊值"dataMax"
    					},
    					// 数据集
    					dataset: {
    					  source: this.newArr,
    					},
    					// y 轴数据
    					yAxis: {
    					  type: "category",
    					  inverse: true, // 大在上面，小在下面排序
    					  data: startName,
    					},
    					// 序列
    					series: [
    					  {
    					    realtimeSort: true,
    					    seriesLayoutBy: "column",
    					    type: "bar",
    					    data: startCut,
    					  },
    					],
    					animationDuration: 0,
    					animationDurationUpdate: 1000,
    					animationEasing: "linear",
    					animationEasingUpdate: "linear",
   						graphic: {
   						  // 年份 Text
   						  elements: [
   						    {
   						      type: "text",
   						      right: 120,
   						      bottom: 40,
   						      style: {
   						        text: startYear,
   						        font: "bolder 30px monospace",
   						        fill: "rgba(100, 100, 100, 0.5)",
   						      },
   						      z: 100,
   						    },
   						  ],
   						},
  					};
					myChart.setOption(option,true);
			},
			reset(){
				clearInterval(this.timell)
				this.updateYear()
			}
		},
		mounted(){
			this.getNum()
			// this.updateYear()
			
		}
	}
</script>