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

前言

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

我的调整思路：

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

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
        }
    ]
};