当前位置: 首页 > news >正文

Echarts面积图2.0(范围绘制)

代码:

// 以下代码可以直接粘贴在echarts官网的示例上
// 范围值
let normalValue = {type: '内部绘制',minValue: 200,maxValue: 750
}
// 原本的绘图数据
let seriesData = [820, 932, 901, 934, 1290, 1330, 1320]
let minData = Array.from({length: seriesData.length}, () => normalValue.minValue) 
let maxData = Array.from({length: seriesData.length}, () => normalValue.maxValue) 
// 获取当前折线图的y轴的最大值(用于两侧绘制) -- 在原本的绘图完成之后进行获取,然后进行重新配置和渲染
// getComponent参数:
// 参数一:轴名称 y轴 -- "yAxis"   x轴 -- "xAxis"
// 参数二:存在多个y轴时,求最值的对应轴的索引
// _extent的索引:0代表求最小值,1代表求最大值 
// let yAxisMax = myChart.getModel().getComponent("yAxis",0).axis.scale._extent[1]
// let yAxisMaxData = Array.from({length: seriesData.length}, () => yAxisMax) 
let yAxisMaxData = [1330,1330,1330,1330,1330,1330,1330] // 假数据option = {xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},tooltip: {show: true,trigger:  'axis',formatter: (params) => {let str = ''console.log('params',params)if (normalValue && params.length) { // 有正常值let marker = ''str = `<div><div>${params[0].name}</div>`params.forEach(item => {if(item.seriesName !== '范围值') {str += `<div>${item.marker}<span>${item.seriesName}:</span><span>${item.value}</span></div>`} else {marker = item.marker}})if(normalValue.type ==='一条线') {str += `<div>${marker}<span>范围值:</span><span>${normalValue.minValue}</span></div>`str += `</div>`} else {str += `<div>${marker}<span>范围值:</span><span>${normalValue.minValue}~${normalValue.maxValue}</span></div>`str += `</div>`}} else {str = params}return str}},legend: {data: ['1', '范围值']},yAxis: {type: 'value',max: 'dataMax'},series: [{name: '1',data: seriesData,type: 'line',},// 内部绘制 200-750// { // 最小值进行折线图的绘制//   name: '范围值',//   data: minData,//   type: 'line',//   stack: '内部绘制',//   symbol: 'none',//   legendHoverLink: false,//   triggerLineEvent: false,//   emphasis: {//     disabled: true//   },//   lineStyle: {//     color: 'transparent'//   }// },// {//   name: '范围值', // 最大值进行面积图的绘制//   data: maxData,//   type: 'line',//   stack: '内部绘制',//   triggerLineEvent: false,//   legendHoverLink: false,//   emphasis: {//     disabled: true//   },//   areaStyle: {//     color: '#e9fae9'//   },//   symbol: 'none',//   lineStyle: {//     color: 'rgba(255,255,255,0)'//   }// }// 范围值只有一个数据 200// {//   name: '范围值',//   data: minValue,//   type: 'line',//   symbol: 'none',//   legendHoverLink: false,//   triggerLineEvent: false,//   emphasis: {//     disabled: true//   },//   lineStyle: {//     color: '#e9fae9'//   }// },// 两侧绘制 200-750{ // 最大值正常绘制折线图name: '范围值',data: maxData,type: 'line',stack: '范围外',triggerLineEvent: false,legendHoverLink: false,emphasis: {disabled: true},symbol: 'none',lineStyle: {color: 'transparent'}},{ // y轴的最大值绘制面积图name: '范围值',data: yAxisMaxData,type: 'line',stack: '范围外',triggerLineEvent: false,legendHoverLink: false,emphasis: {disabled: true},areaStyle: {color: '#e9fae9'},symbol: 'none',lineStyle: {color: 'rgba(255,255,255,0)'}},{ // 最小值正常绘制面积图name: '范围值',data: minData,type: 'line',triggerLineEvent: false,legendHoverLink: false,emphasis: {disabled: true},areaStyle: {color: '#e9fae9'},symbol: 'none',lineStyle: {color: 'rgba(255,255,255,0)'}}]
};// if(normalValue) { // 有范围值的数据
//   option.legend.data.push('范围值')
//   let oneData = seriesData[0].data
//   let minData = Array.from({length: oneData.length}, () => normalValue.minValue) 
//   let maxData = Array.from({length: oneData.length}, () => normalValue.maxValue) 
//   if (normalValue.type === '内部绘制') {
//     option.series.push({ // 最小值进行折线图的绘制
//         name: '范围值',
//         data: minData,
//         type: 'line',
//         stack: '内部绘制',
//         symbol: 'none',
//         legendHoverLink: false,
//         triggerLineEvent: false,
//         emphasis: {
//           disabled: true
//         },
//         lineStyle: {
//           color: 'transparent'
//         }
//       },
//       {
//         name: '范围值', // 最大值进行面积图的绘制
//         data: maxData,
//         type: 'line',
//         stack: '内部绘制',
//         triggerLineEvent: false,
//         legendHoverLink: false,
//         emphasis: {
//           disabled: true
//         },
//         areaStyle: {
//           color: '#e9fae9'
//         },
//         symbol: 'none',
//         lineStyle: {
//           color: 'rgba(255,255,255,0)'
//         }
//       })
//   } else if (normalValue.type === '一条线') {
//     option.series.push({
//       name: '范围值',
//       data: minData,
//       type: 'line',
//       symbol: 'none',
//       legendHoverLink: false,
//       triggerLineEvent: false,
//       emphasis: {
//         disabled: true
//       },
//       lineStyle: {
//         color: '#e9fae9'
//       }
//     })
//   } else if(normalValue.type === '外部绘制') {
//     // 获取当前折线图的最大值
//     let yAxisMax = myEcharts.getModel().getComponent("yAxis",0).axis.scale._extent[1]
//     let yAxisMaxData = Array.from({length: oneData.length}, () => yAxisMax) 
//     option.series.push({ // 最大值正常绘制折线图
//       name: '范围值',
//       data: maxData,
//       type: 'line',
//       stack: '外部绘制',
//       triggerLineEvent: false,
//       legendHoverLink: false,
//       emphasis: {
//         disabled: true
//       },
//       symbol: 'none',
//       lineStyle: {
//         color: 'transparent'
//       }
//     },
//     { // y轴的最大值绘制面积图
//       name: '范围值',
//       data: yAxisMaxData,
//       type: 'line',
//       stack: '外部绘制',
//       triggerLineEvent: false,
//       legendHoverLink: false,
//       emphasis: {
//         disabled: true
//       },
//       areaStyle: {
//         color: '#e9fae9'
//       },
//       symbol: 'none',
//       lineStyle: {
//         color: 'rgba(255,255,255,0)'
//       }
//     },
//     { // 最小值正常绘制面积图
//       name: '范围值',
//       data: minData,
//       type: 'line',
//       triggerLineEvent: false,
//       legendHoverLink: false,
//       emphasis: {
//         disabled: true
//       },
//       areaStyle: {
//         color: '#e9fae9'
//       },
//       symbol: 'none',
//       lineStyle: {
//         color: 'rgba(255,255,255,0)'
//       }
//     })
//   }
//   myChart.setOption(option, true);
// }

