首页 前端知识 echarts条形图动态显示

echarts条形图动态显示

2024-10-15 23:10:33 前端知识 前端哥 507 95 我要收藏

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%',
						
转载请注明出处或者链接地址:https://www.qianduange.cn//article/19011.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!