echarts-坐标轴2

news2025/11/4 20:00:41

刻度的间隔

类目轴的间隔 interval

 xAxis: {
     type: "category",
     name: "x轴",
     axisLine: {
     },
     axisLabel: {
       show: true,
       color: "yellow",
       backgroundColor: "blue",
       interval: 5,
     },
     data: [
       11, 22, 322, 422, 522, 622, 722, 822, 229, 1220, 1, 22, 322, 422, 522,
       622, 722, 822, 229, 1220,
     ],
   },

时间轴的间隔 minInterval,maxInterval

 let options = {
    xAxis: {
      type: "time",
      name: "x轴",
      axisLine: {
        show: true,
        symbol: ["none", "arrow"],
        symbolOffset: [0, 12],
      },
      axisLabel: {
        show: true,
        color: "yellow",
        backgroundColor: "blue",
        //  interval: 5,
      },
      interval: 120 * 24 * 3600 * 1000, //强制设置坐标轴分割间隔。一般不会生效，可以不用设置。
      minInterval: 120 * 24 * 3600 * 1000,  //坐标轴最小间隔大小
      maxInterval: 120 * 24 * 3600 * 1000, //坐标轴最大间隔大小。
      // data: data,
    },
    yAxis: {},
    series: [
      {
        id: 0,
        name: "d1",
        type: "line",
        data: data,
      },
    ],
  };

在这里插入图片描述

数值轴一般不建议设置间隔

 let options = {
    xAxis: { },
    yAxis: {
      name: "y轴",
      interval: 1,
    },
    series: [],
  };

在这里插入图片描述
min和 max只用数值轴才支持。

  xAxis: {
  },
   yAxis: {
     name: "y轴",
     min: 1,
     max: 50,
  },

在这里插入图片描述

网格线

splitLine

 let options = {
    xAxis: {
      type: "time",
      name: "x轴",
      axisLine: {},
      axisLabel: {},
      minInterval: 120 * 24 * 3600 * 1000,
      maxInterval: 120 * 24 * 3600 * 1000,
      splitLine: {
        show: true,
        lineStyle: {
          color: ["#fff", "black"],
          type: "dashed",
        },
      },
    },
    yAxis: {
      name: "y轴",
      min: 1,
      max: 50,
      splitLine: {
        show: true,
        lineStyle: {
          color: ["red", "blue"],
        },
      },
    },
    series: [
      {
        id: 0,
        name: "d1",
        type: "line",
        data: data,
      },
    ],
  };

在这里插入图片描述

grid 直角坐标系内绘图网格

可以调整网格的位置、背景色边框等。

 let options = {
    grid: {
      show: true,
      backgroundColor: "yellow",
      borderWidth: 10,
      borderColor: "red",
      left: "30%",
      top: "5%",
    },
    xAxis: {
      type: "time",
      name: "x轴",
      axisLine: {},
      axisLabel: {},
      minInterval: 120 * 24 * 3600 * 1000,
      maxInterval: 120 * 24 * 3600 * 1000,
      splitLine: {
        show: true,
        lineStyle: {
          color: ["#fff", "black"],
          type: "dashed",
        },
      },
    },
    yAxis: {
      name: "y轴",
      min: 1,
      max: 50,
      splitLine: {
        show: true,
        lineStyle: {
          color: ["red", "blue"],
        },
      },
    },
    series: [
      {
        id: 0,
        name: "d1",
        type: "line",
        data: data,
      },
    ],
  };

在这里插入图片描述

原点的调整

原点不能自己调整，只能通过数据来改变。
例如有负值时，x轴会在中间。

 const d1 = [-10, -20, -30, 0, 10, 20, 30];
  let options = {
    xAxis: {
      type: "category",
      name: "x轴",
      axisLine: {},
      axisLabel: {},
      data: [1, 2, 3, 4, 5, 6, 7],
    },
    yAxis: {name: "y轴",},
    series: [
      {
        id: 0,
        name: "d1",
        type: "line",
        data: d1,
      },
    ],
  };

在这里插入图片描述

多坐标轴

多y轴

