中实现循环渲染多个相同echarts图表图表 在在Vue 中实现循环渲染多个相同 主要介绍了在Vue 中实现循环渲染多个相同echarts图表，具有很好的参考价值，希望对大家有所帮助。一起跟 随小编过来看看吧 在开发过程中我们常常需要，在一个页面中使用相同的图表来展示同级别的多个事物（如：同级别的多个不同id的仓库、同级 别的多个不同id的设备等）。 上图效果实现代码： 补充知识：echarts 同时控制多个图表的属性值变更 补充知识： 同时控制多个图表的属性值变更 echarts v4.x 版本如何同时控制多个图标的属性值变更 简单理解： 简单理解： echarts为一个对象形式出现在代码中，通过 Canvas、SVG（4.0+）、VML 的形式渲染图表 实现方法： 实现方法： echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的图表 需求：需求： 将页面多个图表渲染完成后 选择更新数据或者查看固定时间段区域数据等按钮实现动态的改变echarts的图表数据表现。 分析：分析： 1、首先对于echarts而言，每个图表都是一个单独的echarts对象，那么我们只需要将每个对象获取到并通过getOption()函数 获取到每个对象的属性，并对其赋值。 2、然后通过setOption(echartsObject)方法对其执行渲染就可以了（echartsObject为每个echarts对象）。 设计思路： 设计思路： 1、设置一个全局数组用来装入每一个echarts对象。 var myCharts=[]; 然后在每个echarts实例化完成后将当前的echarts对象放进myCharts数组中。 function darwChart(id, monitorItemData, monitorItemDecimal,oiltime) { ... var chartid = "chart_" + id; chartid = echarts.init(dom); chartid.setOption(option={...}) myCharts.push(chartid); ... } 注：这里说明id为每个表加载的时候获取的数据id，本人通过这个id来区分不同的echarts对象，如果设置多个方法互相不关 联，可以不用这么写，这里自由分配，主要理解实现思想。 2、然后外部按钮触发事件的方法：循环赋值实现，这里就简单了。ok，祝你成功。 function gettimeradio(){ var rr = $('input:radio[name="r2"]:checked').attr('id'); Xmin = getDateTime(rr); Xmax = getDateTime(0); myCharts = Array.from(new Set(myCharts)); myCharts.forEach(data=>{ var chart = data.getOption(); chart.xAxis[0].min =Xmin ; chart.xAxis[0].max =Xmax ; data.setOption(chart); 

}) } 以上这篇在Vue 中实现循环渲染多个相同echarts图表就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大 家多多支持我们。