echarts条形图动态显示

最新推荐文章于 2025-05-15 14:49:11 发布

zttbee

最新推荐文章于 2025-05-15 14:49:11 发布

阅读量921

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_43840793/article/details/131680183

该文章展示了如何利用Echarts库创建一个柱状图，图中数据每2秒自动轮播，每次显示5个条目。通过dataZoom组件实现轮播效果，同时图表包含蓝色和灰色柱子，蓝色柱子在灰色上方，类别信息作为柱子标签。代码示例中使用了Vue.js的refs进行交互，并提供了完整的配置选项。

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

1、实现效果
每次展示5个，轮流展示
在这里插入图片描述
2、实现思路
使用datazoom,一次展示5项数据，轮流展示每2s刷新一次。
条形图有两个柱子，一个蓝色柱子，一个灰色柱子，两个柱子重合，且蓝柱子在上面。
为了使左侧的类目和柱子同步变化，左侧类目不写成y轴标签，而写成柱子的标签，即在series里写标签
3、代码
定义一个盒子

<div class="chartStyle" ref="chartImplement"></div>

配置函数

initChartArea() {
   
   
				var timer = null;
				var myChart = echarts.init(this.$refs.chartImplement);
				myChart.clear();
				var option;
				var valueData = [200, 330, 300, 280, 350, 290, 180, 200, 330, 300, 280, ];
				var fullData = [400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400, ];
				var categoryData = ['永安镇', '大泗镇', '白马镇', '胡庄镇', 'XXX镇', '官庄镇', '侏儒山', '永安镇', '大泗镇', '白马镇', '胡庄镇', ];
				option = {
   
   
					tooltip: {
   
   
						show: false,
					},
					grid: {
   
   
						top: '0%',
						left: '1%',
						right: '0%'