Echarts实现柱状图闪烁效果

最新推荐文章于 2025-03-27 18:00:00 发布

橙子微笑

最新推荐文章于 2025-03-27 18:00:00 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Echarts 文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/m0_44949211/article/details/108081889

本文介绍如何在Echarts中通过setInterval函数实现柱状图的闪烁效果，适用于柱状图和折线图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts实现柱状图闪烁效果

实现效果如下：
在这里插入图片描述 echarts中没有实现闪烁效果功能，但是我们可以通过setInterval（）来实现闪烁效果，柱状图，折线图都可以实现的
代码如下：

<template>
	<div class="stratop">
		<div class="topTitle" >
			
		<svg-icon icon-class="alarun" style="color:#5cd9e8; "></svg-icon>
			<span class="fs-xl text mx-2">城市利用率Top10</span> 
		</div>
		<div id="bottomLeftChart" style="height:500px;background: black;  "></div>
	</div>
</template>

<script>
	const echarts = require("echarts");

	export default {
   
   
		data() {
   
   
			return {
   
   
				chart: null,
				item: "",
				interval: "6000",
				option:"",
				type:0,
			};
		},
		mounted() {
   
   

			this.chart = echarts.init