echarts 实现双y轴折线图示例

该示例有如下几个特点:

        ①实现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,
    },
  ],
}

效果图如下:

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

目标检测—YOLO系列(二 ) 全面解读论文与复现代码YOLOv1 PyTorch

精读论文 前言 从这篇开始&#xff0c;我们将进入YOLO的学习。YOLO是目前比较流行的目标检测算法&#xff0c;速度快且结构简单&#xff0c;其他的目标检测算法如RCNN系列&#xff0c;以后有时间的话再介绍。 本文主要介绍的是YOLOV1&#xff0c;这是由以Joseph Redmon为首的…

测试开发环境下centos7.9下安装docker的minio

按照以下方法进行 1、安装docker&#xff0c;要是生产等还是要按照docker-ce yum install docker 2、启动docker service docker start 3、 查看docker信息 docker info 4、加到启动里 systemctl enable docker.service 5、开始docker pull minio/minio 但报错&#x…

【2023春李宏毅机器学习】快速了解机器学习基本原理

文章目录 机器学习约等于机器自动找一个函数 机器学习分类 regression&#xff1a;输出为连续值classification&#xff1a;输出为一个类别structured learning&#xff1a;又叫生成式学习generative learning 生成有结构的物件&#xff08;如&#xff1a;影像、句子&#xf…

Facebook内容的类型

随着人们日益依赖的社交媒体来进行信息获取与交流&#xff0c;Facebook作为全球最大的社交媒体平台之一&#xff0c;那么Facebook的内容都有哪些类型呢&#xff1f;下面小编来讲讲吧&#xff01; 1、实时发生的事 我们需要实时了解时事动态&#xff0c;这样可以使用户对品牌发…

CAN总线负载及CANoe查看总线负载率

文章目录 一、什么是CAN总线的负载率&#xff1f;二、负载率计算三、CANoe查看总线负载率 一、什么是CAN总线的负载率&#xff1f; 一般业内对负载率的定义为&#xff1a;实际数据传输速率和理论上能达到的数据传输速率的比值。 传输速率一般是按秒来计算&#xff0c;数据传输…

Shopee买家通系统是怎么操作自动下单的

Shopee买家通系统可以自动下单虾皮平台的产品&#xff0c;具体操作流程是先准备好能下单的账号&#xff08;没有账号可以直接准备资料后用软件进行注册&#xff09;&#xff0c;然后设置关键词及产品编号进行自动搜索、点击、浏览后进行添加购物车&#xff0c;最后再进行自动结…

自学人工智能难吗?

在人工智能风靡全球的时代&#xff0c;越来越多的人对学习人工智能产生了浓厚的兴趣。那么&#xff0c;自学人工智能难吗&#xff1f;今天&#xff0c;我们将为你揭开这个谜团&#xff0c;让你轻松开启智能未来之旅&#xff01; 一、自学人工智能——不再是难题 过去&#xf…

DS二叉树的存储

前言 我们上一期已经介绍了树相关的基础知识&#xff0c;了解了树相关的概念和结构、二叉树的概念和结构以及性质、也介绍了他的存储方式&#xff01;本期我们来根据上期介绍的对二叉树的顺序存储和链式存储分别进行实现&#xff01; 本期内容介绍 二叉树的顺序结构 堆的概念…

Unity优化(1)——合并Mesh的两种方法

在某些移动端项目中&#xff0c;对于DrawCall的要求是很严格的&#xff0c;我们一般查看DrawCall可以通过Statistics里面的Batches进行查看&#xff0c;一般对于移动设备的Batches要控制在200左右比较合适&#xff0c;所以降低Batches是很重要的。 我们常常会遇到一个物体下挂载…

【Mysql学习笔记】1 - Mysql入门

一、Mysql5.7安装配置 下载后会得到zip 安装文件解压的路径最好不要有中文和空格这里我解压到 D:\hspmysql\mysql-5.7.19-winx64 目录下 【根据自己的情况来指定目录,尽量选择空间大的盘】 添加环境变量 : 电脑-属性-高级系统设置-环境变量&#xff0c;在Path 环境变量增加mysq…

