Echarts面积图2.0（范围绘制）

news/2024/11/29 5:35:41/

代码：

// 以下代码可以直接粘贴在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.ppmy.cn/news/1051592.html

相关文章

江南大学采购ZJ-3型精密D33测试仪四件套设备

江南大学采购ZJ-3型精密D33测试仪四件套设备

江南大学采购ZJ-3型精密D33测试仪四件套设备 江南大学&#xff08;Jiangnan University&#xff09;&#xff0c;坐落于江苏省无锡市&#xff0c;是中华人民共和国教育部直属高校&#xff0c;由教育部、江苏省人民政府共建 &#xff0c;国家“双一流”建设高校&#xff0c; “…
阅读更多...
Linux 多线程中执行fork的情况

Linux 多线程中执行fork的情况

一、普通多线程中执行fork的情况 1.多线程中没有执行fork的情况 代码如下&#xff1a; #include<stdio.h> #include<stdlib.h> #include<unistd.h> #include<pthread.h> #include<string.h> #include<semaphore.h>void*fun(void* arg) …
阅读更多...
TLIN1021A-Q1 故障保护 LIN 收发器

TLIN1021A-Q1 故障保护 LIN 收发器

​​​​​​目录 ​​1 特性 2 应用 3 说明 5描述(续) 6引脚配置和功能 7规范
阅读更多...
Matlab论文插图绘制模板第108期—特征渲染的标签散点图

Matlab论文插图绘制模板第108期—特征渲染的标签散点图

在之前的文章中&#xff0c;分享了Matlab标签散点图的绘制模板&#xff1a; 进一步&#xff0c;再来分享一下特征渲染的标签散点图的绘制模板&#xff0c;以便再添加一个维度的信息。 先来看一下成品效果&#xff1a; 特别提示&#xff1a;本期内容『数据代码』已上传资源群中…
阅读更多...
LInux之例行工作

LInux之例行工作

目录 场景 单一执行例行任务 --- at&#xff08;一次性&#xff09; 安装 命令详解 语法格式 参数及作用 时间格式 案例 at命令执行过程分析 循环执行的例行性任务--crontab&#xff08;周期性&#xff09; crontd服务安装 linux 任务调度的工分类 crontab工作过程…
阅读更多...
Three.js 实现模型材质局部辉光（发光，光晕）效果和解决辉光影响场景背景图显示的问题

Three.js 实现模型材质局部辉光（发光，光晕）效果和解决辉光影响场景背景图显示的问题

1.Three.js 实现模型材质局部辉光&#xff08;发光&#xff0c;光晕&#xff09;效果 2.解决辉光效果影响场景背景图显示的问题 相关API的使用&#xff1a; 1. EffectComposer&#xff08;渲染后处理的通用框架&#xff0c;用于将多个渲染通道&#xff08;pass&#xff09;组…
阅读更多...
vue 使用nvm控制node 版本，随意切换 node 版本

vue 使用nvm控制node 版本，随意切换 node 版本

1.nvm 下载安装 https://github.com/coreybutler/nvm-windows/releases 找自己版本 1.安装版本 nvm list available // 查看所有node 版本 nvm install 版本号 // 安装指定版本号2.nvm 列表展示 nvm list //展示所有版本号3.nvm 切换环境 nvm use 版本号 // 切换版本4.…
阅读更多...
智能算法挑战赛决赛题目——初中组

智能算法挑战赛决赛题目——初中组

题目 1. 判断是否存在重复的子序列 从 m 个字符中选取字符&#xff0c;生成 n 个符号的序列&#xff0c;使得其中没有 2 个相邻的子序列相同。如从 1&#xff0c;2&#xff0c;3&#xff0c;生成长度为 5 的序列&#xff0c;序列“12321”是合格的&#xff0c;而“12323”和“…
阅读更多...
最新文章

Copyright @ 2022~2023