echarts 实现双y轴折线图示例

news2024/12/27 16:29:11

该示例有如下几个特点:

        ①实现tooltip自定义样式(echarts 实现tooltip提示框样式自定义-CSDN博客)

        ②legend左右区分展示

        ③双y轴折线展示

代码如下:

this.options = {
  grid: {
    left: "3%",
    right: "3%",
    top: "12%",
    bottom: "5%",
    containLabel: true,
  },
  tooltip: {
    show: true,
    trigger: "axis",
    textStyle: {
      align: "left",
    },
    className: "custom-tooltip-box",
    formatter: function (params) {
      return `<div class='custom-tooltip-style'>
        <span>${params[0].name}年</span></br>
        <div class="span">
          <span>${params[0].seriesName}:</span>
          <span>${params[0].value}</span>
        </div>
        <div class="span">
          <span>${params[1].seriesName}:</span>
          <span>${params[1].value}</span>
        </div>
        <div class="span">
          <span>${params[2].seriesName}:</span>
          <span>${params[2].value}</span>
        </div>
      </div>`;
    },
  },
  legend: [
    {
      show: true,
      align: "left",
      left: "5%",
      textStyle: {
        color: "#ffffff",
        fontSize: "13",
      },
      itemWidth: 16,
      itemHeight: 2,
      itemGap: 13,
      icon: "rect",
      data: ["金额(十亿)"],
    },
    {
      show: true,
      align: "left",
      right: "5%",
      textStyle: {
        color: "#ffffff",
        fontSize: "13",
      },
      itemWidth: 16,
      itemHeight: 2,
      itemGap: 13,
      icon: "rect",
      data: ["项(千)", "件(千)"],
    },
  ],
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#355d8d",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#87C2FF66",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        margin: 14,
        fontSize: 12,
        textStyle: {
          color: "#fff", //X轴文字颜色
        },
      },
      data: this.yearList.x,
    },
  ],
  yAxis: [
    {
      type: "value",
      // name: "金额(十亿)",
      min: 0,
      // max: 200,
      nameTextStyle: {
        color: "#FFFFFF99",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#355d8d",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#87C2FF66",
        },
      },
      axisLabel: {
        margin: 14,
        formatter: "{value}",
        textStyle: {
          color: "#FFFFFF99",
        },
      },
    },
    {
      type: "value",
      // name: "项(千)",
      min: 0,
      // max: 200,
      nameTextStyle: {
        color: "#FFFFFF99",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#355d8d",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#87C2FF66",
        },
      },
      axisLabel: {
        margin: 14,
        formatter: "{value}",
        textStyle: {
          color: "#FFFFFF99",
        },
      },
    }
  ],
  series: [
    {
      name: "金额(十亿)",
      type: "line",
      // stack: "总量",
      symbol: "circle",
      showSymbol: false,
      smooth: true,
      // symbolSize: 8,
      itemStyle: {
        normal: {
          color: "#FF7474",
          lineStyle: {
            color: "#FF7474",
            width: 2,
          },
        },
      },
      markPoint: {
        itemStyle: {
          normal: {
            color: "pink",
          },
        },
      },
      yAxisIndex: 0,
      data: this.yearList.money,
    },
    {
      name: "项(千)",
      type: "line",
      // stack: "总量",
      symbol: "circle",
      showSymbol: false,
      smooth: true,
      // symbolSize: 8,
      itemStyle: {
        normal: {
          color: "#FFD029",
          lineStyle: {
            color: "#FFD029",
            width: 2,
          },
        },
      },
      yAxisIndex: 1,
      data: this.yearList.item,
    },
    {
      name: "件(千)",
      type: "line",
      // stack: "总量",
      symbol: "circle",
      showSymbol: false,
      smooth: true,
      // symbolSize: 8,
      itemStyle: {
        normal: {
          color: "#00C2FF",
          lineStyle: {
            color: "#00C2FF",
            width: 2,
          },
        },
      },
      yAxisIndex: 1,
      data: this.yearList.num,
    },
  ],
}

效果图如下:

该示例中的属性可在官网中查阅,若有其他疑问可私信留言互相交流学习~

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

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

