echarts条形图动态显示

10,960次阅读
没有评论

共计 589 个字符,预计需要花费 2 分钟才能阅读完成。

1、实现效果
每次展示 5 个,轮流展示
echarts 条形图动态显示
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%',
						

原文地址: echarts 条形图动态显示

    正文完
     0
    Yojack
    版权声明:本篇文章由 Yojack 于2024-10-23发表,共计589字。
    转载说明:
    1 本网站名称:优杰开发笔记
    2 本站永久网址:https://yojack.cn
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权,所有文章在发布时,均尽可能注明出处与作者。
    7 站长邮箱:laylwenl@gmail.com
    评论(没有评论)