echarts绘制彩虹色背景

 

 大致成品如图所示

关键的步骤：

var dom = document.getElementById("myChart");
                var myChart = echarts.init(dom);
                var app = {};
                var option = null;
                option = {
                     backgroundColor:'rgba(128, 128, 128, 1)',
                     title: {
                         text: '线路故障发生概率预测',
                         left: '50%',
                         top: '5%',
                         botom:"5%"
                     },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                        }

                    },
                    legend: {
                        // orient: 'vertical',
                        show: false,
                        left: 'rigth',
                        data: [{
                            name: 'line1',
                            icon: 'bar'
                        }, {
                            name: 'line2',
                            icon: 'bar'
                        }, {
                            name: 'line3',
                            icon: 'bar'
                        }, {
                            name: 'line4',
                            icon: 'bar'
                        }, {
                            name: 'line5',
                            icon: 'bar'
                        }, {
                            name: 'line6',
                            icon: 'bar'
                        }],
                        selected: {
                            'line1': true,
                            'line2': true,
                            'line3': true,
                            'line4': true,
                            'line5': true,
                            'line6': true,
                            //不想显示的都设置成false
                        }
                    },
                    grid: {
                        top: '14%',
                        left: '3%',
                        right: '1%',
                        bottom: '3%',
                        containLabel: true,
                        // color: '#032c78'
                    },
                    color: ['rgba(52,252,53,1)', '#FFF82F', '#F99A2D', '#FB343B', '#C936D7', '#6B3370'],
                    xAxis: {
                        // nameLocation: 'center',
                        type: 'category',
                        boundaryGap: false,
                        data: this.mouthDate,
                        // show: true,
                        // axisTick: {
                        //     show: true
                        // },
                        // nameTextStyle: {
                        //     fontSize: 20
                        // },
                        position: 'bottom',
                        axisLabel: { //坐标轴刻度的属性
                            fontSize: 32,
                            color: 'rgba(17,108,255,1)',
                            // textalign: 'center',
                            rotate: 90,
                            // interval:0
                        },

                    },
                    yAxis: [{
                            // nameLocation:'center',
                            nameGap: 35,
                            name: '',
                            boundaryGap: true,
                            min: 0,
                            max: 280,
                            // splitNumber: 10,
                            interval: 35,
                            type: 'value',
                            // yAxisIndex: 0,
                            axisLabel: {
                                formatter: '{value}',
                            },
                            nameTextStyle: { //坐标轴名称的样式
                                color: "rgba(255,255,255,1)",
                                fontSize: 24,
                                textShadowColor: 'rgba(0,128,255,1)',
                                fontFamily: "SourceHanSansCN",
                                textShadowOffsetX: 0,
                                textShadowOffsetY: 0,
                                textShadowBlur: 15,
                                padding: [0, 0, 0, 0]
                            },
                            splitLine: {
                                show: false
                            },
                            axisTick: { //是否显示坐标轴刻度
                                show: false
                            },
                            axisLabel: { //坐标轴刻度的属性
                                fontSize: 32,
                                color: 'rgba(17,108,255,1)',
                                textalign: 'center'

                            },
                            yAxisIndex: 1
                        }

                    ],

                    series: [ //就是从这个地方开始的    主要用的是markArea 和legend
                        {
                            name: 'line1',
                            type: 'line',
                            animation: false,
                            areaStyle: {
                                normal: {}
                            },
                            lineStyle: {
                                normal: {
                                     1
                                }
                            },
                            markArea: {
                                data: [
                                    [{
                                        yAxis: '0',
                                        itemStyle: {
                                            color: 'rgba(52,252,53,1)'
                                        }
                                    }, {
                                        yAxis: '35'
                                    }]
                                ]
                            },

                        }, {
                            name: 'line2',
                            type: 'line',
                            animation: false,
                            areaStyle: {
                                normal: {}
                            },
                            lineStyle: {
                                normal: {
                                     1
                                }
                            },
                            markArea: {
                                data: [
                                    [{
                                        yAxis: '35',
                                        itemStyle: {
                                            color: '#FFF82F'
                                        }
                                    }, {
                                        yAxis: '70'
                                    }]
                                ]
                            }
                        }, {
                            name: 'line3',
                            type: 'line',
                            animation: false,
                            areaStyle: {
                                normal: {}
                            },
                            lineStyle: {
                                normal: {
                                     1
                                }
                            },
                            markArea: {
                                data: [
                                    [{
                                        yAxis: '70',
                                        itemStyle: {
                                            color: '#F99A2D'
                                        }
                                    }, {
                                        yAxis: '115'
                                    }]
                                ]
                            }
                        },
                        {
                            name: 'line4',
                            type: 'line',
                            animation: false,
                            areaStyle: {
                                normal: {}
                            },
                            lineStyle: {
                                normal: {
                                     1
                                }
                            },
                            markArea: {
                                data: [
                                    [{
                                        yAxis: '115',
                                        itemStyle: {
                                            color: '#FB343B'
                                        }
                                    }, {
                                        yAxis: '150'
                                    }]
                                ]
                            }
                        },
                        {
                            name: 'line5',
                            type: 'line',
                            animation: false,
                            areaStyle: {
                                normal: {}
                            },
                            lineStyle: {
                                normal: {
                                     1
                                }
                            },
                            markArea: {
                                data: [
                                    [{
                                        yAxis: '150',
                                        itemStyle: {
                                            color: '#C936D7'
                                        }
                                    }, {
                                        yAxis: '250'
                                    }]
                                ]
                            }
                        }, {
                            name: 'line6',
                            type: 'line',
                            animation: false,
                            areaStyle: {
                                normal: {}
                            },
                            lineStyle: {
                                normal: {
                                     1
                                }
                            },
                            markArea: {
                                data: [
                                    [{
                                        yAxis: '250',
                                        itemStyle: {
                                            color: '#6B3370'
                                        }
                                    }, {
                                        yAxis: '280'
                                    }]
                                ]
                            }
                        },
                        {
                            name: '',
                            type: 'line',
                            smooth: "true",
                            symbol: 'circle', //设置拐点
                            symbolSize: 16, //设置拐点的大小
                            itemStyle: { //拐点的属性
                                color: '#005664',
                                //
                            },
                            lineStyle: {
                                color: "#007B8F",
                                 5,
                            },
                            data: this.mouthPm25List
                        },


                    ],
                }
                myChart.setOption(option)