相关文章

3GPP TS38.201 NR; Physical layer; General description (Release 18)

TS38.201是介绍性的标准&#xff0c;简单介绍了RAN的信道组成和PHY层承担的功能&#xff0c;下图是PHY层相关标准的关系。 文章目录 结构信道类型调制方式PHY层支持的过程物理层测量其他标准TS 38.202: Physical layer services provided by the physical layerTS 38.211: Ph…

docker笔记14--docker-nerdctl-crictl-ctr使用对比

docker笔记14--docker-nerdctl-crictl-ctr使用对比 介绍工具对比dockernerdctlcrictlctr 注意事项说明 介绍 随着容器云技术的成熟&#xff0c;越来越多的从业者开始接触、熟悉 docker和containerd 了&#xff0c;很多时候需要同时在 docker 和 containerd之间切换&#xff0c…

L1 频段卫星导航射频前端低噪声放大器芯片MS2659

产品简述 MS2659 是一款具有高增益、低噪声系数的低噪声放大器 (LNA) &#xff0c;支持 L1 频段多模式全球卫星定位&#xff0c;可以应用于 GPS 、 北斗二代、伽利略、 GLONASS 等 GNSS 导航接收机中。芯片采 用 SOT23-6 的封装形式。 主要特点 ◼ 支持北斗、 …

java调用c函数

一、关于JNI JNI是Java Native Interface的缩写&#xff0c;JNI是JAVA平台专门用于和本地C代码进行相互操作的API&#xff0c;称为JAVA本地接口。 二、JNI开发流程 1.在JAVA中先声明一个native方法。2.通过javac -h或javah -jni命令导出JNI使用的C头头文件。3.使用C实现本地方…

科普丨企业防泄密软件是什么

企业防泄密软件是一种专门设计用于保护企业敏感信息不被泄露的软件产品。这类软件通常采用多种安全技术和策略&#xff0c;以增强企业数据的安全性和保密性&#xff0c;防止核心知识产权和商业机密的泄露。 域之盾软件----企业防泄密软件的主要功能包括&#xff1a; 1、数据加密…

16位 (MCU) R7F101G6G3CSP、R7F101G6E3CSP、R7F101G6G2DSP、R7F101G6E2DSP是新一代RL78通用微控制器

产品描述 RL78/G24微控制器具有RL78系列MCU的最高处理性能&#xff0c;CPU工作频率高达48MHz&#xff0c;设有灵活的应用加速器 (FAA)。FAA是一款专门用于算法运算的协处理器&#xff0c;可以独立于CPU运行&#xff0c;提供更高处理能力。RL78/G24 MCU具有增强的模拟功能和大量…

【MySQL】表的约束——主键、外键、唯一键,三键区别知否?

表的约束 前言正式开始空属性默认值comment列描述zerofill主键增删主键复合主键 自增长唯一键外键主键作为外键约束唯一键作为外键约束 总结 前言 我在上一篇讲完了所有的数据类型&#xff0c;数据类型本身也是MySQL中的一种约束&#xff0c;如果你对于MySQL中的数据类型不太了…

【面试经典150 | 数学】加一

文章目录 写在前面Tag题目来源解题思路方法一&#xff1a;加一 其他语言python3 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于本题涉及到的数据结…

wu-ui-uniapp 多平台快速开发的UI框架

