因为我们知道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的值匹配上。不然会报错。然后想要的效果如上面图片展示。

vue如何循环同一个echarts图表的更多相关文章

  1. vue项目中在同一页面多次引入同一个echarts图表的自适应问题

    在父组件页面引入两次该图表子组件显示的效果: 由于是百分比宽高,所以在窗口发生变化时,需要让图表也跟着自适应,所以才出现了本次讨论的问题啦. 先看下完整的图表子组件代码(在父组件就是直接引入,不需要传 ...

  2. vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

    流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...

  3. Vue自定义标签页,并且在其中渲染Echarts图表

    目录 一.需求说明 二.标签页功能实现 一.需求说明 1.点击标签按钮切换不同的echarts图表,考虑用Ant Design Vue,但是其样式无法自定义 2.div的整体布局样式使用tailwin ...

  4. 基于HTML5的WebGL实现json和echarts图表展现在同一个界面

    突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...

  5. 在vue中使用echarts图表

    在vue中使用echarts图表   转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...

  6. vue使用Echarts图表

    vue使用Echarts图表 童话_xxv 关注  0.5 2018.12.11 09:09* 字数 325 阅读 1456评论 2喜欢 13 在开发后台系统时,使用图表进行数据可视化,这样会使数据更 ...

  7. vue学习【一】vue引用封装echarts并展示多个echarts图表

    大家好,我是一叶,经过一段时间对vue的学习,我打算把vue做一个系列,把踩过的坑和大家分享一下. 现在开始第一章:vue引用并封装echarts 在文章开始前,我先舔波echarts(真香).阿里的 ...

  8. vue 引入 echarts 图表 并且展示柱状图

    npm i echarts -S 下载 echarts 图表 mian.js 文件 引入图表并且全局挂载 //echarts 图表 import echarts from 'echarts' Vue. ...

  9. vue中添加Echarts图表的使用,Echarts的学习笔记

    项目中需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts(关于heightCharts请看我的另一篇 http://www.cnblogs.com/jasonwang2y60/ ...

随机推荐

  1. sql join on 与where

    转载:http://www.cnblogs.com/Jessy/p/3525419.html left join :左连接,返回左表中所有的记录以及右表中连接字段相等的记录. right join : ...

  2. beego——过滤器

    beego支持自定义过滤中间件,例如安全验证.强制跳转等. 过滤器函数如下所示: beego.InsertFilter(pattern string, position int, filter Fil ...

  3. 第一课Linux系统安装知识(1)

         在做linux下C\C++开发,首先得安装个Linux系统,这节课记录相关系统安装的知识,本文记录虚拟机安装部分.      在linux系统中,现在一般生手都用桌面版,比如比较多人使用的是 ...

  4. Linux下的查找命令which、whereis、locate、find(6/20)

    Linux下查找相关命令主要有以下4个:which.whereis.locate.find. (1)which   [-a]    cmdname1 cmdname2 ...... 命令参数: -n  ...

  5. wpf利用线程制作初始界面和关闭窗体特效

    1.首先定义初始窗体,和主窗体. 初始窗体(StartWindow) 主窗体(MainWindow): 2.在主窗体界面中,加载初始窗体.注意在线程中操作UI元素需要使用BeginInvoke或者In ...

  6. HTML5堆木头游戏

    在线演示 本地下载

  7. React Native中加载指示器组件ActivityIndicator使用方法

    这里讲一下React Native中的一个组件——ActivityIndicator,这是一个加载指示器,俗称菊花,很常见的,效果如下所示: 可以看到图中有两个加载指示器,一大一小,这是尺寸不是我设置 ...

  8. Could not find com.android.support:appcompat-v7:23.1.1

    在刚接触Android Studio的时候,这玩意整起来确实费劲,现在接触多了,感觉还好,毕竟还有一段提升的空间,以后的必然趋势,所以还是潜心下来好好搞搞. 废话少说,切入正题. 如图所示的error ...

  9. COS-2OS结构和硬件支持

    操作系统(Operating System,简称OS),是电子计算机系统中负责支撑应用程序运行环境以及用户操作环境的系统软件,同时也是计算机系统的核心与基石.它的职责常包括对硬件的直接监管.对各种计算 ...

  10. Kotlin 卸载APP自身

    package com.example.batdw01.myapplication import android.net.wifi.WifiManager import android.support ...