遍历双y轴折线图

于 2024-10-10 11:31:49 发布
阅读量43 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38999134/article/details/142817147
版权

在这里插入图片描述

<el-col :span="12" v-for="(item,index) in Unitchartslist" :key="index">
   <div>{{item.chartTitle}}</div>
    <div class="roseChart"  style="width: 100%; height: 300px;"></div>
</el-col>

drawunitline(bluename,greenname,yellowname,redname){
                var echarts = require("echarts");
                var roseCharts = document.getElementsByClassName('roseChart'); // 对应地使用ByClassName
                for(var i = 0;i < roseCharts.length;i++ ){ // 通过for循环，在相同class的dom内绘制元素
                    var myChart = echarts.init(roseCharts[i]);
                    myChart.setOption({
                        legend: {
                        },
                        tooltip: {
                            trigger: "axis",
                            
                        },
                        grid: {
                        },
                        xAxis: [{
                            type: "category",
                            boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}',
                                textStyle: {
                                    color: "#333"
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#D9D9D9"
                                }
                            },
                            data: this.Unitchartslist[i].xaxis
                        }],
                        yAxis: [{
                            type: 'value',
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#DCE2E8'
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#556677'
                                }
                            },
                            splitLine: {
                                lineStyle: { color: "#E5E5E5",}
                            },
                            splitLine: {
                                show: false
                            }
                        }, {
                            type: 'value',
                            position: 'right',
                            name: '百分比',
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#556677'
                                },
                                formatter: '{value}'
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#556677'
                                }
                            },
                            splitLine: {
                                show: false
                            }
                        }],
                        series: [{
                            name:bluename,
                            type: 'line',
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgba(35, 87, 224,0.3)'
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(35, 87, 224,0)'
                                        }
                                    ], false),
                                    shadowColor: 'rgba(35, 87, 224, 0.9)',
                                    shadowBlur: 20
                                }
                            },
                            data:this.Unitchartslist[i].bluedata,
                            symbolSize: 1,
                            symbol: 'circle',
                            smooth: true,
                            yAxisIndex: 0,
                            showSymbol: false,
                            itemStyle: {
                                normal: {
                                    color: '#1C70DD',
                                    borderColor: '#1C70DD'
                                }
                            }
                        }, 
                        {
                            name:redname,
                            type: 'line',
                            data:this.Unitchartslist[i].reddata,
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgba(217, 31, 35,0.3)'
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(217, 31, 35,0)'
                                        }
                                    ], false),
                                    shadowColor: 'rgba(217, 31, 35, 0.9)',
                                    shadowBlur: 20
                                }
                            },
                            symbolSize: 1,
                            symbol: 'circle',
                            smooth: true,
                            yAxisIndex: 0,
                            showSymbol: false,
                            itemStyle: {
                                normal: {
                                    color: '#D91F23',
                                    borderColor: '#D91F23'
                                }
                            }
                        },
                        , {
                            name:yellowname,
                            type: 'line',
                            data:this.Unitchartslist[i].yellowdata,
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgba(255, 170,1,0.3)'
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(255, 170,1,0)'
                                        }
                                    ], false),
                                    shadowColor: 'rgba(255, 170,1, 0.9)',
                                    shadowBlur: 20
                                }
                            },
                            symbolSize: 1,
                            symbol: 'circle',
                            smooth: true,
                            yAxisIndex: 0,
                            showSymbol: false,
                            itemStyle: {
                                normal: {
                                    color: '#FFAA01',
                                    borderColor:' #FFAA01'
                                }
                            }
                        },
                        {
                            name:greenname,
                            type: 'line',
                            data:this.Unitchartslist[i].greendata,
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgba(1, 254, 210,0.3)'
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(1, 254, 210,0)'
                                        }
                                    ], false),
                                    shadowColor: 'rgba(1, 254, 210, 0.9)',
                                    shadowBlur: 20
                                }
                            },
                            symbolSize: 1,
                            yAxisIndex: 1,
                            symbol: 'circle',
                            smooth: true,
                            showSymbol: false,
                            itemStyle: {
                                normal: {
                                    color: '#01FED2',
                                    borderColor: '#01FED2'
                                }
                            }
                        }
                    ]
                    },true)
                }
            },

处理后台数据

