Echarts拼接折线图,左右两部分设置不同的样式及formatter的处理

news2024/9/28 7:26:36
option = {
  tooltip: {
    trigger: 'axis',
    formatter: (params) => {
      console.log(params);
      if (params && params.length == 2) {
        if (params[0].value != '-') {
          return `日期:${params[0].name}<br>${params[0].marker} ${params[0].value}`;
        } else {
          return `日期:${params[1].name}<br>${params[1].marker} ${params[1].value}<br>`;
        }
      }
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: [
    {
      type: 'value'
    },
    {
      type: 'value'
    }
  ],
  series: [
    {
      type: 'line',
      areaStyle: {
        color: '#6c50f330'
      },
      data: [190, 230, 224, 200, 230, '-', '-', '-', '-', '-', '-']
    },
    {
      type: 'line',
      areaStyle: {
        color: '#00ca9550'
      },
      data: ['-', '-', '-', '-', 230, 200, 190]
    }
  ]
};

效果:

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

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

相关文章

Spring Boot 中的分布式配置中心

Spring Boot 中的分布式配置中心 Spring Boot 是一个非常流行的 Java Web 开发框架&#xff0c;它提供了很多工具和组件来简化 Web 应用程序的开发。其中&#xff0c;分布式配置中心是 Spring Boot 中的一个非常重要的组件&#xff0c;它可以帮助我们管理应用程序中的配置信息…

Android---SQLite优化

SQLite 是一款轻型的数据库&#xff0c;是遵循 ACID 关系型数据库管理系统&#xff0c;它包含在一个相对小的 C 库中。它是 D.RichardHipp 建立的公有领域项目。它的设计目的是嵌入式的&#xff0c;而且目前已经在很多嵌入式产品中使用了它&#xff0c;它占用资源非常的低&…

日期时间~

1&#xff1a;Data类的概述 Data类的对象在Java中代表的是当前所在系统的此刻日期时间 2&#xff1a;Data的构造器 3&#xff1a;常用方法 2:SimpleDateFormat 可以对Date对象或时间毫秒值格式化成我们喜欢的时间形式。也可以把字符串的时间形式解析成日期对象 1&#xff1…

计算机网络编程 | 多路I/O转接服务器

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和…

大模型在银行业客服中心的应用

随着金融科技领域的不断发展&#xff0c;金融机构改变了传统方式&#xff0c;将更多服务从线下转移到线上&#xff0c;为了提升客户体验和效率&#xff0c;金融机构不断探索自然语言处理、机器学习等技术手段来优化客服服务&#xff0c;其中大模型技术被广泛应用&#xff0c;成…

python sorted函数多条件排序大量数据时出现错误排序

""" 求生日&#xff0c;我的理解是有四个排序条件&#xff0c;分别是&#xff0c;年月日&#xff0c;输入顺序 """ n int(input())person_list [[x for x in input().split()] for x in range(n)] print(person_list) # 给输入先后加入顺序 …

NSString 输出百分比 % 无法显示

通过 NSString 拼接显示半分比 % 符号的时候会遇到拼接了 % 但 UI 未能显示; 解决办法 在需要添加 % 处通过 %% 的表达方式即可成功输出. [NSString stringWithFormat:"%.f%%", deviceLevel * 100]; 以上便是此次分享的全部内容&#xff0c;希望能对大家有所帮助!

【TensorRT】基本介绍

TensorRT用于高效实现已经训练好的深度学习的模型的推理过程的SDK&#xff0c;能使DL模型有更快的推理速度和更高的吞吐量。官方提供Python和C两种接口&#xff0c;形式基本一致且相互对应。 1 ✨ TensorRT介绍 &#x1f35f;1.1 TensorRT的工作 分为两个时期&#xff08;构建…

flask socket版本问题

1、版本问题 问题解决 根据官方给定的兼容版本&#xff0c;从socket.io官网CDN下载最新的4.4.1版本js文件&#xff0c;https://cdn.socket.io/。 python-engineio使用版本。需要更新的javascript.socketio包&#xff0c;具体可对照官方文档Requirements部分末尾 https://flask-…

红帽宣布为RHEL 7延长4年生命周期

早前一段时间&#xff0c;红帽原本计划在2024年7月1日结束支持&#xff0c;但是Red Hat表示由于部分IT企业需要更长的时间部署和升级&#xff0c;宣布为Red Hat Enterprise Linux 7(RHEL 7)增加4年的扩展生命支持(ELS)。 据了解&#xff0c;RHEL 7于2014年发布&#xff0c;支持…

uniapp解决跨域问题

配置&#xff1a; "proxy": {"/api": {"target": "https://s2.lakala.com","changeOrigin": true,"pathRewrite": {"^/api": "/api"}}} 目标路径 https://s2.lakala.com/api/v3/labs/relat…

7.1.4 【Linux】与目录树的关系

每个文件&#xff08;不管是一般文件还是目录文件&#xff09;都会占用一个 inode &#xff0c; 且可依据文件内容的大小来分配多个 block 给该文件使用。道目录的内容在记录文件名&#xff0c; 一般文件才是实际记录数据内容的地方。 目录 当我们在 Linux 下的文件系统创建一…

STM32 创建工程(库函数)

1.新建CORE ,FWLIB,OBJ,SYSTEM,USER五个文件夹 2.新建工程选择软件包 3.OBJ文件用来存放编译中间文件 4.FWLIB官方固件库包 src 存放的是固件库的.c 文件&#xff0c;inc 存放的是对应的.h 文件 直接从模板中粘贴进即可 5.CORE 6.USER文件夹需要复制的6个文件 7. 加入上面加入…

爱玩粥的有福了,带图形界面的明日方舟皮肤的员工管理系统,数据结构期末实训满分。

&#x1f4af; 博客内容&#xff1a;复习数据结构 &#x1f600; 作  者&#xff1a;陈大大陈 &#x1f680; 个人简介&#xff1a;一个正在努力学技术的准前端&#xff0c;专注基础和实战分享 &#xff0c;欢迎私信&#xff01; &#x1f496; 欢迎大家&#xff1a;这里是CS…

JavaEE学习的第三部分(重点在第四个知识点,SSM框架整合)

一、拦截器 Spring MVC的拦截器(Interceptor) 类似于Java Servlet的过滤器&#xff08;Filter&#xff09;。前面学习Java Web学过一点过滤器。 拦截器的作用 是拦截用户的请求&#xff0c;并做相应的处理 。例如在JSP提交表单数据给Controller&#xff0c;先是提交给拦截器的…

计算机毕业论文内容参考|基于Python的高校二手网络交易平台的设计与实现

文章目录 导文摘要前言绪论1课题背景2国内外现状与趋势3课题内容相关技术与方法介绍系统分析系统设计系统实现系统测试总结与展望1本文总结2后续工作展望导文 计算机毕业论文内容参考|基于Python的高校二手网络交易平台的设计与实现 摘要 本文设计并实现了一种基于Python的高校…

3、boostrap图片视频上传展示

boostrap图片视频上传展示 1、展示效果2、html代码 1、展示效果 项目目录结构 2、html代码 html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><!--<link rel"st…

免费使用!国产品牌JoySSL为中国高校网站(edu.cn)提供专属SSL证书

去年9月份&#xff0c;西北工业大学遭受境外网络攻击&#xff0c;目标就是为了窃取重要隐私信息。高校校园信息安全非常重要&#xff0c;因为高校网站是学校的重要门户之一&#xff0c;也是学生、教职工、家长等与学校沟通交流的重要平台。如果高校网站存在安全问题&#xff0c…

Python Dataframe-B更新Dataframe-A

假设现在有两个dataframe&#xff0c;分别是A和B&#xff0c;它们有相同的列text和label。现在想使用B的label来更新A的label&#xff0c;基于它们共同的text。 数据示例 import pandas as pd# Sample DataFrames A and B data_A {text: [text1, text2, text3, text4], labe…

【Nacos 学习记录】

Nacos学习 笔记记录 1. 什么是配置中心&#xff1f;2. 什么是Nacos3. Nacos两大特点3.1 配置管理3.2 服务发现 4. 安装Nacos Server4.1 启动服务器4.2 Java SDK拉取配置4.2.1 添加配置4.2.2 拉取配置4.1.1 OPEN API配置管理API 4.2 post发布配置4.3 get获得配置 1. 什么是配置中…