echarts遍历区域折线图,单线和多线

news2024/11/23 12:12:39

在这里插入图片描述

// 单线折线图
            drawonelineCharts(){
                var echarts = require("echarts");
                var lineCharts = document.getElementsByClassName('lineChart'); // 对应地使用ByClassName
                this.linecolor=['#01FFD4','#1C70DD','#01FFD4','#1C70DD','#01FFD4','#1C70DD']
                for(var i = 0;i < lineCharts.length;i++ ){ // 通过for循环,在相同class的dom内绘制元素
                    var myChart = echarts.init(lineCharts[i]);
                    myChart.setOption({
                        color:this.linecolor[i],
                        // color:'#01FFD4',
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                animation: false
                            }
                        },
                        legend: {},
                        grid: [{
                            left: 40,
                            right: 40,
                        }, {
                            left: 40,
                            right: 40,
                        }],
                        xAxis: [{
                            type: 'category',
                            boundaryGap: false,
                            axisLine: {
                                onZero: true
                            },
                            data:this.linelist[i].xaxis,
                        }, {
                            gridIndex: 1
                        }],
                        yAxis: [{

                            type: 'value',
                        }, {
                            gridIndex: 1
                        }],
                        series: [{
                            name: this.linelist[i].chartTitle,
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            symbolSize: 9,
                            showSymbol: false,
                            markArea: {
                                silent: true,
                                label: {
                                    normal: {
                                        position: ['10%', '50%']
                                    }
                                },
                                data:[this.linelist[i].stackList]
                            },
                            data:this.linelist[i].yaxis
                        }]

                    },true)
                }
            },

在这里插入图片描述

// 双线折线图
            drawtwolineCharts(){
                var echarts = require("echarts");
                var lineCharts = document.getElementsByClassName('lineChart'); // 对应地使用ByClassName
                this.linecolor=['#01FFD4','#1C70DD','#01FFD4','#1C70DD','#01FFD4','#1C70DD']
                for(var i = 0;i < lineCharts.length;i++ ){ // 通过for循环,在相同class的dom内绘制元素
                    var myChart = echarts.init(lineCharts[i]);
                    myChart.setOption({
                        color:this.linecolor[i],
                        // color:'#01FFD4',
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                animation: false
                            }
                        },
                        legend: {},
                        grid: [{
                            left: 40,
                            right: 40,
                        }, {
                            left: 40,
                            right: 40,
                        }],
                        xAxis: [{
                            type: 'category',
                            boundaryGap: false,
                            axisLine: {
                                onZero: true
                            },
                            data:this.linelist[i].xaxis,
                        }, {
                            gridIndex: 1
                        }],
                        yAxis: [{
                            type: 'value',
                        }, {
                            gridIndex: 1
                        }],
                        series: this.linelist[i].yaxis
                    },true)
                }
            },

折线图样式

//  中和岗位折线图
   getneutralizeline(){
       neutralizeline(this.time).then((response) => {
           let linecolor=['#01FFD4','#1C70DD']
           for (let i = 0; i < response.data.length; i++) {
               let _this=this
               response.data[i].yaxis.forEach((item,index) => {
                   _this.$set(item, 'type', 'line')
                   _this.$set(item, 'smooth', true)
                   _this.$set(item, 'itemStyle', {
                       color:linecolor[index]
                   })
               })
           }
           this.linelist=response.data
           this.$nextTick(()=> {
               this.drawtwolineCharts()
           })
       })
   },

折线图数据

