echarts动态循环出多个相同图表但不同数据动态渲染图表 |
您所在的位置：网站首页 › 图表效果图 › echarts动态循环出多个相同图表但不同数据动态渲染图表 |
echarts动态循环出多个相同图表但不同数据动态渲染图表
|
效果图
html部分 js部分 data（）{ return{ //假数据模拟 aaa: [ { //图表标题 text: "16吋口指标均值趋势", //图表legend legenddata: ["16UP+LOW", "16UP+LOW指标"], //Y轴刻度 yAxis: { min: 0.5, max: 3.5, interval: 0.5, }, //每条数据名字 series: { name1: "16UP+LOW", name2: "16UP+LOW指标", }, //每条数据均值 a: [ 0.97, 0.95, 0.97, 1.01, 0.95, 0.98, 0.99, 0.92, 0.94, 0.92, 0.97, 0.99, 0.98, 0.99, 0.99, 0.99, ], //每条数据标准值 b: [ 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, ], }, { a: [ 0.99, 0.99, 0.99, 1.01, 0.99, 0.98, 0.99, 0.92, 0.94, 0.92, 0.97, 0.99, 0.98, 0.99, 0.99, 0.99, ], b: [ 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, ], text: "20吋口指标均值趋势", legenddata: ["20UP+LOW", "20UP+LOW指标"], yAxis: { min: 0.5, max: 3.5, interval: 0.5, }, series: { name1: "20UP+LOW", name2: "20UP+LOW指标", }, }, ], }} methods:{ //图表 topGraph(timearr) { //用ByClassName获取元素。 var roseCharts = document.getElementsByClassName("roseChart"); //循环元素 for (var i = 0; i title: { text: this.aaa[i].text, left: "center", }, tooltip: { trigger: "axis", }, legend: { data: this.aaa[i].legenddata, bottom: 10, }, grid: { left: "3%", right: "4%", bottom: 80, containLabel: true, }, toolbox: { feature: { saveAsImage: {}, }, }, xAxis: { type: "category", boundaryGap: false, //X轴刻度信息 data: timearr, axisLabel: { interale: 0, //坐标轴刻度标签的显示间隔,设置成 0 强制显示所有标签 rotate: 40, //设置日期显示样式（倾斜度) }, }, yAxis: [ { type: "value", min: this.aaa[i].yAxis.min, max: this.aaa[i].yAxis.max, interval: this.aaa[i].yAxis.interval, axisLabel: { formatter: "{value} ", }, }, ], series: [ { name: this.aaa[i].series.name1, type: "line", data: this.aaa[i].a, color: "#0000FF", label: { show: true, formatter: function (data) { return data.value; }, }, }, { name: this.aaa[i].series.name2, type: "line", data: this.aaa[i].b, lineStyle: { color: "#FF0000", width: 2, type: "dashed", }, }, ], }; //初始化表格 myChart.setOption(option); //监听，根据视口变化动态从新渲染表格 window.addEventListener("resize", function () { myChart.resize(); }); } }, } 注意项：这循环一定要用getElementsByClassName，不能用id的，因为class是多选的，id只能一个，如果你用id的选择方法，就会后面的图把前面的图覆盖 容易踩坑的点：这一段，尤其myChart.setOption(option);这句话，一定要注意，都是放在for循环内的，不要放在外面了，像我就复制自己的代码用的时候被坑了，因为是复制的，没有注意，把这段代码写在了for的括号外面，然后我一直循环出来后只出现最后一个图，前面的图不显示，我想了好久也没想明白，我复制的一样的代码为啥就不生效了。然后仔细比对发现写在外面了，淦！ //初始化表格 myChart.setOption(option); //监听，根据视口变化动态从新渲染表格 window.addEventListener("resize", function () { myChart.resize(); }); 如果需要增加内部滚动条的注意事项：需求要这个页面一个图的时候正常显示，多个图表的时候Y轴滚动条是内部滚动条，而不是整个网页的滚动条，那我的做法肯定就是给这个套一个大的div限定一个宽高，然后overflow:auto;就实现了内部的滚动条，但是这样就会出现一个问题，我选一个条件出来了图，然后我再次多选一个条件，搜索后第一个图没有自适应大小，还是按照全屏的来的，而第二个图以后开始就按照有内部滚动条的大小自适应了，这时候需要做的是在发送请求时先把循环div的aaa给清空，然后再赋值。这样就可以把所有的图都从新生成一次。也就自适应了。 |
【本文地址】
今日新闻 |
推荐新闻 |