文档章节

vue如何循环同一个echarts图表

o
 osc_1ee7cxmx
发布于 2018/08/06 17:10
字数 357
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

 因为我们知道echarts图表需要一个ID节点,所以我们循环echarts同一个图表时要考虑ID节点变化问题。废话不多说,直接上demo效果。

这里有一位分析师在不同的模拟组合,这时需求要在dialog弹出层要展示两个模拟组合信息,而且数据用echarts显示出来。效果如下:

代码实现:

html代码部分:

<div v-if="item.name==dialogData.name" v-for="(item,index) in tableData">
    <div :id="'chart_cl_detail_evaluate'+index" style="height: 265px;width: 80%;margin-top: -145px;margin-left: 230px;">
    </div>
</div>
v-if="item.name==dialogData.name"只有当我选中的分析师名字才循环遍历出来,v-for="(item,index) in tableData"循环数据。tableData是我存储数据的。

重点就是div中的id要绑定简写 :id不然解析不了后面拼接的index的值
:id="'chart_cl_detail_evaluate'+index"这是我拼接的id
下面就是js代码:
//dialog弹框方法
showRecord(row, index) { this.dialogData = row; this.dialogVisible = true; var _this = this; setTimeout(function() { _this.dialogShow(row); }, 500); },
//弹框里面画echarts方法 dialogShow(row) { for(let i = 0; i < this.tableData.length; i++) { if(row.name == this.tableData[i].name) { let chart_cl_detail_evaluate = echarts.init(document.getElementById('chart_cl_detail_evaluate' + i), 'macarons'); chart_cl_detail_evaluate.setOption({ //里面是你要画的echarts图表类型 }); } } }

当我们点击dialog弹框方法,方法调用dialogShow方法。

这里我们循环tableData的目的就是让 i 的值和 v-for="(item,index) in tableData"中的index的值匹配上。不然会报错。然后想要的效果如上面图片展示。

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

会议通知 | 2020中国计算与认知神经科学会议

关于大会关于 计算神经科学以神经生物实验为基础,以建立数学模型,开展计算模拟和分析作为基本手段,来刻画和描述大脑的神经活动,探究神经系统各种复杂活动和认知功能包括注意、学习、记忆...

脑机接口社区
06/02
17
0
大神分享快3怎么算下期和值

大神分享快3怎么算下期和值{叩67790572}使用的标签:constructor-arg标签出现的位置:bean标签的内部标签中的属性type:用于指定要注入的数据的数据类型,该数据类型也是构造函数中某个...

yiren081
20分钟前
21
0
Matlab系列之运算符和标点符号的功能介绍

本来月初就打算接着写的,但是电脑不小心进水,主板什么的都废了,周末才找时间拿去修好,心塞。 就不多讲太多废话了,开始分享今天的内容,对MATLAB的运算符做个介绍,然后再对标点符号进行...

狂人V
07/06
3
0
Java源码系列(1):Comparable和Comparator的区别

在讲Comparable和Comparator区别之前,先补充一个知识点。 先看代码: Person类 1public class Person<T> { 2  private T id; 3 4  public T getId() { 5    return i...

学习Java的小姐姐
2018/09/19
19
0
ThreadPoolTaskScheduler手写调度中心

先贴一个自己写的demo把,原理其实就是这样的。 CronTrigger这个类可以将cron表达式转换成Date,可以查看schedule源码学到不少东西,下面代码就是转换成下一执行时间。 public Date nextEx...

朝如青丝暮成雪
41分钟前
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部