yAxis 可以设为数组，存放多个对象

 const d1 = [10, 20, 30, 0, 10, 20, 30];
  let options = {
    xAxis: {
      type: "category",
      name: "x轴",
      axisLine: {},
      axisLabel: { },
      data: [1, 2, 3, 4, 5, 6, 7],
    },
    tooltip: {
      show: true,
      axisPointer: {
        type: "cross", //十字准星指示器
      },
    },
    yAxis: [
      {
        name: "个",
      },
      {
        name: "元",
      },
    ],
    series: [
      {
        id: 0,
        name: "d1",
        type: "line",
        data: d1,
      },
    ],
  };

在这里插入图片描述

多x轴

xAxis也可以设为数组，存放多个对象

 const d1 = [10, 20, 30, 0, 10, 20, 30];
  let options = {
    xAxis: [
      {
        type: "category",
        name: "x轴",
        axisLine: {
          show: true,
        },
        axisLabel: {
          show: true,
          color: "yellow",
          backgroundColor: "blue",
        },
        data: [1, 2, 3, 4, 5, 6, 7],
      },
      {
        type: "category",
        name: "x轴2",
        position: "bottom",
        offset: -30,
        data: ["星期1", "星期2", "星期3", "星期4", "星期5", "星期6", "星期天"],
      },
    ],

    tooltip: {
      show: true,
      axisPointer: {
        type: "cross", //十字准星指示器
      },
    },
    yAxis: [
      {
        name: "个",
        axisLine: {
          show: true,
        },
      },
      {
        name: "元",
        axisLine: {
          show: true,
        },
        data: [10, 20, 30, 40],
      },
    ],
    series: [
      {
        id: 0,
        name: "d1",
        type: "line",
        data: d1,
      },
    ],
  };

在这里插入图片描述

多坐标系

grid可以是一个数组，设置多个直角坐标系内绘图网格。
xAxis和yAxis有个gridIndex可以匹配对应的grid。
series里的数据也有 yAxisIndex和 xAxisIndex去匹配对应的grid。

 const d1 = [10, 20, 30, 0, 10, 20, 30];
  let options = {
    grid: [
      {
        width: "30%",
      },
      {
        width: "40%",
        left: "50%",
      },
    ],
    xAxis: [
      {
        gridIndex: 0,
        type: "category",
        name: "x轴",
        axisLine: {
          show: true,
        },
        axisLabel: {
          show: true,
          color: "yellow",
          backgroundColor: "blue",
        },
        data: [1, 2, 3, 4, 5, 6, 7],
      },
      {
        gridIndex: 1,
        type: "category",
        name: "x轴2",
        position: "bottom",

        data: ["星期1", "星期2", "星期3", "星期4", "星期5", "星期6", "星期天"],
      },
    ],

    tooltip: {
      show: true,
      axisPointer: {
        type: "cross", //十字准星指示器
      },
    },
    yAxis: [
      {
        gridIndex: 0,
        name: "个",
        axisLine: {
          show: true,
        },
      },
      {
        gridIndex: 1,
        name: "元",
        axisLine: {
          show: true,
        },
      },
    ],
    series: [
      {
        yAxisIndex: 0,
        xAxisIndex: 0,
        name: "d1",
        type: "line",
        data: d1,
      },
      {
        yAxisIndex: 1,
        xAxisIndex: 1,
        name: "d2",
        type: "line",
        data: d1,
      },
    ],
  };

在这里插入图片描述

多坐标系联动

axisPointer 坐标轴指示器配置项。
坐标轴指示器是指示坐标轴当前刻度的工具。
tooltip.axisPointer 是配置坐标轴指示器的快捷方式。

在这里插入图片描述
link ：可以使不同轴的 axisPointer 可以进行联动。
link 是一个数组，其中每一项表示一个 link group，一个 group 中的坐标轴互相联动。