getunitConsumption(){
                let data={
                    beginDate:this.beginDate,
                    endDate:this.endDate,
                    timePeriod:this.timePeriod,
                    type:1
                }
                unitConsumption(data).then((response) => {
                    this.dataunitList=response.data.dataList
                    this.tableunitColumnList=response.data.tableColumnList
                    this.Unitchartslist=response.data.multipleLineChartVOs

                    for (let k = 0; k < this.Unitchartslist.length; k++) {
                         for (let i = 0; i <  this.Unitchartslist[k].yaxis.length; i++) {
                            if(this.Unitchartslist[k].yaxis[i].name=='单位产量'){
                                this.Unitchartslist[k].bluedata=this.Unitchartslist[k].yaxis[i].data
                            }else if(this.Unitchartslist[k].yaxis[i].name=='环比'){
                                this.Unitchartslist[k].greendata=this.Unitchartslist[k].yaxis[i].data
                            }else if(this.Unitchartslist[k].yaxis[i].name=='同比'){
                                this.Unitchartslist[k].yellowdata=this.Unitchartslist[k].yaxis[i].data
                            }else if(this.Unitchartslist[k].yaxis[i].name=='平均值'){
                                this.Unitchartslist[k].reddata=this.Unitchartslist[k].yaxis[i].data
                            }
                        }
                    }
                    // console.log("this.Unitchartslist",this.Unitchartslist)
                    this.$nextTick(()=> {
                        this.bluename='单位产量'
                        this.greenname='环比'
                        this.yellowname='同比'
                        this.redname='平均值'
                        this.drawunitline(this.bluename,this.greenname,this.yellowname,this.redname)
                    })
                })
            },
