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);
// }

效果:

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

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

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

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

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

相关文章

权限提升-手工-系统权限提升

权限提升基础信息 1、具体有哪些权限需要我们了解掌握的&#xff1f; 后台权限&#xff0c;网站权限&#xff0c;数据库权限&#xff0c;接口权限&#xff0c;系统权限&#xff0c;域控权限等 2、以上常见权限获取方法简要归类说明&#xff1f; 后台权限&#xff1a;SQL注入,数…

pytorch中torch.gather()简单理解

1.作用 从输入张量中按照指定维度进行索引采集操作&#xff0c;返回值是一个新的张量&#xff0c;形状与 index 张量相同&#xff0c;根据指定的索引从输入张量中采集对应的元素。 2.问题 该函数的主要问题主要在dim维度上&#xff0c;dim0 表示沿着第一个维度&#xff08;行…

JavaScript用indexOf()在字符串数组中查找子串时需要注意的一个地方

一、遇到问题 在 继续更新完善&#xff1a;C 结构体代码转MASM32代码 中&#xff0c;由于结构体成员中可能为数组类型的情况&#xff0c;因此我们在提取结构体成员信息的过程中&#xff0c;需要检测结构体成员名称字符串中是否包括 []&#xff0c;如果包括那么我们要截取[前面…

linux操作系统的权限的深入学习

1.Linux权限的概念 Linux下有两种用户&#xff1a;超级用户&#xff08;root&#xff09;、普通用户。 超级用户&#xff1a;可以再linux系统下做任何事情&#xff0c;不受限制 普通用户&#xff1a;在linux下做有限的事情。 超级用户的命令提示符是“#”&#xff0c;普通用户…

vue中form、table和input标签过长

form标签过长 效果&#xff1a; 代码&#xff1a; <el-form-item v-for"(item,index) in ticketEditTable1" :label"item.fieldNameCn" :propitem.fieldName :key"item.fieldNameCn" overflow"":rules"form[item.fieldName…

vue naive ui 按钮绑定按键

使用vue (naive ui) 绑定Enter 按键 知识点: 按键绑定Button全局挂载使得message,notification, dialog, loadingBar 等NaiveUI 生效UMD方式使用vue 与 naive ui将vue默认的 分隔符大括号 替换 为 [[ ]] <!DOCTYPE html> <html lang"en"> <head>…

二叉树oj

文章目录 1. 单值二叉树 2. 检查两颗树是否相同。 3. 对称二叉树。 4. 二叉树的前序遍历。 5. 另一颗树的子树。 6.二叉树的构建及遍历。 7.判断一颗二叉树是否是平衡二叉树。 8.翻转二叉树。 文章内容 1. 单值二叉树 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱…

Centos 7.6 安装mongodb

以下是在CentOS 7.6上安装MongoDB的步骤&#xff1a; 打开终端并以root用户身份登录系统。 创建一个新的MongoDB存储库文件 /etc/yum.repos.d/mongodb-org-4.4.repo 并编辑它。 sudo vi /etc/yum.repos.d/mongodb-org-4.4.repo在编辑器中&#xff0c;添加下面的内容到文件中并…

云计算在线实训系统建设方案

一、 人工智能与云计算系统概述 人工智能&#xff08;Artificial Intelligence&#xff0c;简称AI&#xff09;是一种模拟人类智能的科学和工程&#xff0c;通过使用计算机系统来模拟、扩展和增强人类的智能能力。人工智能涉及多个领域&#xff0c;包括机器学习、深度学习、自然…

医疗中心管理环境温湿度,这样操作就对了!

随着医疗技术的不断发展&#xff0c;越来越多的医疗设备对于稳定的工作环境要求越来越高&#xff0c;而环境温湿度是影响这些设备性能和可靠性的关键因素之一。 为了确保医疗设备的正常运行和患者的安全&#xff0c;医疗机构越来越倾向于采用精密空调监控系统来维护设备的稳定性…

【业务功能篇76】微服务网关路由predicates断言条件-filters路由转换地址-跨域问题-多级目录树化层级设计-mybatisPlus逻辑删除

业务开发-基础业务-分类管理 启动renren-fast如果出现如下错误 -Djps.track.ap.dependenciesfalse 添加相关配置即可 分类管理 1.后端分类接口 JDK8特性&#xff1a;https://blog.csdn.net/qq_38526573/category_11113126.html 在后端服务中我们需要查询出所有的三级分类信…

# 【三维重建】【深度学习】NeRF代码Pytorch实现--数据加载(中)

【三维重建】【深度学习】NeRF代码Pytorch实现–数据加载(中) 论文提出了一种5D的神经辐射场来作为复杂场景的隐式表示&#xff0c;称为NeRF&#xff0c;其输⼊稀疏的多⻆度带pose的图像训练得到⼀个神经辐射场模型。简单来说就是通过输入同一场景不同视角下的二维图片和相机位…