前言

我们用Echarts做折线图时，有时我们需要在两条折线图之间有颜色填充效果，如果折线的数值范围涉及到负数，颜色只会填充到Y轴0刻度之上，而且上折线不能有负数，效果如下图：

我的调整思路：

将两条折线的数据拆分，之前上折线数据=下折线数据+偏移量，为叠加折线，现将两条折线关系拆分为两条独立折线，互不依赖
上折线在series属性数组的位置在下折线之前
两条折线的填充颜色都填充到底部
利用下折线的阴影盖住上折线的填充颜色
效果如下图

js代码(可在Echarts官网示例中运行)

texts = [0,254,770,1327,1969,2252,2796,3198,3702,4052,4469,4839,5304,5881,6079,6380,6913,7494,7926,8458,9065,9565,10041,10260,10786,11450,11806,12055,12556,13049,13673,13932,14301,15040,15306,15920,16243,16661,16975,17429,17813,18279,18632,19648,19869,20138,20672,20755,21482,21858,22485,23203,23579,24072,24585,25192,25572,26006,26404];
bottoms = [53.01,49.31,44.6,43.45,40.45,39.97,38.08,34.22,32.7,31.09,31.17,29.54,30.91,28.5,27.33,26.9,24.29,24.6,23.35,20.63,18.75,17.79,16.36,15.72,14.86,13.03,11.92,9.72,8.32,7.1,6.34,5.89,6.85,5.42,5.57,3.8,2.52,2.12,3.1,1.74,2.35,2.33,1.21,-1.23,-1.37,-0.72,-2.01,-2.38,-1.48,-2.98,-3.36,-3.64,-3.45,-3.73,-4.06,-4,-4.41,-6.14,-8.29];
tops = [56.95,52.82,49.81,47.51,44.53,43.61,41.21,39.22,38.12,37.32,36.63,35.94,34.49,32.39,31.84,30.98,29.56,28.33,26.92,24.74,22.7,22.19,20.87,20.3,18.84,16.93,15.46,14.67,13.64,12.82,12.09,12.08,11.66,10.84,10.62,9.32,8.81,8.44,8.28,8.13,8,7.68,7.51,6.61,6.33,6.2,5.47,5.5,5.46,5.15,4.74,4.18,3.92,3.33,2.69,2.13,1.46,0.75,-0.42];option = {legend: {data:['填充区域下折现高','填充区域上折现高']},tooltip : {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},dataZoom: [{type: 'inside',start: 0,end: 100}, {start: 0,end: 100,handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',handleSize: '80%',handleStyle: {color: '#fff',shadowBlur: 3,shadowColor: 'rgba(0, 0, 0, 0.6)',shadowOffsetX: 2,shadowOffsetY: 2}}],grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis : [{type : 'category',boundaryGap : false,axisLine: {onZero: false},data : texts}],yAxis: {type: 'value',splitLine: {show: false}},series : [{name:'填充区域上折现高',type:'line',symbol: 'none',smooth: true,areaStyle: {color: '#0000CD',origin: 'start',opacity: 0.5},color: 'blue',data:tops},{name:'填充区域下折现高',type:'line',symbol: 'none',smooth: true,areaStyle: {color: '#fff',origin: 'start',shadowColor: '#F3F3F3',shadowOffsetX: 1},color: 'yellow',data:bottoms}]
};

Echarts折线图区域填充问题解决相关推荐

e-charts折线图自适应外层div大小
问题描述: 在tabs页签下使用e-charts折线图,切换tab页签e-charts折线图无法自适应外层div大小: 解决方案: 添加监听器监听浏览窗口变化,两种监听方法 window.addEve ...
Echarts折线图和地图（个人总结）
Echarts折线图和地图(个人总结) Echarts折线图和地图 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
d3.js 教程模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
echarts折线图默认显示最后一个点的数据
echarts折线图默认显示最后一个点的数据想要达到这种效果图如下: 如果你给折线图设置数据显示,那么要不就全部隐藏,要不就全部显示在折线上.实现指定点的显示就需要你自己去处理这个数据了. 方式有两 ...
Echarts折线图的平移假动画
Echarts折线图的平移假动画 #可视化项目中经常用图表的方式来展示数据,折线图是经常出现的,但是在echarts折线图中正常情况是通过删除数据的第一个,添加一个新数据在数组的末尾来实现动画,此动画 ...
echarts折线图设置圆点_echarts 设置折线图单个数据小圆圈样式
在使用echarts 折线图时,可能会遇到针对不同的数据显示不同的小圆点样式,经过查看echarts配置项,其中data中有一个value配置项选项,可以单独设置某一个数据的显示样式,具体使用方式如下 ...
echarts 折线图折线从头开始
在echarts折线图中,默认折线从刻度中心开始,我们为了图标的美观有时需要折线从头开始显示,一个配置项就可以轻松搞定. boundaryGap:false
echarts折线图折现下方显示阴影
echarts折线图折现下方显示阴影实现echarts折现下方显示渐变阴影区域代码: series: [{name: this.chartPropList[this.dataResource]. ...
echarts折线图动态多条线
echarts折线图配置项由于工作中遇到的图表特别多,每次用过配置项总是想不起来,在这里记录一下,希望也可以帮到路过的你.话不多说我们上图: 左边的是设计稿,右边的是echarts的示例图,我们先找 ...

Echarts折线图区域填充问题解决

前言

js代码(可在Echarts官网示例中运行)

Echarts折线图区域填充问题解决相关推荐

最新文章

热门文章