echarts折线图区域颜色使用areaStyle绘制某个折线范围值数据中间有空点显示解决方案

已于 2024-04-16 17:45:09 修改
阅读量1k 收藏
点赞数
文章标签： echarts 前端 javascript
于 2023-11-15 10:59:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenjixue/article/details/134413975
版权

产品最近想实现一个需求就是绘制三条线段，两条常规线段一条范围线段效果图如这样

两条线都好绘制主要是那个范围线段出了点问题

首先范围线段想采用两条开启stack属性堆叠折线图然后上划线加areaStyle属性进行绘制，但是后台返回的数据节点有空点而且间隔随机，即便开启了connectNulls:true只能保证线段不间断，但对于折线范围null数据节点依然会导致堆叠效果异常

如图所示但凡是区域数据为空的地方区域颜色的堆叠显示都失败直接从x轴线上开始堆叠，

那想到个办法直接给区域数据下划线的添加areaStyle设为和背景颜色相同，提升其下划线渲染层zlevel让其区域areaStyle颜色遮住上划线空节点的areaStyle颜色间接达到效果，但是这也遮住了另外两条线段和部分坐标轴线，如下图所示。

对于这种情况需要提升另外两条线段和坐标轴xAxiax和yAxiax的zlevel就可,效果图我就不展示了

chenjixue
关注
ECharts折线图-双数值轴折线图.rar
09-16
图表效果及代码实现讲解链接：https://blog.csdn.net/zhangjiujiu/article/details/142155174
echarts遇到的问题
神zhi殇的博客
07-28 855
echarts各个场景遇到的问题。
echarts折线图—areaStyle区域填充样式
热门推荐
qq_1872583947的博客
11-26 2万+
先上示意图： 代码： option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value', // 分隔线 splitLine: { show: true }, // 坐标轴轴线
Echarts绘制动态折线图，分段绘制不同颜色
tsunami_______的博客
08-08 888
接收实时数据绘制曲线图，并且能够根据选中项绘制多个图表，固定区间使用红色线段。
Echarts 设置面积区域图（areaStyle核心）
大剑师兰特的GIS世界
02-13 2828
在vue和echarts联合技术栈的操控下，本专栏提供行之有效的源代码示例。这里既包括样式的修改，又包括常用bug的解决。（1）提供title示例：展示控制标题的颜色、位置、子标题，连接等（2）提供legend示例：展示控制图例的类型、宽度、高度、位置、间隙，边框、阴影、透明度、偏移，字体、颜色，提示语等（3）提供grid示例：展示控制绘图网格的位置、宽度、高度、边框、阴影等（4）提供xAxis示例：展示控制x 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等。
echarts——配置项
WangYY的博客
11-09 605
1、图表标题 title: { x: 'left', // 水平安放位置，默认为左对齐，可选为： // 'center' ¦ 'left' ¦ 'right' // ¦ {number}（x坐标，单位px） y: 'top', // 垂直安放位
echarts折线图 常见效果(最大值/最小值/平均值/标注区间) 线条平滑smooth 样式 填充风格areaStyle 紧挨边缘 缩放 堆叠图
weixin_42448623的博客
10-10 9154
文章目录折线图特点基本使用常见效果最大值 最小值 平均值标注区间 markArea线条控制平滑 smooth修改样式填充风格 areaStyle紧挨边缘 boundaryGap缩放：脱离0值比例堆叠图 折线图 特点 通常用来分析数据随时间的变化趋势 基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten
echarts教程（二）： 修改echarts面积图修改样式
知无涯
02-16 6645
https://echarts.apache.org/zh/option.html#series-line.areaStyle echarts 的面积图其实是线形图添加**areaStyle**而形成的, 代码 option = { xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
10-20
在echarts中，如果要自定义折线图的线条颜色和折线点颜色，可以通过配置series中的lineStyle和itemStyle对象来实现。在lineStyle中，可以定义线条的颜色（color）、线条的粗细（width）等属性。而在itemStyle中，...
EasyUI表格合并，及echarts折线图，导出折线图为图片
01-23
而Echarts是一款由百度开发的开源数据可视化库，它支持各种图表类型，如折线图、柱状图、饼图等，为数据分析和展示提供了强大的支持。 在"EasyUI表格合并"这一主题中，我们主要讨论的是如何使用EasyUI的datagrid...
echarts图表折线图点击纵向区域获取所有点的数据
09-07
echarts图表点击事件：折线图点击纵向区域获取所有点的数据，已经能正式使用，可以下载看看，做参考。
ECharts折线图-折线图9.rar
最新发布
09-16
图表效果及代码实现讲解链接：https://blog.csdn.net/zhangjiujiu/article/details/142173913
Echarts折线图之区域面积图
liuxi_happy的博客
11-04 2995
今天写echarts发现有个比较坑的地方，我使用了areaStyle 这个属性，把折线图设置成了如图的样式 但是客户想要的是如下图在这个样式 这里要敲重点了，想实现这个样式必须使用series-》line-》stack这个属性，这个属性会叠加数据，代码块如下 series:[ { type:"line", data:data1,（最小值） areaStyle:{ coloe:#000（这个颜色放你的背景色） }， stack:"confidence-band", }， {
vue3中echarts图表中的面积图areaStyle属性不起效(填充样式被覆盖)
kanno的博客
05-21 554
vue3中echarts图表中的面积图areaStyle属性不起效(填充样式被覆盖)；在折线面积图中，areaStyle属性分别给了绿色和红色，但是红色被绿色覆盖了
Echarts区域面积areaStyle用图片进行纹理填充
u010234868的专栏
07-03 765
【代码】Echarts区域面积areaStyle用图片进行纹理填充。
Echarts中常用的参数总结以及参数自定义示例
编码世界
12-18 1万+
本文主要讲解使用Echarts时setOption里面的属性以及常见的问题，参数都是本人项目里的具体参数。设置内容都是在 `setOption({ })`中。
echarts基本使用-常用图表笔记
qq_44482048的博客
07-28 825
本文章主要学习了echarts常用的7大图表
ECharts 使用series.areaStyle.color实现3种阴影效果（不透明阴影，透明阴影，线性渐变阴影）
旭东怪的博客
09-29 5583
1 使用详解 （1）series.areaStyle.color 说明：填充的颜色。 默认值：’#000'。 参数类型：Color。 （1）'#000'，十六进制。 （2）'rgb(128, 128, 128)'，RGB。 （3）'rgba(128, 128, 128, 0.5)'，RGB，同时支持透明度。 （4）'red'。 （2）series.areaStyle.color（线性渐变） // 线性渐变，前四个参数分别是...
柱状图（用ECharts绘制）
我的博客
08-15 1422
目录 柱状图常常用于描述分类后的数据 常见效果实现 最大值、最小值 markPoint 平均值 markLine 数值的显示 label 柱的宽度 barWidth 横向柱状图 交换x和y轴的角色 <!DOCTYPE html> <html lan...
ECharts大数据量折线面积图绘制与代码实践
资源摘要信息:"ECharts折线图-大数据量面积图.rar" 知识点详细说明： 1. ECharts概述 ECharts是一个使用JavaScript实现的开源可视化库，它在数据可视化领域非常流行，特别是在Web开发中。ECharts提供了丰富的图表...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值