echarts做曲线图 超过范围颜色不一样的设定

test3:function () {
    let myChart = echarts.init(document.getElementById('echart3'));
    let date = new Date();
    testEcharts({createDate:date}).then(function (rsp) {
        console.log(rsp)
        let y = rsp.data;

        myChart.setOption({
            title: {
                text: '一天用电量分布',
                padding: 3,
                textStyle: {
                    fontSize: 18,
                    fontWeight: 'bolder',
                    color: '#ff0000'          // 主标题文字颜色
                },
                subtextStyle: {
                    color: '#aaa'          // 副标题文字颜色
                }
            },
            tooltip: {//悬浮提示框
                showDelay: 20,
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            toolbox: {//下载
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis:  {//X轴
                name:'时间轴',
                type: 'category',
                boundaryGap: false,
                data: ['00:00', '01:15', '02:30', '03:45']
            },
            yAxis: {//Y轴
                name:'用电量',
                type: 'value',
                axisLabel: {
                    formatter: '{value} W'
                },
                axisPointer: {
                    snap: true
                }
            },
            visualMap: {//区间内控制显示颜色
                show: false,
                dimension: 1,
                pieces: [{gte: 7, lte: 15, color: 'green'}],
                outOfRange: {
                    color: 'red'
                }
            },
            series: [
                {
                    name:'用电量',
                    type:'line',
                    smooth: true,
                    data: y,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    }
                },
                {
                    name:'下限',
                    type:'line',
                    data:[7],
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                },
                {
                    name:'上限',
                    type:'line',
                    data:[15],
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                }
            ],
        });
    });
}

参考

https://blog.csdn.net/a_leading/article/details/77891530