因为我们知道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. node.js---sails项目开发(1)

    1.安装Node.js和npm---这里就做介绍啦! 2.需要全局下安装Sails sudo npm install sails -g 3. 在本地创建一个文件夹 mkdir ~/lsg/sails ...

  2. [笔记]使用Go语言Redigo包在Docker容器内连接Redis容器的方法

    Docker容器之间的连接可以带来不少方便,下面记录下如何在自己容器内通过环境变量连接与之连接的Redis容器的方法. 先起一个Redis的Docker容器,命名为 redis,再起一个自己的Dock ...

  3. 94. Binary Tree Inorder Traversal(二叉树中序遍历)

      Given a binary tree, return the inorder traversal of its nodes' values. For example:Given binary t ...

  4. cdoj1339郭大侠与线上游戏

    地址:http://acm.uestc.edu.cn/#/problem/show/1339 题目: 郭大侠与线上游戏 Time Limit: 6000/2000MS (Java/Others)    ...

  5. return false 和 return true

    常规用法 在普通函数中:return 语句终止函数的执行,并返回一个指定的值给函数调用者,一般会用一个变量接收这个返回值再进行其它处理.如果未指定返回值,则返回 undefined 其中,返回一个函数 ...

  6. 《网络攻防》Web基础

    20145224陈颢文 <网络攻防>Web基础 基础问题回答 什么是表单: 表单是一个包含表单元素的区域.表单元素是允许用户在表单中输入信息的元素.表单在网页中主要负责数据采集功能. 浏览 ...

  7. 20145109《Java程序设计》第一周学习总结

    20145109 <Java程序设计>第一周学习总结 教材学习内容总结 About JVM, JRE, JDK JVM包含于JRE中,用于运行Java程序.JDK用于开发Java程序,包含 ...

  8. maven项目在eclipse的library中没有Maven Dependencies

    今天使用maven创建了一个多模块的项目,在分别创建完父项目和各个子模块后,编译父项目的时候,父项目工程目录上出现了一堆红叉叉,点进去一看,是找不到依赖的类,但是pom文件中相应jar的depende ...

  9. 通过excel快速拼接SQL

    “哎,发你一个excel,把这几百条数据修复喽.”经理喊道. “嗯,好的!” 正在看资料的我被经理临时分的任务打断,搞吧!这就是我平时中的一个工作场景. 工作中总是会遇到要修复数据,数据在excel中 ...

  10. NOIP 选择客栈

    描述 丽江河边有n家很有特色的客栈,客栈按照其位置顺序从1到n编号.每家客栈都按照某一种色调进行装饰(总共k种,用整数0~ k-1表示),且每家客栈都设有一家咖啡店,每家咖啡店均有各自的最低消费. 两 ...