Echarts面积图2.0(范围绘制)

news/2024/5/21 2:51:57/文章来源:https://blog.csdn.net/Y1914960928/article/details/132422423

代码:

// 以下代码可以直接粘贴在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);
// }

效果:

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

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

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

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

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

相关文章

【面试经典150题】移除元素·JavaScript版

题目来源 大致思路&#xff1a;遍历数组&#xff0c;如果遇到值为val的元素&#xff0c;使用数组最后一个元素替换它。详细过程&#xff1a; /*** param {number[]} nums* param {number} val* return {number}*/ var removeElement function(nums, val) {let i0,nnums.leng…

Android NDK JNI与Java的相互调用

一、Jni调用Java代码 jni可以调用java中的方法和java中的成员变量,因此JNIEnv定义了一系列的方法来帮助我们调用java的方法和成员变量。 以上就是jni调用java类的大部分方法,如果是静态的成员变量和静态方法,可以使用***GetStaticMethodID、CallStaticObjectMethod等***。就…

基于nginx禁用访问ip

一、背景 网络安全防护时&#xff0c;禁用部分访问ip,基于nginx可快速简单实现禁用。 二、操作 1、创建 conf.d文件夹 在nginx conf 目录下创建conf.d文件夹 Nginx 扩展配置文件一般在conf.d mkdir conf.d 2、新建blocksip.conf文件 在conf.d目录新建禁用ip的扩展配置文…

C++Qt堆叠窗体的使用案例

本博文源于笔者最近学习的Qt&#xff0c;内容讲解堆叠窗体QStackedWidget案例&#xff0c;效果是选择左侧列表框中不同的选项时&#xff0c;右侧显示所选的不同的窗体。 案例效果 案例书写过程 控件都是动态创建的&#xff0c;因此.h文件需要创建控件&#xff0c;.cpp书写业务…

网络:RIP协议

1. RIP协议原理介绍 RIP是一种比较简单的内部网关协议&#xff08;IGP协议&#xff09;&#xff0c;RIP基于距离矢量的贝尔曼-福特算法(Bellman - Ford)来计算到达目的网络的最佳路径。最初的RIP协议开发时间较早&#xff0c;所以在带宽、配置和管理方面的要求也较低。 路由器运…

HarmonyOS开发第一步,熟知开发工具DevEco Studio

俗话说的好&#xff0c;工欲善其事&#xff0c;必先利其器&#xff0c;走进HarmonyOS第一步&#xff0c;开发工具必须先行&#xff0c;当然了&#xff0c;关于开发工具的使用&#xff0c;官网和其他的博客也有很多的讲解&#xff0c;但是并没有按照常用的功能进行概述&#xff…

基于SpringBoot房产销售系统【附ppt|开题|万字文档(LW)和搭建文档】

主要功能 前台界面&#xff1a; ①首页、房源信息推荐、房源信息展示、查看更多等 ②房源信息、房源名称、房源户型、销售姓名等 ③购房、预约、点我收藏、评论等 ④个人中心、我的收藏、支付等 后台登录&#xff1a; ①首页、个人中心&#xff1a;修改密码、用户信息管理等 ②…

图像检索,目标检测map的实现

一、图像检索指标Rank1,map 参考&#xff1a;https://blog.csdn.net/weixin_41427758/article/details/81188164?spm1001.2014.3001.5506 1.Rank1: rank-k&#xff1a;算法返回的排序列表中&#xff0c;前k位为存在检索目标则称为rank-k命中。 常用的为rank1&#xff1a;首…

启动Vue项目踩坑记录

前言 在启动自己的Vue项目时&#xff0c;遇到一些报错&#xff0c;当时很懵&#xff0c;解决了以后豁然开朗&#xff0c;特写此博客记录一下。 一、<template>里多加了个div标签 [vite] Internal server error: At least one <template> or <script> is req…

LLMs训练的算力优化Computational challenges of training LLMs

当您尝试训练大型语言模型时&#xff0c;您仍然经常遇到的最常见问题之一是内存不足。如果您曾尝试在Nvidia GPU上训练或甚至只是加载模型&#xff0c;那么这个错误消息可能看起来很熟悉。 CUDA&#xff0c;即Compute Unified Device Architecture的缩写&#xff0c;是为Nvid…