const d1 = [10, 20, 30, 0, 10, 20, 30];
 let options = {
   grid: [
     {
       width: "30%",
     },
     {
       width: "40%",
       left: "50%",
     },
   ],
   axisPointer: {
     link: [
         {
           xAxisIndex: "all"
            // 也可以用 yAxisName: 'someName'
         }, {
          yAxisIndex: "all" 
        }
      ],
   },
   xAxis: [
     {
       gridIndex: 0,
       type: "category",
       name: "x轴",
       axisLine: {
         show: true,
       },
       axisLabel: {
         show: true,
         color: "yellow",
         backgroundColor: "blue",
       },
       data: [1, 2, 3, 4, 5, 6, 7],
     },
     {
       gridIndex: 1,
       type: "category",
       name: "x轴2",
       position: "bottom",

       data: ["星期1", "星期2", "星期3", "星期4", "星期5", "星期6", "星期天"],
     },
   ],

   tooltip: {
     show: true,
     axisPointer: {
       type: "cross", //十字准星指示器
     },
   },
   yAxis: [
     {
       gridIndex: 0,
       name: "个",
       axisLine: {
         show: true,
       },
     },
     {
       gridIndex: 1,
       name: "元",
       axisLine: {
         show: true,
       },
     },
   ],
   series: [
     {
       yAxisIndex: 0,
       xAxisIndex: 0,
       name: "d1",
       type: "line",
       data: d1,
     },
     {
       yAxisIndex: 1,
       xAxisIndex: 1,
       name: "d2",
       type: "line",
       data: d1,
     },
   ],
 };

在这里插入图片描述

几个axisPointer的优先级问题

在这里插入图片描述

axisPointer的优先级高于xAxis的axisPointer和tooltip的axisPointer。有些配置 axisPointer没有，可以在tooltip修改

 let options = {
    grid: [
      {
        width: "30%",
      },
      {
        width: "40%",
        left: "50%",
      },
    ],
    axisPointer: {
      show: true,
      link: [{ xAxisIndex: "all" }, { yAxisIndex: "all" }],
    },
    xAxis: [
      {
        gridIndex: 0,
        type: "category",
        name: "x轴",
        axisLine: {
          show: true,
        },
        axisLabel: {
          show: true,
          color: "yellow",
          backgroundColor: "blue",
        },
        data: [1, 2, 3, 4, 5, 6, 7],
        axisPointer: {
          show: false,
        },
      },
      {
        gridIndex: 1,
        type: "category",
        name: "x轴2",
        position: "bottom",

        data: ["星期1", "星期2", "星期3", "星期4", "星期5", "星期6", "星期天"],
      },
    ],

   tooltip: {
      show: true,
      axisPointer: {
        type: "none", 
        label: {
          show: true,
          textStyle: {
            color: "#fff",
          },
        },
      },
    },
    yAxis: [],
    series: [ ],
  };

在这里插入图片描述

坐标轴的 axisPointer优先级高于tooltip的axisPointer

 let options = {
    grid: [
      {
        width: "30%",
      },
      {
        width: "40%",
        left: "50%",
      },
    ],

    xAxis: [
      {
        gridIndex: 0,
        type: "category",
        name: "x轴",
        axisLine: {
          show: true,
        },
        axisLabel: {
          show: true,
          color: "yellow",
          backgroundColor: "blue",
        },
        data: [1, 2, 3, 4, 5, 6, 7],
        axisPointer: {
          show: true,
        },
      },
      { },
    ],

    tooltip: {
      show: true,
      axisPointer: {
        type: "none",
        label: {
          show: true,
          textStyle: {
            color: "#fff",
          },
        },
      },
    },
    yAxis: [],
    series: [],
  };

在这里插入图片描述

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

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

相关文章

k8s集群安装后CoreDNS 启动报错plugin/forward: no nameservers found

k8s集群安装后CoreDNS 启动报错plugin/forward: no nameservers found

安装k8s过程中遇到的问题： 基本信息 系统版本：ubuntu 22.04 故障现象： coredns 报错：plugin/forward: no nameservers found 故障排查： #检查coredns的配置，发现有一条转发到/etc/resolv.conf的配置…
阅读更多...
哪些类型的产品适合用3D形式展示？

哪些类型的产品适合用3D形式展示？

随着3D技术的蓬勃发展，众多品牌和企业纷纷投身3D数字化浪潮，将产品打造成逼真的3D模型进行展示，消费者可以更加直观地了解产品的特点和优势，从而做出更明智的购买决策。 哪些产品适合3D交互展示？ 产品3D交互展示具有直…
阅读更多...
云计算事件响应优秀实践