{
    "msg": "操作成功",
    "code": 200,
    "data": [
        {
            "chartTitle": "中和PH值",
            "legend": null,
            "unit": null,
            "xaxis": [
                "08:00",
                "09:00",
                "10:00",
               
                "02:00",
                "03:00",
                "04:00",
                "05:00",
                "06:00",
                "07:00"
            ],
            "yaxis": [
                {
                    "name": "中和PH值",
                    "data": [
                        "1",
                        "2",
                        "34",
                        "3",
           
                        "14.5",
                        "15.2",
                        "27",
                        "16.6",
                        "17.3"
                    ],
                    "markArea": {
                        "data": [
                            [
                                {
                                    "yAxis": 11
                                },
                                {
                                    "yAxis": 18
                                }
                            ]
                        ]
                    }
                }
            ]
        },
        {
            "chartTitle": "中和糖度(12-14BX)",
            "legend": null,
            "unit": null,
            "xaxis": [
                "08:00",
                "09:00",
                "10:00",
       
                "23:00",
                "00:00",
                "01:00",
                "02:00",
                "03:00",
                "04:00",
                "05:00",
                "06:00",
                "07:00"
            ],
            "yaxis": [
                {
                    "name": "中和糖度(12-14BX)",
                    "data": [
                        "11.7",
                        "12.4",
                        "13.1",
                        "13.8",
                        "14.5",
                        "5.4",
                     
                        "34",
                        "11",
                        "21",
                        "12.4"
                    ],
                    "markArea": {
                        "data": [
                            [
                                {
                                    "yAxis": 12
                                },
                                {
                                    "yAxis": 16
                                }
                            ]
                        ]
                    }
                }
            ]
        },
        {
            "chartTitle": "杀菌温度(A)",
            "legend": null,
            "unit": null,
            "xaxis": [
                "08:00",
                "09:00",
                "10:00",
                "11:00",
                "12:00",
                "13:00",
                "14:00",
                "15:00",
               
                "04:00",
                "05:00",
                "06:00",
                "07:00"
            ],
            "yaxis": [
                {
                    "name": "杀菌温度(A)",
                    "data": [
                       
                        "15.9",
                        "16.6",
                        "17.3",
                        "34.4",
                        "4.7",
                        "5.4",
                        "6.1",
                        "23.3",
                        "40"
                    ],
                    "markArea": {
                        "data": [
                            [
                                {
                                    "yAxis": 5
                                },
                                {
                                    "yAxis": 8
                                }
                            ]
                        ]
                    }
                },
                {
                    "name": "杀菌温度(B)",
                    "data": [
                        "6.1",
                        "9",
                        "14",
                        "7",
                        "16",
                        "23",
                 
                        "4.23",
                        "15.6",
                        "23.5",
                        "43.2",
                        "45.3",
                        "43.2",
                        "3.5"
                    ],
                    "markArea": {
                        "data": [
                            [
                                {
                                    "yAxis": 5
                                },
                                {
                                    "yAxis": 7
                                }
                            ]
                        ]
                    }
                }
            ]
        },
        {
            "chartTitle": "均值压力(A)",
            "legend": null,
            "unit": null,
            "xaxis": [
                
                "03:00",
                "04:00",
                "05:00",
                "06:00",
                "07:00"
            ],
            "yaxis": [
                {
                    "name": "均值压力(A)",
                    "data": [
                        
                        "13.8",
                        "35",
                        "15.2",
                        "23",
                        "8.9",
                        "24"
                    ],
                    "markArea": {
                        "data": [
                            [
                                {
                                    "yAxis": 11
                                },
                                {
                                    "yAxis": 15
                                }
                            ]
                        ]
                    }
                },
                {
                    "name": "均值压力(B)",
                    "data": [
                      
                        "18",
                        "23",
                        "13.1",
                        "23",
                        "14.5",
                        "15.2",
                        "25",
                        "16.6",
                        "30"
                    ],
                    "markArea": {
                        "data": [
                            [
                                {
                                    "yAxis": 4
                                },
                                {
                                    "yAxis": 8
                                }
                            ]
                        ]
                    }
                }
            ]
        },
        {
            "chartTitle": "高压压力(A)",
            "legend": null,
            "unit": null,
            "xaxis": [
             
                "00:00",
                "01:00",
                "02:00",
                "03:00",
                "04:00",
                "05:00",
                "06:00",
                "07:00"
            ],
            "yaxis": [
                {
                    "name": "高压压力(A)",
                    "data": [
                        "11.7",
                        "12.4",
                        "22",
                        "32",
                        "14.5",
                        "15.2",
                       
                        "12",
                        "34",
                        "46",
                        "24"
                    ],
                    "markArea": {
                        "data": [
                            [
                                {
                                    "yAxis": 19
                                },
                                {
                                    "yAxis": 25
                                }
                            ]
                        ]
                    }
                },
                {
                    "name": "高压压力(B)",
                    "data": [
                        "13.8",
                        "14.5",
                        "15.2",
                        "17",
                        "34",
                        "17.3",
                     
                        "29",
                        "16.6",
                        "17.3"
                    ],
                    "markArea": {
                        "data": [
                            [
                                {
                                    "yAxis": 19
                                },
                                {
                                    "yAxis": 23
                                }
                            ]
                        ]
                    }
                }
            ]
        }
    ]
}
{
    "msg": "操作成功",
    "code": 200,
    "data": [
        {
            "chartTitle": "辅料6",
            "legend": null,
            "unit": null,
            "stackList": [
                {
                    "yAxis": 5
                },
                {
                    "yAxis": 12
                }
            ],
            "xaxis": [
                "08:00",
                "09:40",
                "12:00",
                "15:00",
                "18:00",
                "21:00",
                "23:00",
                "02:00",
                "05:40",
                "07:00"
            ],
            "yaxis": [
                "7",
                "10",
                "13",
                "16",
                "19",
                "22",
                "25",
                "28",
                "34",
                "3"
            ]
        },
        {
            "chartTitle": "辅料5",
            "legend": null,
            "unit": null,
            "stackList": [
                {
                    "yAxis": 5
                },
                {
                    "yAxis": 19
                }
            ],
            "xaxis": [
                "08:00",
                "09:40",
                "12:00",
                "15:00",
                "18:00",
                "21:00",
                "23:00",
                "02:00",
                "05:40",
                "07:00"
            ],
            "yaxis": [
                "7",
                "10",
                "13",
                "16",
                "19",
                "22",
                "25",
                "28",
                "34",
                "3"
            ]
        }
    ]
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2101205.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2024.9.2

还没写完 #include <iostream> #include <cstring> using namespace std;class myString { private:char *str; //字符串int size; //实际字符长度int len; //字符串容量 public:myString():size(10) //无参构造函数{len siz…

大模型入门 ch01:大模型概述

本文是github上的大模型教程LLMs-from-scratch的学习笔记&#xff0c;教程地址&#xff1a;教程链接 STAGE 1&#xff1a; BUILDING 1. 数据准备与采样 LLM的预测过程&#xff0c;是一个不断预测下一个词&#xff08;准确的说是token&#xff09;的过程&#xff0c;每次根据输…

太狠了:华为的卫星通信能免费使用了

在科技日新月异的今天&#xff0c;手机已不再仅仅是通讯工具&#xff0c;它们正逐步成为我们生活中的全能助手。 而华为&#xff0c;作为科技领域的佼佼者&#xff0c;再次以其创新技术引领了一场卫星通信的革命。 近日&#xff0c;华为正式官宣Pura 70系列首发支持中国移动北…

压缩PDF,介绍这五种压缩方案

压缩PDF&#xff0c;在现代信息社会中&#xff0c;PDF文件已经成为我们日常工作和学习中不可或缺的重要载体。但随着PDF文件内容的增多和复杂化&#xff0c;文件大小的膨胀也成为一个常见问题&#xff0c;给存储、共享和传输带来了不少挑战。今天&#xff0c;我们将详细介绍五种…

美业小程序可以解决哪些行业痛点?美业SaaS收银系统管理系统拓客系统源码

随着移动互联网的快速发展&#xff0c;美业小程序成为了美容美发行业的一大利器&#xff0c;为企业和消费者带来了诸多便利。在当前美业的现状下&#xff0c;美业小程序已经开始解决许多行业痛点&#xff0c;并且在未来将继续发挥重要作用。 ▶美业现状 美业市场规模庞大&…

python-A-B数对

题目描述 给出一串数以及一个数字 C&#xff0c;要求计算出所有 A−BC 的数对的个数&#xff08;不同位置的数字一样的数对算不同的数对&#xff09;。输入 输入共两行。 第一行&#xff0c;两个整数 N,C。 第二行&#xff0c;N 个整数&#xff0c;作为要求处理的那串数。输出 …

review——Linux进程调度与切换

文章目录 目录 前言 1.进程的一些概念 2.进程的优先级 二、进程切换 三、进程调度 总结 前言 在我们的windows电脑上&#xff0c;常常会开启许多不同的软件&#xff0c;我们知道他们会一种和谐的方式存在于我们的电脑上&#xff0c;它们会随着我们的点击而启动&#xff0c;会随…

PMP核心知识点—之项目的整合管理

知识点1&#xff1a;制定项目章程 项目章程是启动过程组的输出。 项目章程主要是&#xff1a;批准项目、给项目经理授权 明确项目与组织战略目标之间的直接联系。 项目章程是由项目发起人编制或者是项目经理和项目发起人共同编制。 项目章程是由项目启动者或者项目发起人发布。…

【unity实战】使用新版输入系统Input System+Rigidbody实现第三人称人物控制器(附项目源码)

最终效果 前言 使用CharacterController实现3d角色控制器&#xff0c;之前已经做过很多了&#xff1a; 【unity小技巧】unity最完美的CharacterController 3d角色控制器&#xff0c;实现移动、跳跃、下蹲、奔跑、上下坡、物理碰撞效果&#xff0c;复制粘贴即用 【unity实战】C…

这些OA办公系统,才是企业高效行政的秘诀

本文将盘点10款OA办公系统&#xff0c;为企业选型提供参考。 大量的文件堆积在办公室&#xff0c;查找困难&#xff0c;浪费时间&#xff1f;文件的借阅和归还流程不规范&#xff0c;文件不知去向&#xff0c;无翼而飞&#xff1f;纸质单据审批周期长、审批过程不透明&#xff…

仕考网:事业单位考试分为哪几种类型?

事业单位招聘考试每年举行一次或两次&#xff0c;全国性的联考通常在每年的5月和10月底至11月初进行&#xff0c;省和市级直属单位的招聘次数则不受限制&#xff0c;各省的具体考试时间由各自安排。 事业单位的考试类型主要分为以下几种&#xff1a;全国事业单位联考、省级事业…

ELK学习笔记(一)——使用K8S部署ElasticSearch8.15.0集群

一、下载镜像 #1、下载官方镜像 docker pull elasticsearch:8.15.0 #2、打新tag docker tag elasticsearch:8.15.0 192.168.9.41:8088/new-erp-common/elasticsearch:8.15.0 #3、推送到私有仓库harbor docker push 192.168.9.41:8088/new-erp-common/elasticsearch:8.15.0二、…

港迪技术IPO上市:专注国产替代,盾构机变频器技术领先市场

武汉港迪技术股份有限公司&#xff08;以下称&#xff1a;“港迪技术”或“公司”&#xff09;是第四批国家级专精特新“小巨人”企业&#xff0c;公司及子公司港迪智能、港迪软件均为高新技术企业。据港迪技术IPO上市招股书&#xff08;注册稿&#xff09;显示&#xff0c;公司…

Java中实现JSON格式的转换(通过实例讲解)

创建项目 在IDEA中新建一个Java项目&#xff0c;在建好后的项目结构中添加一些必要的目录和文件&#xff0c;我最终的项目结构如图所示&#xff1a; 其中&#xff0c; Person和Dog是用于演示的两个类&#xff1b;JSONTest是实现将Person和Dog的实例对象转换成字符串&#xff…

Vue3 数据通信

一、基本概念 数据在 vue 中是单向流动的&#xff0c;有利于管理数据状态和变化。 而在日常组件开发中&#xff0c;难以避免组件之间的数据通信。组件通信可以分为不同的场景&#xff0c;例如父子组件通信、兄弟组件通信、跨层级组件通信等。 Vue3 提供了多种方式进行组件间的…

无法访问,你可能没有权限使用网络资源,此用户无法登录

解决方法&#xff1a; 打开控制面板&#xff0c;WinR运行框输入 control 控制面板主页更改为小图标&#xff0c;并选择凭据管理器 选择Window凭证&#xff0c;添加凭证&#xff08;如果之前输错过的&#xff0c;这里会有信息&#xff0c;请删掉重新添加&#xff09;

Mysql基础练习题 620.有趣的电影 (力扣)

620.编写解决方案&#xff0c;找出所有影片描述为 非 boring (不无聊) 的并且 id 为奇数 的影片,返回结果按 rating 降序排列 题目链接&#xff1a; https://leetcode.cn/problems/not-boring-movies/ 建表插入数据&#xff1a; Create table If Not Exists cinema (id int…

HIS系统|HIS系统成品|HIS系统应用

随着医疗信息化的飞速发展&#xff0c;HIS&#xff08;医院信息系统&#xff09;已经成为现代医院不可少的组成部分。HIS系统在医疗行业中扮演着至关重要的角色&#xff0c;广泛应用于医院的各个环节&#xff0c;不仅提高了医疗服务的效率&#xff0c;也增强了患者体验。本文将…

Vision Transformer (ViT) + 代码【详解】

文章目录 1、Vision Transformer (ViT) 介绍2、patch embedding3、代码3.1 class embedding Positional Embedding3.2 Transformer Encoder3.3 classifier3.4 ViT总代码 1、Vision Transformer (ViT) 介绍 VIT论文的摘要如下&#xff0c;谷歌翻译如下&#xff1a; 虽然 Transf…

JVM面试(四)类加载器和双亲委派机制

什么是类加载器&#xff1f; 简单来说的话&#xff0c;是用于实现“类加载动作”的加载器 “通过一个类的全限定名来获取描述该类的二进制字节流”这个动作放到Java虚拟机外部去实现&#xff0c;以便让应用程序自己决定如何去获取所需的类。实现这个动作的代码被称为“类加载器…