Echarts折线图之区域面积图

今天写echarts发现有个比较坑的地方，我使用了areaStyle 这个属性，把折线图设置成了如图的样式

但是客户想要的是如下图在这个样式

这里要敲重点了，想实现这个样式必须使用series-》line-》stack这个属性，这个属性会叠加数据，代码块如下

series:[{type:"line",data:data1,（最小值）areaStyle:{coloe:#000（这个颜色放你的背景色）}，stack:"confidence-band",}，{type:"line",data:data2,（最大值）areaStyle:{coloe:#000（这个颜色放你想要的区域颜色）}，stack:"confidence-band",}，
]
上面的代码会实现上图的样式，但是你会发现，图中的最大值已经发生了变化，和你传入的值不一样，图中的最大值变成了最小值加最大值，所以你需要做一个处理，给最大值赋值之前，用获取的最大值减去最小值付给最大值。
```javascriptlet data3 = []for(let i = 0 ; i<data1.length; i++){data3.push(data2[i]-data1[i])}

如果你发现这俩个他们无法相减，那就因为变量类型的问题，你可以强制转换成number

let data3 = []for(let i = 0 ; i<data1.length; i++){data3.push(Number(data2[i])-Number(data1[i]))}然后在eachart代码中最大值使用data3series:[{type:"line",data:data1,（最小值）areaStyle:{coloe:#000（这个颜色放你的背景色）}，stack:"confidence-band",}，{type:"line",data:data3,（处理过的最大值）areaStyle:{coloe:#000（这个颜色放你想要的区域颜色）}，stack:"confidence-band",}，
]
这俩个数据先后顺序不要放反了，第一个是最小值，第二个是最大值，不然你的图像会变样。

解决了这个问题后，又会出现新的问题，鼠标滑过折线图会有提示信息，你发现你的最大值变成了data3了，在这里你需要在formatter里面写一个function来改变他。简单来说就是获取到function（param）中的data1和data3然后把他俩相加，给你的最大值赋值。

Echarts折线图之区域面积图相关推荐

Python使用matplotlib可视化面积图（Area Chart）、通过给坐标轴和曲线之间的区域着色可视化面积图、在面积图的指定区域添加箭头和数值标签
Python使用matplotlib可视化面积图(Area Chart).通过给坐标轴和曲线之间的区域着色可视化面积图.在面积图的指定区域添加箭头和数值标签目录
Python使用matplotlib可视化时间序列堆叠的面积图、堆叠面积图给出了多个时间序列的贡献程度的可视化表示，以便于相互比较（Stacked Area Chart）
Python使用matplotlib可视化时间序列堆叠的面积图.堆叠面积图给出了多个时间序列的贡献程度的可视化表示,以便于相互比较(Stacked Area Chart) 目录
峰谷图配置（面积图，基于echarts）
峰谷图或面积图也是数据可视化图表的一种常见类型.这个配置比较简单,下面就以一个销量峰谷图为例直接放效果图和代码了.下面是最终实现的效果动态图,提示框会跟随鼠标移动而确定位置: 为了有更好的适用性,这里 ...
Echarts案例学习-渐变堆积面积图
本文中使用的Echarts版本为:5.3.0 本系列主要是通过复现Apach Echarts官网上的示例来学习Echarts.目标图像网页地址:https://echarts.apache.org ...
R语言数据可视化之折线图、堆积图、堆积面积图
折线图简介折线图通常用来对两个连续变量的依存关系进行可视化,其中横轴很多时候是时间轴. 但横轴也不一定是连续型变量,可以是有序的离散型变量. 绘制基本折线图本例选用如下测试数据集: 绘制方法是首先 ...
Qt 地震剖面图(或者叫地震摆动图,波形变面积图)
0: 项目需求近期项目有了新的需求, 需要根据地震数据绘制出对应图表, 关于这种图的资料比较少, 翻了不少网站, 也没找到太多有用的数据, 而关于Qt的, 更是只有一篇论文. 不过搜这么多资料也不是 ...
用Echarts绘制折线图-----堆积面积图和堆积折线图
堆积折线图的作用是用于显示每一数据所占大小随时间或有序类别而变化的趋势,展示的是部分与整体的关系. 堆积面积图是在折线图中添加面积图,属于组合图形中的一种.堆积面积图又被称为堆积区域图,它强调数量随时 ...
Tableau图表 | 3、区域图/面积图/折线图
面积图也叫作区域图,是一种折线图使用Tableau示例-超市数据简单折线图 1.订单日期拖拽到列, 将订单ID拖拽到行 2.右键订单日期-季度,右键订单ID-度量-计数标准面积图 1.将邮寄方式 ...
echarts——实现面积图+柱状图+折线图等——基础积累
因为到年底了,很多项目组都开始做年终汇报,年终汇报的展示形式最常见的就是看板. 样式美观,可以放到电视机或者大屏上,通过图表的形式进行展示,简单明了,通俗易懂. 直接上最终效果图:是一个展示客户量/流 ...

Echarts折线图之区域面积图

Echarts折线图之区域面积图相关推荐

最新文章

热门文章