WU-UI 多平台快速开发的UI框架(无论平台&#xff0c;一致体验) 官方群 wu-ui官方1群: 767943089 说明 wu-ui(如虎添翼) 是 全面兼容多端的uniapp生态框架&#xff0c;基于vue2、vue3和nvue开发。丰富组件库&#xff0c;便捷工具库&#xff0c;简单高效。无论平台&#x…

电子眼与无人机在城市安防中的协同应用研究

随着城市化进程的快速推进&#xff0c;城市安全问题成为了人们关注的焦点。传统的安防手段已经无法满足现代城市复杂多变的安全需求。因此&#xff0c;结合电子眼与无人机技术&#xff0c;实现二者之间的协同应用&#xff0c;成为提升城市安防能力的重要途径。 一、电子眼与无人…

ArcGIS Pro 优化的热点分析【Optimized Hot Spot Analysis】

ArcGIS Pro 优化的热点分析【Optimized Hot Spot Analysis】Optimized Hot Spot Analysis 优化的热点分析https://mp.weixin.qq.com/s/lfoIls8exW5G6PPJ9gtDew em&#xff0c;先给大家推荐一个空间统计分析的学习资源网站 https://spatialstats-analysis-1.hub.arcgis.com/ .…

基于SSM的个人通讯录(有报告)。Javaee项目。

演示视频&#xff1a; 基于SSM的个人通讯录&#xff08;有报告&#xff09;。Javaee项目。 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 项目介绍&#xff1a; 采用M&#xff08;mod…

全新小权云黑系统

小权云黑管理系统 V1.0 功能如下&#xff1a; 1.添加骗子&#xff0c;查询骗子 2.可添加团队后台方便审核用 3.在线反馈留言系统 4.前台提交骗子&#xff0c;后台需要审核才能过 5.后台使用光年UI界面 6.新增导航列表&#xff0c;可给网站添加导航友链 7.可添加云黑类型收录 8.…

【Linux专题】firewalld 过滤出接口流量

【赠送】IT技术视频教程&#xff0c;白拿不谢&#xff01;思科、华为、红帽、数据库、云计算等等_厦门微思网络的博客-CSDN博客文章浏览阅读428次。风和日丽&#xff0c;小微给你送福利~如果你是小微的老粉&#xff0c;这里有一份粉丝福利待领取...如果你是新粉关注到了小微&am…

3分钟搞懂oled透明触摸显示屏

OLED透明触摸显示屏是一种先进的显示技术&#xff0c;它结合了OLED显示屏和触摸功能&#xff0c;具有透明度高、色彩鲜艳、触摸灵敏、节能环保等优点。下面用3分钟时间&#xff0c;为您讲解OLED透明触摸显示屏的基本原理、特点和优势。 OLED透明触摸显示屏的基本原理 OLED透明…

易点易动RFID管理系统:年终固定资产盘点的革命

随着现代企业规模的扩大和固定资产数量的增加&#xff0c;年终固定资产盘点成为了一项繁琐而耗时的任务。传统的手工盘点方法不仅效率低下&#xff0c;还容易出现错误和遗漏。为了解决这一难题&#xff0c;易点易动RFID管理系统应运而生。本文将重点介绍易点易动RFID管理系统在…

JMeter --- 生成HTML性能测试报告

一、生成HTML测试报告的两种方式 1、利用已有.jtl文件生成报告 上篇文章介绍过如何在linux环境运行jmeter并生成报告&#xff0c;如果已经有经过测试生成的.jtl文件&#xff0c;可以利用该文件直接生成HTML可视化测试报告。 进入jmeter的bin目录下&#xff0c;输入如下命令&…

鸿蒙应用开发初尝试《创建项目》,之前那篇hello world作废

经过几年的迅速发展&#xff0c;鸿蒙抛弃了JAVA写应用的方式&#xff0c;几年前了解的鸿蒙显然就gg了。 这几年鸿蒙发布了方舟&#xff08;ArkUI Arkts&#xff09;&#xff0c;将TypeScript作为了推荐开发语言&#xff0c;你依然可以用FAJS,但华为推荐用StageArkTs!!!那么你还…

Appium移动自动化测试--安装Appium

Appium 自动化测试是很早之前就想学习和研究的技术了&#xff0c;可是一直抽不出一块完整的时间来做这件事儿。现在终于有了。 反观各种互联网的招聘移动测试成了主流&#xff0c;如果再不去学习移动自动化测试技术将会被淘汰。 web自动化测试的路线是这样的&#xff1a;编程语…

虚拟机配置网络ip,主打一个详细

文章目录 一、前言二、安装vim编辑器三、检查联网状态1. 使用ping命令 四、查看ip五、ens33网卡六、开机启动ens33网卡七、获取子网地址和子网掩码八、配置网关与子网掩码1. 编辑虚拟网络信息2. 配置网关3. 配置ens33网卡信息 九、动态ip配置十、静态ip配置 一、前言 本文主要…