echarts双Y轴,并实现图例等
一个Y轴时yAxis为对象
yAxis: {type: 'value',name: '占比(%)'
},
两个Y轴时yAxis为数组
yAxis: [{ // 左侧的type: 'value',name: '占比(%)',nameTextStyle: {padding: [0, 0, 10, -50]},min: 0,max: 100,splitNumber: this.splitNumber, // 设置坐标轴的分割段数interval: 20, // 标轴分割间隔axisLabel: {formatter: function(v) {return v.toFixed(0) + '%'},color: function(value, index) {return value >= 1000 ? 'red' : 'green'}}},{ // 右侧的type: 'value',name: 'IPU',nameTextStyle: {padding: [0, 0, 10, 50]},min: minData2,max: maxData2,splitNumber: 5,interval: (maxData2 - minData2) / 5,axisLabel: {formatter: function(v) {return v.toFixed(2)}}}
]
双Y轴分割:
// 获取最大值const getMax = (arr)=> {var max = Math.max.apply(null, arr)var maxint = Math.ceil(max / 5)var maxval = maxint * 5 + 5return maxval}// 获取最小值const getMin= (arr)=> {var min = Math.min.apply(null, arr)var minint = Math.floor(min / 1)var minval = minint * 1 - 5return minval
}/*
splitNumber:表示分割数
interval:计算轴分割间隔 ( (maxData2 - minData2) / 5 ),也可以写死
*/
series中使用:
series: [{name: '占比',type: 'bar',color: ['#eb9f0d'],symbol: 'none',smooth: true,data: dataBar},{name: 'IPU',type: 'line',color: ['#969ac7'],// symbol: 'none',// smooth: true,yAxisIndex: 1, // 在单个图表实例中存在多个y轴的时候有用data: dataLine}
]
案例图片:
案例源码
<template><divv-loading="loading"class="main-echart"element-loading-text="拼命加载中"element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.1)"><div v-if="!loading" class="title">总IPU:1000 , 总占比98%</div><div id="echartLineBar" /></div>
</template>
<script>
import echarts from 'echarts'
export default {name: 'EchartLineBar',data() {return {splitNumber: 5,loading: true,dataBar: [{ 'name': '1', 'value': 20 },{ 'name': '2', 'value': 40 },{ 'name': '3', 'value': 30 },{ 'name': '4', 'value': 10 },{ 'name': '5', 'value': 50 },{ 'name': '6', 'value': 60 },{ 'name': '7', 'value': 80 },{ 'name': '8', 'value': 90 },{ 'name': '9', 'value': 5 }],dataLine: [{ 'name': '1', 'value': 134 },{ 'name': '2', 'value': 133 },{ 'name': '3', 'value': 132 },{ 'name': '4', 'value': 133 },{ 'name': '5', 'value': 129 },{ 'name': '6', 'value': 93 },{ 'name': '7', 'value': 90 },{ 'name': '8', 'value': 82 },{ 'name': '9', 'value': 20 }]}},mounted() {setTimeout(() => {this.initData(document.getElementById('echartLineBar'), {dataBar: this.dataBar, dataLine: this.dataLine})}, 1000)},methods: {initData(el, { dataBar = [], dataLine = [] }) {this.myChart = echarts.init(el)this.myChart.clear()// 调用方法,获取数据的最大值&最小值const dataLineArray = dataLine.map(n => n.value)var maxData2 = this.getMax(dataLineArray)var minData2 = this.getMin(dataLineArray)const option = {// 提示框tooltip: {trigger: 'axis',backgroundColor: '#ffffff',textStyle: {color: '#000000'},extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',formatter: function(params) {// let str = params[0].name + '<br/>'let str = '<div style="min-width:200px">'params.forEach(item => {if (item.seriesName == '占比') {str += `<div class='tooltipTrigger'>${item.marker} ${item.seriesName}分布详情 <br/> 名称:${item.data.name} <br/>值:${item.data.value}% <br/><br/></div>`} else if (item.seriesName == 'IPU') {str += `<div class='tooltipTrigger'>${item.marker} ${item.seriesName}分布详情 <br/> 名称:${item.data.name} <br/>值:${item.data.value} <br/><br/></div>`}})str += `</div>`return str}},// 图例组件legend: [{bottom: '0%',left: '40%',textStyle: {fontSize: 12, // 字体大小color: '#000000' // 字体颜色(图例与图例文字配色保持一致)},data: [{name: '占比'}]},{bottom: '0%',left: '50%',textStyle: {fontSize: 12, // 字体大小color: '#000000' // 字体颜色},data: [{name: 'IPU'}]}],// 直角坐标系内绘图网格grid: {show: true,x: 70,y: 50,x2: 70,y2: 50},xAxis: {name: '',type: 'category',data: ['10', '20', '30', '40', '50', '60', '70', '80', '90'],nameTextStyle: {padding: [0, 0, 50, 50]}},yAxis: [{type: 'value',name: '占比(%)',nameTextStyle: {padding: [0, 0, 10, -50]},min: 0,max: 100,splitNumber: this.splitNumber, // 设置坐标轴的分割段数interval: 20, // 标轴分割间隔axisLabel: {formatter: function(v) {return v.toFixed(0) + '%'},color: function(value, index) {return 'green'}}},{type: 'value',name: 'IPU',nameTextStyle: {padding: [0, 0, 10, 50]},min: minData2,max: maxData2,splitNumber: this.splitNumber,interval: (maxData2 - minData2) / this.splitNumber,axisLabel: {formatter: function(v) {return v.toFixed(2) // 0表示小数为0位,1表示1位小数,2表示2位小数}}}],series: [{name: '占比',type: 'bar',color: ['#eb9f0d'],symbol: 'none',smooth: true,data: dataBar},{name: 'IPU',type: 'line',color: ['#969ac7'],// symbol: 'none',// smooth: true,yAxisIndex: 1, // 在单个图表实例中存在多个y轴的时候有用data: dataLine}]}this.myChart.setOption(option)this.loading = false// 自适应布局const resizeFn = () => {this.myChart.resize()}window.removeEventListener('resize', resizeFn, false)window.addEventListener('resize', resizeFn, false)},getMax(arr) {var max = Math.max.apply(null, arr)var maxint = Math.ceil(max / 5)var maxval = maxint * 5 + 5return maxval},getMin(arr) {var min = Math.min.apply(null, arr)var minint = Math.floor(min / 1)var minval = minint * 1 - 5return minval}}
}
</script>
<style lang="scss" scoped>
.main-echart {width:100%;height: 550px;.title{margin-left: 20px;font-size: 14px;}#echartLineBar {width: 100%;height:500px;}
}
</style>
<style>
.tooltipTrigger{width: 100%;border-bottom: 2px dotted #999999;padding-top: 10px;
}
.tooltipTrigger:last-child{border: none;
}
</style>
相关文章:

echarts双Y轴,并实现图例等
一个Y轴时yAxis为对象 yAxis: {type: value,name: 占比(%) },两个Y轴时yAxis为数组 yAxis: [{ // 左侧的type: value,name: 占比(%),nameTextStyle: {padding: [0, 0, 10, -50]},min: 0,max: 100,splitNumber: this.splitNumber, // 设置坐标轴的分割段数interval: 20, // 标轴…...

STM32 工程移植 LVGL:一步一步完成
STM32 工程移植 LVGL:一步一步完成 LVGL,作为一款强大且灵活的开源图形库,专为嵌入式系统GUI设计而生,极大地简化了开发者在创建美观用户界面时的工作。作为一名初学者,小编正逐步深入探索LVGL的奥秘,并决…...
Linux中分析日志及问题排查
可以参考:Linux命令 Linux系统日志是系统管理和故障排查的关键工具。通过分析系统日志,我们能够深入了解系统的运行状况,迅速发现并解决潜在的问题。 1. 日志文件位置 系统日志通常存储在/var/log/目录下,不同的日志有不同的文件,如下: /var/log/syslog:系统日志,包含…...

复杂环境下实时鲁棒3D激光雷达定位
复杂环境下实时鲁棒3D激光雷达定位 一、摘要 定位是机器人领域的重要研究方向。本篇文章里,我们提出了一种基于3D激光雷达的复杂环境下的定位方案。我们首先使用GPS和雷达建立一张点云地图,然后在匹配定位的时候从大地图中分割出一个小地图,…...

9.3.k8s的控制器资源(deployment部署控制器)
目录 一、deployment部署控制器概念 二、deployment资源的清单编写 三、小结 功能 使用场景 原理 四、deployment实现升级和回滚 1.编辑deployment资源清单(v1版本) 2.创建service资源用于访问 编辑 3.修改deploy清单中pod镜像版本为V2 4…...

通过符号程序搜索提升prompt工程
原文地址:supercharging-prompt-engineering-via-symbolic-program-search 通过自动探索大量提示变体来找到更好的提示 2024 年 4 月 22 日 众所周知,LLMs的成功在很大程度上仍然取决于我们用正确的指导和例子来提示他们的能力。随着新一代LLMs变得越…...
js开启子线程及其使用
众所周知,js是单线程,但是可以开启子线程来帮忙处理一些数据,但是这个子线程是有限制的 1.必须是同源 2.完全受主线程控制 3.不能在子线程中操作dom节点 4.子线程没有window,可以使用self 5.等等 具体的查看官网 进程切换是要耗时…...

excel办公系列-图表元素及其作用
Excel图表元素及其作用 Excel图表由各种元素组成,每个元素都有其特定的作用,可以帮助我们更清晰地传达数据信息。下面将介绍Excel图表中常见的一些元素及其作用,并附上相关截图。 原始数据 月份 网站访问量 (万次) 销售额 (万…...

rocketmq dashboard控制台中topic状态无法展示
现象 在使用rocketmq控制台查看topic状态和订阅状态时,出现错误和没有信息的情况。 原因 rocketmq控制台版本问题,最新版本为1.0.1,支持rocketmq5版本,如果使用rocketmq4版本的服务无法兼容对应的数据。同理1.0.0版本也无法兼容ro…...
GPT每日面试题-Typescript中type和interface的区别
充分利用ChatGPT的优势,帮助我们快速准备前端面试。今日问题:typescript中type和interface的区别? Q:如果在前端面试中,被问到typescript的type和interface的区别是什么,怎么回答最好? A:当谈…...
python数据分析——大数据伦理风险分析
大数据伦理风险分析 前言一、大数据伦理二、大数据技术伦理风险2.1算法安全性、可信赖性及稳定性风险及其应对2.2算法的可解释性风险及其应对2.3算法的决策不可预见性风险及其应对2.4数据收集与储存中的泄漏风险及其应对2.5案例:某大型电商平台内部员工涉嫌窃取50亿…...

配置 Trunk,实现相同VLAN的跨交换机通信
1.实验环境 公司的员工人数已达到 100 人,其网络设备如图所示。现在的网络环境导致广播较多网速慢,并且也不安全。公司希望按照部门划分网络,并且能够保证一定的网络安全性。 其网络规划如下。 PC1和 PC3为财务部,属于VLAN 2&…...

Python 植物大战僵尸
文章目录 效果图项目结构实现思路源代码 效果图 项目结构 实现思路 下面是代码的实现思路: 导入必要的库和模块:首先,我们导入了Python的os、time库以及pygame库,还有植物大战僵尸游戏中用到的各个植物和僵尸的类。 初始化游戏和…...
SpringBoot:实战项目TLIAS智能学习辅助系统1.1
SpringBootWeb项目 TILAS智能学习辅助系统 需求 部门管理 查询部门列表 删除部门 新增部门 修改部门 员工管理 查询员工列表(分页) 删除员工 新增员工 修改员工 准备工作 导入依赖 web(2.7.6) mybatis mysql驱动 lombok 准备好包结构 Controller->Servi…...
ubuntu-meta-22.04桌面版+ros2-humble 镜像
ubuntu-meta-22.04桌面版ros2-humble 镜像 下载地址: 链接:https://pan.baidu.com/s/1PSBe4EqWch44OQUlkCCEig?pwdknty 提取码:knty 镜像文件较大,分成了两个压缩包,下载后直接解压ubuntu22.04-desk-meta-ros2-arm (…...

『大模型笔记』Code Example: Function Calling with ChatGPT
Code Example: Function Calling with ChatGPT 文章目录 一. Code Example: Function Calling with ChatGPT二. 参考文献一. Code Example: Function Calling with ChatGPT from openai import OpenAI from dotenv import load_dotenv import json# --------------------------…...

【智能算法应用】混合粒子群算法求解CVRP问题
目录 1.算法原理2.数学模型3.结果展示4.参考文献5.代码获取 1.算法原理 【智能算法】粒子群算法(PSO)原理及实现 经典PSO算法用于连续空间优化问题,VRP问题为离散组合优化问题,涉及如何有效地分配一组车辆去访问多个客户点&…...
Python项目开发实战:飞机大战游戏(案例教程)
一、引言 飞机大战游戏是一款经典的射击类游戏,玩家需要驾驶飞机在空中与敌人进行战斗,躲避敌人的攻击,同时发射子弹消灭敌人。本文将详细介绍如何使用Python及其相关库来开发一款简单的飞机大战游戏,包括游戏的设计思路、开发过…...

音频压缩的方法有哪些?3种简单的压缩工具分享
音频压缩的方法有哪些?音频压缩是处理音频文件时的一个重要步骤,旨在减小文件大小,同时尽量保持原始音频的质量。随着数字媒体的普及,音频文件的大小成为了一个重要的考虑因素。通过有效的音频压缩技术,我们能够在保持…...
阿里云CentOS7 打开/关闭防火墙 开放端口
#查看防火墙状态# systemctl status firewalld #关闭防火墙# systemctl stop firewalld #打开防火墙# systemctl start firewalld #添加开放2375端口# firewall-cmd --add-port2375/tcp --permanent #重载入添加的端口# firewall-cmd --reload #查询2375端口是否开启成…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误,它们的含义、原因和解决方法都有显著区别。以下是详细对比: 1. HTTP 406 (Not Acceptable) 含义: 客户端请求的内容类型与服务器支持的内容类型不匹…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名(Class Name)2.协议名(Protocol Name)3.方法名(Method Name)4.属性名(Property Name)5.局部变量/实例变量(Local / Instance Variables&…...

(二)原型模式
原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异,它们的数据同步要求既要保持数据的准确性和一致性,又要处理好性能问题。以下是一些主要的技术要点: 数据结构差异 数据类型差异ÿ…...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes࿰…...

MySQL 8.0 OCP 英文题库解析(十三)
Oracle 为庆祝 MySQL 30 周年,截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始,将英文题库免费公布出来,并进行解析,帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中,CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时,通常会导致应用响应缓慢,甚至服务不可用,严重影响用户体验和业务运行。因此,掌握一套科学有效的CPU飙高问题排查方法&…...

以光量子为例,详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学(silicon photonics)的光波导(optical waveguide)芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中,光既是波又是粒子。光子本…...

华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...
关于uniapp展示PDF的解决方案
在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项: 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库: npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...