云计算事件响应优秀实践

云计算如今已经成为一种主流技术，随着云安全的日益普及，他们正在与德迅云团队合作，致力于开始保护其云计算系统。 云计算如今已经成为一种主流技术，几乎所有组织都在公有云中运行一些资源——无论是网站、游戏、app、小程序。德迅…
阅读更多...
钡铼BL205分布式IO在精密机械加工自动化中的精准控制OPC UA

钡铼BL205分布式IO在精密机械加工自动化中的精准控制OPC UA

随着工业自动化技术的不断发展，精密机械加工领域对于高效、精准的控制需求日益增加。在这一背景下，钡铼BL205分布式IO的出现为精密机械加工自动化注入了新的活力和可能性。本文将探讨钡铼BL205分布式IO在精密机械加工自动化中的应用，尤其是其…
阅读更多...
LeetCode算法题：42. 接雨水（Java）

LeetCode算法题：42. 接雨水（Java）

题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图，计算按此排列的柱子，下雨之后能接多少雨水。 示例 1： 输入：height [0,1,0,2,1,0,1,3,2,1,2,1] 输出：6 解释：上面是由数组 [0,1,0,2,1,0,1,3…
阅读更多...
c4d云渲染是工程文件会暴露吗?

c4d云渲染是工程文件会暴露吗?

在数字创意产业飞速发展的今天，C4D云渲染因其高效便捷而备受欢迎。然而，随着技术应用的深入，人们开始关注一个核心问题：在享受云渲染带来的便利的同时，C4D工程文件安全吗？是否会有暴露的风险？下…
阅读更多...
企业微信主体机构如何修改?

企业微信主体机构如何修改?

企业微信变更主体有什么作用？ 做过企业运营的小伙伴都知道，很多时候经常会遇到现有的企业需要注销，切换成新的企业进行经营的情况，但是原来企业申请的企业微信上面却积累了很多客户，肯定不能直接丢弃，所以这…
阅读更多...
【安装笔记-20240523-Windows-安装测试 ShareX】

【安装笔记-20240523-Windows-安装测试 ShareX】

安装笔记-系列文章目录 安装笔记-20240523-Windows-安装测试 ShareX 文章目录 安装笔记-系列文章目录安装笔记-20240523-Windows-安装测试 ShareX 前言一、软件介绍名称：ShareX主页官方介绍 二、安装步骤测试版本：16.1.0下载链接功能界面 三、应用场景屏…
阅读更多...
Jenkins安装 ：AWS EC2 Linux

Jenkins安装 ：AWS EC2 Linux

1 JDK11 install # 用的yum安装 # 压缩包安装，下载的jdk-11.0.22_linux-x64_bin.tar.gz在EC2解压，配置环境变量，运行jenkins的时候会报错$ yum -y list java-11* Available Packages java-11-amazon-corretto-devel.x86_64 …
阅读更多...
STM32_HAL_RTC时钟

STM32_HAL_RTC时钟

1. RTC 时钟简介 STM32F407 的实时时钟（RTC）是一个独立的定时器。 STM32 的 RTC 模块拥有一组连续计数的计数器，在相对应的软件配置下，可提供时钟日历的功能。修改计数器的值可以重新设置系统的当前时间和日期。 RTC 模块和时钟配…
阅读更多...
antd-vue a-tree 当两个不同一级下二级key相同的时候就会导致两个同时选择， 拿到node.parent的数据也会出问题， 解决办法

antd-vue a-tree 当两个不同一级下二级key相同的时候就会导致两个同时选择， 拿到node.parent的数据也会出问题， 解决办法

一、问题如下图： 当两个不同一级下二级key相同的时候就会导致两个同时选择， 同时拿到node.parent的数据也会出问题, 出现一下问题的原因是因为数据treeData 的key出现相同的了 然后如下图、因为我的查询条件 第二层是给 cloud , 第二层是给 relatedPool…
阅读更多...
1、pikachu靶场之xss钓鱼复现

1、pikachu靶场之xss钓鱼复现

一、复现过程 1、payload <script src"http://127.0.0.1/pkxss/xfish/fish.php"></script> 将这段代码插入到含有储存xss的网页上&#xff0c;如下留言板 2、此时恶意代码已经存入数据库&#xff0c;并存在网页中&#xff0c;当另一个用户打开这个网页…
阅读更多...
WPF中快速使用iconfont中的icon图标资源

WPF中快速使用iconfont中的icon图标资源

在WPF开发中经常需要用到Icon图标&#xff0c;我们这用用的是Iconfont网站查找icon的资源&#xff0c;本文讲如何把iconfont图标资源当成字体文件导入到WPF程序中使用。 查找打包资源 1.在Iconfont官网查找资源 根据自己需要查找&#xff0c;资源然后添加到购物车 https://…
阅读更多...
windows Oracle 11g服务器端和客户端安装 SQLark连接ORACLE

windows Oracle 11g服务器端和客户端安装 SQLark连接ORACLE

1 从ORACLE官网下载数据库安装包 https://edelivery.oracle.com/osdc/faces/SoftwareDelivery 2:安装数据库 注意&#xff1a;在加载组件的这一步&#xff0c;如果你的电脑里面有杀毒软件&#xff0c;首先把安装目录加入白名单&#xff0c;要不然可能会一直加载组件失败。…
阅读更多...
netdiscover一键收集子网内的所有信息（KALI工具系列六）

netdiscover一键收集子网内的所有信息（KALI工具系列六）

目录 1、KALI LINUX简介 2、netdiscover工具简介 3、在KALI中使用netdiscover 3.1 目标主机IP&#xff08;win&#xff09; 3.2 KALI的IP 4、命令示例 4.1 扫描子网整个网段 4.2 指定网卡进行扫描 4.3 扫描网卡的公共网络 4.4 快速扫描网卡的公共lan地址 4.5 设置…
阅读更多...
echart指定坐标markline

echart指定坐标markline

效果如图&#xff1a; 测试代码&#xff0c;可以直接黏贴到echart测试页面中 https://echarts.apache.org/examples/zh/editor.html?cline-simple option {xAxis: {type: value,data: [1, 2, 3, 4, 6, 8, 10]},yAxis: {type: value},series: [{data: [5, 5, 5, null, 6, 6…
阅读更多...
UNI-APP设置屏幕保持常亮-不熄灭屏幕

UNI-APP设置屏幕保持常亮-不熄灭屏幕

前言 最近在实际开发过程中&#xff0c;我们会发现在自己使用的app当中会根据系统无操作熄灭屏幕对于一下需要长时间保持屏幕的业务就很不友好&#xff0c;uni-app也是提供了相应方法加上代码之后-注意app端没报错-不生效就是权限问题-需要设置相对应权限-打自定义包 代码实现…
阅读更多...
Plesk中如何移除之前添加的域名

Plesk中如何移除之前添加的域名

我这边想要移除我之前绑定到主机的域名&#xff0c;但是不知道如何在主机上面进行移除&#xff0c;由于我使用的Hostease的Windows虚拟主机产品默认带普通用户权限的Plesk面板&#xff0c;但是不知道如何在Plesk上操作移除域名&#xff0c;因为也是对于Hostease主机产品不是很了…
阅读更多...
储油罐智控：ThingsBoard网关实现液位温度精准监测

储油罐智控：ThingsBoard网关实现液位温度精准监测

储油罐是采油、炼油企业储存油品的重要设备&#xff0c;对储油罐液位、温度的实时数据监测对企业的库存和安全管理有着重大意义。 场景 对于企业&#xff0c;尤其是加油站来说&#xff0c;高效的罐体液位、温度监测对于优化燃油库存、防止短缺或过剩至关重要。不准确的燃油液位…
阅读更多...
GS5812G 21V、2A同步降压DC/DC转换器芯片IC

GS5812G 21V、2A同步降压DC/DC转换器芯片IC

一般描述 该GS5812G是一个同步降压DC/DC转换器与快速恒定的时间(FCOT)模式控制。该器件提供4. 5V至21V的输入电压范围和2A连续负载电流能力。它是恒定时间脉宽调制(PWM)控制器&#xff0c;支持 FCOT模式控制。工作频率取决于输入和输出电压条件。 该GS5812G故障…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023