基于模拟退火算法优化概率神经网络PNN的分类预测 - 附代码

基于模拟退火算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于模拟退火算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于模拟退火优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神…

如何使你的软文更有质感?媒介盒子教你几招

软文作为企业推广的常用方式能够让企业以较低成本获得高转化率&#xff0c;然而在推广过程中&#xff0c;企业因为撰写的文案质量不高&#xff0c;无法吸引用户关注&#xff0c;甚至没给用户任何印象&#xff0c;因此如何写出质感文案是软文推广过程中需要着重关注的点&#xf…

MySQL事务特性原理

文章目录 事务四特性预备知识checkpoint机制redo日志redo的流程事务提交后什么时候进行刷盘 undo日志&#xff1a;数据还未被修改、也是备份Undo日志的作用undo的存储结构回滚段与事务回滚段中的数据分类undo的类型undo log的生命周期 MVCC一、 原子性原理如何通过undo日志实现…

菲律宾shopee怎么推广?shopee菲律宾站点什么好卖?——站斧浏览器

菲律宾shopee怎么推广 首先&#xff0c;要想在Shopee上成功推广自己的店铺&#xff0c;关键是提升店铺的曝光率。有多种方式可以增加店铺的曝光率&#xff0c;其中之一是使用Shopee提供的广告服务。 Shopee广告分为首页广告和搜索广告两种形式。商家可以根据自己的需求选择适…

Postman:API测试之Postman使用完全指南

Postman是一个可扩展的API开发和测试协同平台工具&#xff0c;可以快速集成到CI/CD管道中。旨在简化测试和开发中的API工作流。 Postman工具有Chrome扩展和独立客户端&#xff0c;推荐安装独立客户端。 Postman有个workspace的概念&#xff0c;workspace分personal和team类型…

【计算机网络学习之路】网络基础1

文章目录 前言一. 计算机网络发展局域网和广域网 二. 网络协议三. OSI七层模型四. TCP/IP四层&#xff08;五层&#xff09;模型五. 计算机体系结构与网络协议栈六. 协议形式及局域网通信数据包封装与分用 七. 跨网络通信八. MAC地址与网络通信的理解结束语 前言 本系列文章是…

plantuml最原始的主题如何设置

在startuml下一行添加 skin rose startuml skin rose:Hello world; :This is defined on several **lines**;enduml 效果如下&#xff1a; plantuml官网地址如下&#xff1a; ​​​​​​使用简单的文字描述画UML图的开源工具。轻松从简单的文字说明创建UML图。也有许多种可…

【proverif】proverif的语法3-认证协议的验证代码-案例分析

proverif-系列文章目录 【proverif】proverif的下载安装和初使用【proverif】proverif的语法1-解决中间人攻击-代码详解【proverif】proverif的语法2-各种密码原语的编码【proverif】proverif的语法3-认证协议的验证代码-案例分析 (本文) 文章目录 proverif-系列文章目录前言一…

【JVM】内存区域划分、类加载机制(双亲委派模型图解)、垃圾回收(可达性分析、分代回收)

一、JVM简介 JVM (Java虚拟机) 是执行Java字节码的虚拟机。它是Java平台的核心&#xff0c;并且为Java代码提供了跨平台的能力。JVM 是一种虚拟的计算机&#xff0c;在其上运行的程序是Java字节码&#xff0c;它提供了Java代码在不同操作系统和硬件平台上执行的能力。JVM 将Ja…

Selenium操作已经打开的Chrome浏览器窗口

Selenium操作已经打开的Chrome浏览器窗口 0. 背景 在使用之前的代码通过selenium操作Chrome浏览器时&#xff0c;每次都要新打开一个窗口&#xff0c;觉得麻烦&#xff0c;所以尝试使用 Selenium 获取已经打开的浏览器窗口&#xff0c;在此记录下过程 本文使用 chrome浏览器来…