效果:

① 内部绘制:
在这里插入图片描述

② 外部绘制:
在这里插入图片描述

③ 一条线:
在这里插入图片描述

相关文章:

Echarts面积图2.0(范围绘制)

代码&#xff1a; // 以下代码可以直接粘贴在echarts官网的示例上 // 范围值 let normalValue {type: 内部绘制,minValue: 200,maxValue: 750 } // 原本的绘图数据 let seriesData [820, 932, 901, 934, 1290, 1330, 1320] let minData Array.from({length: seriesData.len…...

flink checkpoint时exact-one模式和atleastone模式的区别

背景&#xff1a; flink在开启checkpoint的时候有两种模式可以选择&#xff0c;exact-one和atleastone模式&#xff0c;那么这两种模式有什么区别呢&#xff1f; exact-one和atleastone模式的区别 先说结论&#xff1a;exact-one可以完全做到状态的一致性&#xff0c;而atle…...

QEMU 仿真RISC-V freeRTOS 程序

1. 安裝RISC-V 仿真環境 --QEMU 安裝包下載地址: https://www.qemu.org/ 安裝命令及安裝成功效果如下所示, target-list 設定爲riscv32-softmmu, $ cat ~/project/qemu-8.0.4/install.sh sudo apt-get install libglib2.0-dev sudo apt-get install libpixman-1-dev ./co…...

用大白话来讲讲多线程的知识架构

感觉多线程的知识又多又杂&#xff0c;自从接触java&#xff0c;就在一遍一遍捋脉络和深入学习。现在将这次的学习成果展示如下。 什么是多线程&#xff1f; 操作系统运行一个程序&#xff0c;就是一个线程。同时运行多个程序&#xff0c;就是多线程。即在同一时间&#xff0…...

【uniapp】微信小程序 , 海报轮播图弹窗,点击海报保存到本地,长按海报图片分享,收藏或保存

uivew 2.0 uniapp 海报画板 DCloud 插件市场 第一步&#xff0c;下载插件并导入HbuilderX 第二步&#xff0c;文件内 引入 海报组件 <template><painter ref"haibaorefs"></painter> <template> <script>import painter from /comp…...

SpringBoot与前端交互遇到的一些问题

一、XXX.jar中没有主清单属性 场景&#xff1a; SpringBoot打的jar包在Linux运行报错 解决方案&#xff1a; 百度找了很多都是一样的答案&#xff0c;但是解决不了我的问题&#xff0c;于是我新建了一个springboot项目发现打的jar包可以在Linux上运行。检查了下只要把下面这2个…...

Maven介绍与配置+IDEA集成Maven+使用Maven命令