IDEA项目实践——VUE介绍与案例分析

系列文章目录 IDEA项目实践——JavaWeb简介以及Servlet编程实战 IDEA项目实践——Spring集成mybatis、spring当中的事务 IDEA项目实践——Spring当中的切面AOP IDEWA项目实践——mybatis的一些基本原理以及案例 IDEA项目实践——Spring框架简介&#xff0c;以及IOC注解 I…

C++day2作业(2023.8.22)

1.定义一个学生的结构体&#xff0c;包含学生的姓名&#xff0c;年龄&#xff0c;成绩&#xff0c;性别&#xff0c;学生的成绩&#xff0c;姓名&#xff0c;定义为私有权限&#xff1b;定义一个学生类型的结构体变量&#xff0c;设置公有函数用于给学生的成绩和名字进行赋值&a…

17.2 【Linux】通过 systemctl 管理服务

systemd这个启动服务的机制&#xff0c;是通过一支名为systemctl的指令来处理的。跟以前 systemV 需要 service / chkconfig / setup / init 等指令来协助不同&#xff0c; systemd 就是仅有systemctl 这个指令来处理而已。 17.2.1 通过 systemctl 管理单一服务 &#xff08;s…

基于MATLAB开发AUTOSAR软件应用层Code mapping专题-part 5 Signal/States标签页介绍

这一篇我们说下signals和State这两个怎么搞做映射,那首先我们要知道什么是Signal和state,我们看下模型, 在原来的模型里我增加了标红的圆圈处delay模块,这个delay模块就是一个state模块,表示离散的一个状态,这个是个模型的基本概念,后续我有个专栏交接simulink建模,那…

%f占位符

介绍&#xff1a; %f &#xff0c;用来输出实数&#xff08;包括单双精度&#xff09;&#xff0c;以小数形式输出。 通常情况下&#xff0c;当输入的数值或者打印的数值是float类型数据时&#xff0c;使用%f &#xff0c;当然在精度更高的double数据类型下&#xff0c;也可以…

使用mysql:5.6和 owncloud 镜像,构建一个个人网盘

一.拉取镜像 docker pull mysql:5.7 docker pull owncloud 二.创建容器 1.MySQL容器 docker run -d --name db1 -p 3306:3306 -e MYSQL_ROOT_PASSWORD123456. -e MYSQL_DATABASEowncloud -e MYSQL_USERowncloud -e MYSQL_PASSWORDowncloud mysql:5.7 docker run: 创建和运行…

HexoAssistant——博客上传助手(含源码)

文章目录 HexoAssistant——博客上传助手(含源码)1 前言2 效果演示3 源码地址4 总结 HexoAssistant——博客上传助手(含源码) 1 前言 旅行之余&#xff0c;用PyQt5写了一个博客上传的工具&#xff0c;旨在更加便捷地将本地文章上传Github博客。之前虽然配置过hexogithub的博客…

2023-8-22 双链表

题目链接&#xff1a;双链表 #include <iostream>using namespace std;const int N 100010;int e[N], l[N], r[N], idx;void init() {r[0] 1;l[1] 0;idx 2; }void add(int k, int x) {e[idx] x;r[idx] r[k];l[idx] k;l[r[k]] idx;r[k] idx;idx ; }void remove…

TP-Link 智能灯泡缺陷能让黑客窃取用户 WiFi 密码

来自意大利和英国的研究人员在 TP-Link Tapo L530E 智能灯泡和 TP-Link Tapo 应用程序中发现了4个漏洞&#xff0c;攻击者可以利用这些漏洞窃取目标的 WiFi 密码。 TP-Link Tapo L530E 是包括亚马逊在内的多个市场上最畅销的智能灯泡。TP-link Tapo是一款智能设备管理应用程序…

Java将PDF文件转为Word文档

Java将PDF文件转为Word文档 一、创建Springboot Maven项目 二、导入依赖信息 <repositories><repository><id>com.e-iceblue</id><url>https://repo.e-iceblue.cn/repository/maven-public/</url></repository></repositories&g…