33455432
关注
python画双折线图-python双折线图
weixin_37988176的博客
11-01 6184
广告关闭腾讯云11.11云上盛惠 ，精选热门产品助力上云，云服务器首年88元起，买的越多返的越多，最高返5000元！practice.png双y轴折线图(plot both of those plots in one plot with 2 y-axislabels)一个y轴用来展示每年选秀总人数，另一个y轴用来展示赢球贡献值的...本文内容为重复 learning python:part 2 -...
echarts 折线图 设置y轴最小刻度_详细介绍如何计算两条折线的交点并使用Echarts展示以及图表优化...
weixin_39586395的博客
11-20 781
1、背景前段时间公司有个需求，需要在一个图表中展示两条折线，并且绘制出两条线的交点。为了满足需求大哥的需求，我也是着实想了有一会。下面我就把具体的实现过程给大家展示一下。1.1、ECharts 简介个人很喜欢Echarts这个图表库，就先给大家介绍一下，方便大家更好的了解。ECharts 是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏...
python双y轴的折线图_python matplotlib实现双Y轴的实例
weixin_39523280的博客
12-04 2753
python matplotlib实现双Y轴的实例如下所示：import matplotlib.pyplot as pltimport numpy as npx = np.arange(0., np.e, 0.01)y1 = np.exp(-x)y2 = np.log(x)fig = plt.figure()ax1 = fig.add_subplot(111)ax1.plot(x, y1,'r',...
遍历多个多Y轴折线图
weixin_38999134的博客
07-26 94
【代码】遍历多个多Y轴折线图。
html折线图怎么控制y轴数值,echarts Y轴数据类型不同怎么让折线图显示差距不大...
weixin_36004880的博客
06-24 264
for(var j in this.initVal) {legendData.push(this.initVal[j]);var i = 0;var newSeriesData =[];//遍历店铺汇总数据对象，对本地存储数据进行遍历，下拉框数组与本地数据匹配时for(var k=0; k{return obj.label === this.initVal[j];});if($obj) {var ...
Echarts中根据条件遍历数据改变y轴字体颜色
weixin_49155050的博客
10-10 456
Echarts中根据条件遍历数据改变y轴字体颜色
canvas画折线图，并且点击小圆点，动态渲染Y轴
weixin_46390926的博客
03-02 497
<canvas id="cv"></canvas> dataX = [1,2,3,4,5];//x轴数据 dataY = [50,84,67,21,94];//y轴数据 reportIdList = [01,02,03,04,05];//点击获取到的小圆圈的id数据 meanValue= 20;//标准线 xaxis= 28;//天数 var cv = document.getElementById("cv"); if (cv.width
HighChar 详解-双Y轴-及各
易燃易爆炸
07-25 1622
网上的例子，数据都是写死的，有点不实用吧 我在这里举一个，展示功能需求的数据。按需从数据库获取并画图展示  (本例子结合 angular.js，其他前台框架同理 从后台获取数据即可) 1.首先要引入Jquery.JS，再引入相关highChar.js 如果结合前台框架使用的话 ，比如 angular.js vue.js 这些前台框架，要注意引入顺序，highChar.js的引入必须在他们后面
Python-Matplotlib折线图绘制----y轴刻度不同 ＜lpliner＞
wuda19920215的博客
02-05 2660
背景 之前记录过关于直线图绘制函数的封装，现在补充剩余的部分，多种数据绘制在同一表格中，且每组数据的刻度不同 目录 Code 示例 总结 Code import random from matplotlib import pyplot as plt from mpl_toolkits.axisartist.parasite_axes import HostAxes, ParasiteAxes def plt_price(x: dict, y: Union[dic
d3.js实现自定义多y轴折线图的示例代码
10-18
而多y轴折线图是数据可视化中的一种常见类型，特别适合展示具有多个变量的数据集。在某些应用场景中，需要将几个变量在同一图表中进行比较，这要求y轴有多个，且各个y轴的刻度可能不同。 本文介绍如何使用d3.js实现...
android 实现x y轴折线图效果
12-15
在Android开发中，创建X Y轴折线图是一种常见的需求，尤其在数据分析或者统计图表的展示上。本教程将详细讲解如何自定义View来实现这一功能。首先，我们需要理解折线图的基本概念：折线图是由一系列数据点通过直线段...
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 239
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
解释器、预处理、main函数
编程语言技巧经验分享
10-07 1216
解释器覆盖范围很广，不管是解释语言的运行时解释翻译器，还是操作系统自带脚本的解释器。
vue-live2d看板娘集成方案设计使用教程
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1366
vue-live2d看板娘集成方案设计使用教程
javascript中==和===有什么不同
qq_48763502的博客
10-09 258
这个运算符用于比较两个值是否相等，但会在必要时进行类型转换。当两个值的类型不同，JavaScript 会尝试将它们转换为相同的类型，然后再进行比较。
VUE2常见问题以及解决方案汇总（不断更新中）
tangdou369098655的博客
10-06 418
解决vue项目中 el-table 的 @row-click 事件与行内点击事件冲突，点击事件不生效（表格行点击事件和行内元素点击事件冲突）需要阻止事件冒泡，vue子组件传递数据给父组件，vue + elementui 使用dialog弹出框作为子组件，首次点击弹框可以显示，第二次点击弹框后赋值无法打开弹框，动态循环生成el-checkbox后数据更新但是页面不更新，无法取消勾选，点击无效问题
深入解析 JavaScript 中的普通函数与箭头函数：区别、适用场景与最佳实践
qq_22841387的博客
10-02 1182
在函数式编程的支持上，箭头函数作为 ES6 新引入的一种更为简洁的函数形式，极大地方便了开发者编写简洁高效的代码。然而，箭头函数的行为与传统的普通函数有所不同，尤其是在 this。普通函数在定义时，尤其是带有单行返回值的情况下，显得略微冗长。无论是全局调用、作为对象方法调用，还是在事件处理函数中调用，动态变化的场景，比如回调函数，尤其是在类方法中作为回调传递时，箭头函数避免了手动绑定。在回调函数、数组操作等场景中，箭头函数的简洁性尤为明显。在定义对象的方法时，箭头函数由于不绑定自己的。
【UI】将 naive ui 的 message 封装进axios 中，关于naiveui的message相关的用法
最新发布
amoureux555的博客
10-09 264
【UI】将 naive ui 的 message 封装进axios 中，关于naiveui的message相关的用法
python y轴连续多折线图
09-30
在Python中，我们可以使用matplotlib库来创建y轴连续的多折线图，这是一个常见的数据可视化需求。`pyplot`模块下的`subplots()`函数可以帮助我们创建多条折线，并通过调整参数控制它们在同一图表上共存。 下面是一个简单的示例： ```python import matplotlib.pyplot as plt # 假设我们有多个数据集 data_sets = [ [x, x**2] for x in range(0, 10) # 第一条线，y=x^2 , [x, x**3] for x in range(0, 10) # 第二条线，y=x^3 ] # 创建一个新的图形和子图 fig, ax = plt.subplots() # 遍历数据集并绘制折线 for i, data in enumerate(data_sets): label = f"Line {i+1}" ax.plot(data[0], data[1], label=label) # 设置y轴范围，保持所有折线可见 ax.set_ylim(min([min(y) for _, y in data_sets]), max([max(y) for _, y in data_sets])) # 添加标题和标签，以及图例 ax.set_title("Multi-line plot with continuous y-axis") ax.set_xlabel('X-axis') ax.set_ylabel('Y-axis') ax.legend() # 显示图形 plt.show() ``` 在这个例子中，每一行数据对应一个折线，y轴的范围会自动适应所有折线的数据范围，形成连续的显示效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值