目录 一、Maven简介 二、配置环境变量 三、IDEA集成Maven 1.配置本地仓库地址 2.集成Maven 3. pom.xml文件介绍 四、Maven命令 jar包太多、jar包相互依赖、不方便管理、项目编译还需要jar包&#xff0c;Maven工具来帮你&#xff01; 一、Maven简介 Maven 是 Apache 软…...

毕业设计题目源码-毕业论文参考

目录 java语言ssm框架springboot框架微信小程序jspservletmysqljspservletsqlserverssh框架springmvc框架oracle无数据库 C#/asp/net语言B/S结构 浏览器模式C/S结构 窗体模式 安卓/androidapp 客户端appweb 客户端服务端 php语言php java语言 ssm框架 题目ssm828基于java的珠…...

SSH报错-Terminal shell path: C:\WINDOWS\System32\cmd.exe 此时不应有

最近接盘了实验室的工作&#xff0c;需要重新配置连接自己的VScode的SSH远程连接服务器&#xff0c;结果配置了一个下午都没搞好&#xff0c;决定记录一下&#xff0c;希望大家避免踩坑。在vscode上遇到的是这个报错&#xff1a; 错误日志 [11:40:12.097] Checking ssh with …...

Docker 轻量级可视化工具Portainer

1. 是什么 Portainer 是一款轻量级的应用&#xff0c;它提供了图形化界面&#xff0c;用于方便地管理Docker环境&#xff0c;包括单机环境和集群环境。 2. 安装 2.1 官网 https://www.protainer.io/ https://docs.portainer.io/ce-2.9/start/install/server/docker/linux 2.2 …...

站点平台技术架构

系统架构部署思维导图 平台模块分配&#xff1a; 1.账号模块 2.权限模块 3.站点模块 4.配置模块 5.系统升级 6.日志模块 一、前期工作 1.系统保持一致性方案&#xff1a; GIT版本控制&#xff1a;通过总控端向租户端发送一个更新同步请求&#xff0c;租户端收到请求后执行GI…...

一个以太坊合约的漏洞分析-重入攻击

请找出下列合约漏洞&#xff0c;并说明如何盗取ContractB 中的数字资产&#xff0c;并修复合约。中说明&#xff1a;ContractB 的contract_a接口为ContractA 地址 pragma solidity ^0.8.21; interface ContractA {function get_price() external view returns (uint256); }int…...

测试先行:探索测试驱动开发的深层价值

引言 在软件开发的世界中,如何确保代码的质量和可维护性始终是一个核心议题。测试驱动开发(TDD)为此提供了一个答案。与传统的开发方法相比,TDD鼓励开发者从用户的角度出发,先定义期望的结果,再进行实际的开发。这种方法不仅可以确保代码满足预期的需求,还可以在整个开…...

如何用Dockerfile部署LAMP架构

目录 构建LAMP镜像&#xff08;Dockerfile&#xff09; 第一步 创建工作目录 第二步 编写dockerfile文件 Dockerfile文件配置内容 第三步 编写网页执行文件 第四步 编写启动脚本 第五步 赋权并且构建镜像 第六步 检查镜像 第七步 创建容器 第八步 浏览器测试 构建LA…...

基于量子粒子群算法(QPSO)优化LSTM的风电、负荷等时间序列预测算法(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

SQL Server软件安装包分享(附安装教程)

目录 一、软件简介 二、软件下载 一、软件简介 SQL Server是一种关系型数据库管理系统&#xff0c;由美国微软公司开发。它被设计用于存储、管理和查询数据&#xff0c;被广泛应用于企业级应用、数据仓库和电子商务等场景。 以下是SQL Server软件的主要特点和功能&#xff1…...

基于Django的博客管理系统

1、克隆仓库https://gitee.com/lylinux/DjangoBlog.git 若失效&#xff1a;https://gitee.com/usutdzxy/DjangoBlog.git 2、环境安装 pip install -Ur requirements.txt3、修改djangoblog/setting.py 修改数据库配置&#xff0c;其他的步骤就按照官方文档。 DATABASES {def…...

windows系统依赖环境一键安装

window系统程序依赖库&#xff0c;可以联系我获取15958139685 脚本代码如下&#xff0c;写到1. bat文件中&#xff0c;双击直接运行&#xff0c;等待安装完成即可 Scku.exe -AVC.exe /SILENT /COMPONENTS"icons,ext\reg\shellhere,assoc,assoc_sh" /dir%1\VC...

centos7安装nacos

解决 Nacos 国内下载速度缓慢的问题 方案 1. 选择相应的版本源码下载 1.1 依次点击 1、2、3 选中我们的最新稳定版本 1.4.0 1.2 点击下载 ZIP、或者 clone 也行&#xff0c;这里都可以 2. 本地编译 2.1 预备环境准备 2.2 解压编译 3. 启动验证 3.1 解压 3.2 启动服务器 3…...

【python】python智能停车场数据分析(代码+数据集)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

云安全与网络安全:核心区别与协同作用解析

在数字化转型的浪潮中&#xff0c;云安全与网络安全作为信息安全的两大支柱&#xff0c;常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异&#xff0c;并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全&#xff1a;聚焦于保…...