echarts设置标线和最大值最小值

news2025/5/27 12:32:18

echarts设置标线和最大值最小值

在这里插入图片描述

基本ECharts图表初始化配置
设置动态的y轴范围(min/max值)
通过markPoint标记最大值和最小值点
使用markLine添加水平参考线
配置双y轴图表
自定义标记点和线的样式(颜色、符号等)
响应式调整图表大小

 <div id="container" style="height: 100%"></div>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>


  <script type="text/javascript">
    var dom = document.getElementById('container');
    // 创建一个echarts实例
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas', // 渲染模式,支持'canvas'或者'svg'
    });
    var app = {};

    var option;

    let max = 1300;  // 动态y轴最大值
    let min = 0;     // 动态轴最小值
    let yVal = 400;  // 标记线数据
    option = {
      legend: {
        show: true
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
          interval: 'auto'   //坐标轴刻度标签的显示间隔
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      // 配置双y轴图表
      yAxis: [
        {
          type: 'value'
        },
        {
          name: '%',
          min: min,
          max: max
        }
      ],
      series: [
        {
          name: '测试1',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          // 标记最大最小值
          markPoint: {
            data: [
              {
                type: 'max',
                name: '最大值'
              },
              {
                type: 'min',
                name: '最大值'
              }
            ],
            symbol: 'pin',
            symbolSize: 50,
            label: {
              // color: 'white',      // 标签颜色
              formatter: '{c}' // 显示名称和值({b}=name, {c}=value)
            }
          }
        },
        {
          data: [720, 832, 801, 834, 1190, 1230, 1220],
          name: '测试2',
          type: 'line',
          // 使用y轴的第二个数据
          yAxisIndex: 1,
          // 设置图表标线
          markLine: {
            symbol: ['none', 'none'], //去掉两端箭头
            data: [
              {
                lineStyle: {
                  //标注线样式
                  normal: {
                    type: 'solid',
                    color: 'red' //标注线颜色
                  }
                },
                yAxis: yVal,
                type: 'average' //标线的数据类型
              }
            ]
          }
        }
      ]
    };


    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>

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

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

相关文章

Maven 中央仓库操作指南

Maven 中央仓库操作指南 登录注册 在 Maven Central 登录&#xff08;注册&#xff09;账号。 添加命名空间 注册 通过右上角用户菜单跳转到命名空间管理页面&#xff1a; 注册命名空间&#xff1a; 填入你拥有的域名并注册&#xff1a; 刚提交的命名空间状态是Unverified…

BUUCTF——RCE ME

BUUCTF——RCE ME 进入靶场 <?php error_reporting(0); if(isset($_GET[code])){$code$_GET[code];if(strlen($code)>40){die("This is too Long.");}if(preg_match("/[A-Za-z0-9]/",$code)){die("NO.");}eval($code); } else{highlight…

FreeRTOS--消息队列

一、简介 消息队列是FreeRTOS中用于任务与任务或任务与中断之间数据交换的一种机制&#xff0c;采用FIFO&#xff08;先进先出&#xff09;方式管理数据&#xff0c;也可以采用LIFO&#xff08;后进先出&#xff09;方式。有点类似全局变量。 1.1 那为什么不直接使用全局变量&a…

三步快速部署一个本地Windows/Linux大语言模型ChatGLM(环境配置+权重下载+运行)

前言&#xff1a; 最近刚拿到实验室一个装了3张3090显卡的服务器账号&#xff0c;感觉不用来霍霍有点浪费&#xff0c;于是有了部署一个大语言模型的想法&#xff0c;除去下载权重和传文件到服务器上可能也就用了十分钟不到&#xff08;这下看懂为啥python受众现在这么广了&…

DeepSeek联网Google搜索引擎

目录&#xff1a; 1、使用背景2、实现代码3、Gradio 的 yield 机制 1、使用背景 比如所有易建联是什么时候退役的&#xff1f;使用大模型对这种实事回答不准确&#xff0c;需要通过联网搜索处理。 正确答案应该是2023年8月29日退役。 2、实现代码 # import gradio as gr# d…

奈雪小程序任务脚本

功能概述 该脚本用于自动完成奈雪点单小程序的每日任务&#xff0c;包括&#xff1a; 自动检测 Token 有效性自动签到&#xff08;如果未签到&#xff09;获取用户基础信息&#xff08;昵称、手机号&#xff09;查询当前奈雪币余额记录连续签到天数支持多账号执行&#xff0c…

上海医日健集团物联网专利技术领跑智慧药房赛道

在智慧医疗蓬勃发展的浪潮中&#xff0c;上海医日健集团凭借其卓越的创新能力与强大的技术实力&#xff0c;在智慧药房领域崭露头角。集团自主研发的物联网专利技术&#xff0c;正以前所未有的优势&#xff0c;重塑智慧药房运营模式&#xff0c;引领行业迈向新的发展高度。 上…

基于Java+MySQL实现(Web)图书借阅管理系统

图书借阅管理系统(前后台) 1 需求分析 图书借阅管理系统是模拟学校图书馆实现的一个具有前后台的 Web 系统.对于读者,能够提供全文检索,个性化推荐,借阅等功能.对于管理员,能够提供可视化数据分析,信息管理等功能. 2 技术栈 前端: Layui,jQuery,echarts 后端:Spring Boot,…

SAR ADC的功耗设计

SAR ADC 由比较器、逻辑和DAC组成,功耗比可能是3:6:1,对于低功耗设计来说,我们需要尽量让DAC的功耗最小,这里来探讨一下CDAC的功耗计算方法。 CDAC从状态1切换到状态2时,需要从Vref buffer上抽拉电荷。C是状态2时连接Vref的总电容,V2就是状态2时接Vref的电容上的电压…

PP-OCRv5

目录 PP-OCRv5官方效果如下 C封装、C#调用效果 项目 代码 下载 PP-OCRv5官方效果如下 C封装、C#调用效果 项目 代码 using Newtonsoft.Json; using OpenCvSharp; using System; using System.Collections.Generic; using System.Diagnostics; using System.Drawing; usi…

nginx的一些配置的意思

1.用这个端口可以访问到nginx 2.工作进程&#xff0c;设置成和cpu核心数一样即可 3.每个工作进程的最大网络连接数。 4.主机名称 设置反向代理时&#xff0c;把server_name设置成ip。 5.反向代理进行转发&#xff0c;localhost指的是nginx所在的机器。 关键字proxy_pass。 …

Agent模型微调

这篇文章讲解&#xff1a; 把 Agent 和 Fine-Tuning 的知识串起来&#xff0c;在更高的技术视角看大模型应用&#xff1b;加深对 Agent 工作原理的理解&#xff1b;加深对 Fine-Tuning 训练数据处理的理解。 1. 认识大模型 Agent 1.1 大模型 Agent 的应用场景 揭秘Agent核心…

Linux基本指令篇 —— whoami指令

whoami 是 Linux 和 Unix 系统中一个简单但实用的命令&#xff0c;全称 Who Am I&#xff08;我是谁&#xff09;。它的功能是显示当前登录用户的用户名。以下是关于 whoami 的详细解析&#xff1a; 目录 1. 基本用法 2. 命令特点 3. 实际应用场景 场景 1&#xff1a;脚本中…

力扣395做题笔记

题目链接 力扣395 第一次尝试 class Solution {public int longestSubstring(String str, int k) {char[] s str.toCharArray();int n s.length;int[] cnts new int[256];int ans 0;for (int r 0, l 0; r < n; r ) { cnts[s[r]];if (cnts[s[r]] > k) { ans Mat…

WebSocket(看这一篇就够了)

文章目录 WebSocket 基本概念什么是WebSocket?为什么需要 WebSocket&#xff1f;与 HTTP 协议的区别WebSocket协议的原理WebSocket工作流程WebSocket 数据帧结构和控制帧结构。JavaScript 中 WebSocket 对象的属性和方法&#xff0c;以及如何创建和连接 WebSocket。webSocket简…

旧物回收小程序:让闲置焕发光彩,为生活增添价值

你是否常常为家中堆积如山的闲置物品而烦恼&#xff1f;那些曾经心爱的物品&#xff0c;如今却成了占据空间的“鸡肋”&#xff0c;丢弃可惜&#xff0c;留着又无处安放。别担心&#xff0c;一款旧物二手回收小程序将为你解决这一难题&#xff0c;让闲置物品重新焕发光彩&#…

数学建模MathAI智能体-2025电工杯A题实战

题目&#xff1a; 光伏电站发电功率日前预测问题 光伏发电是通过半导体材料的光电效应&#xff0c;将太阳能直接转化为电能的技术。光伏电站是由众多光伏发电单元组成的规模化发电设施。 光伏电站的发电功率主要由光伏板表面接收到的太阳辐射总量决定&#xff0c;不同季节太阳…

C# Windows Forms应用程序-002

目录 项目结构 主类和命名空间 构造函数和析构函数 初始化组件 (InitializeComponent) 按钮点击事件处理程序 主程序入口点 项目截图&#xff1a; 完整代码&#xff1a; 项目结构 这个项目是一个简单的C# Windows Forms应用程序&#xff0c;获取指定文件的根信息…

理解计算机系统_线程(八):并行

前言 以<深入理解计算机系统>(以下称“本书”)内容为基础&#xff0c;对程序的整个过程进行梳理。本书内容对整个计算机系统做了系统性导引,每部分内容都是单独的一门课.学习深度根据自己需要来定 引入 接续理解计算机系统_并发编程(10)_线程(七):基于预线程化的…

【MySQL】09.索引

索引是用来提高数据库的性能的&#xff0c;但查询速度的提高是以插入、更新、删除的速度为代价的&#xff0c;这些写操作&#xff0c;增加了大量的IO。所以它的价值在于提高一个海量数据的检索速度。 1. 认识磁盘 MySQL 给用户提供存储服务&#xff0c;而存储的都是数据&…