echarts draw rainbow-colored background

 

 

 

 

 

 

 

 Finished shown generally in FIG.

The key steps:

var DOM = document.getElementById ( "myChart" );
                 var myChart = echarts.init (DOM);
                 var App = {};
                 var Option = null ; 
                Option = {
                     the backgroundColor: 'RGBA (128, 128, 128,. 1)' , 
                    title: { 
                         text: 'link failure probability prediction', 
                         left: '50% ', 
                         Top:'%. 5 ', 
                         botom of: ". 5%" 
                    }, 
                    ToolTip: { 
                        Trigger: ' Axis' , 
                        axisPointer:{ // axis indicator trigger effective axis
                            type: 'Line' // Default is linear, optionally: 'Line' | 'Shadow' 
                        } 

                    }, 
                    Legend: { 
                        // Orient: 'Vertical', 
                        Show: to 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': to true ,
                             'Iine3': to true ,
                             'line4': to true ,
                             'LINE5': to true ,
                             'Line6': to true ,
                             // do not want to be displayed are set to 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: to true 
                        // }, 
                        // nameTextStyle: { 
                        //      the fontSize: 20 is 
                        // }, 
                        position: 'bottom' , 
                        AxisLabel: { // attributes axis scale of 
                            the fontSize: 32 , 
                            Color: 'RGBA (17,108,255,1) ' ,
                             // textAlign:' Center ', 
                            Rotate: 90 ,
                             // interval The: 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: { // axis name Style 
                                Color: "RGBA (255,255,255,1)" , 
                                the fontSize: 24 , 
                                textShadowColor: 'RGBA (0,128,255,1)' , 
                                the fontFamily: "SourceHanSansCN" , 
                                textShadowOffsetX: 0 , 
                                textShadowOffsetY: 0 , 
                                textShadowBlur: 15 , 
                                padding: [0, 0, 0, 0 ] 
                            }, 
                            SplitLine: { 
                                Show: to false 
                            }, 
                            axisTick: { // whether to display coordinate axis scale 
                                Show: to false 
                            }, 
                            AxisLabel: { // attributes axis scale of 
                                the fontSize: 32 , 
                                Color: ' RGBA (17,108,255,1) ' , 
                                textAlign: ' Center ' 

                            }, 
                            yAxisIndex:. 1 
                        } 

                    ], 

                    Series: [ // is mainly from this place to start with and is markArea Legend 
                        { 
                            name: 'line1' , 
                            type: 'Line' , 
                            Animation: to false , 
                            AreaStyle: { 
                                Normal: {} 
                            }, 
                            the lineStyle: { 
                                Normal: { 
                                    width: . 1
                                }
                            },
                            markArea: {
                                data: [
                                    [{
                                        yAxis: '0',
                                        itemStyle: {
                                            color: 'rgba(52,252,53,1)'
                                        }
                                    }, {
                                        yAxis: '35'
                                    }]
                                ]
                            },

                        }, {
                            name: 'line2',
                            type: 'line',
                            animation: false,
                            areaStyle: {
                                normal: {}
                            },
                            lineStyle: {
                                normal: {
                                    width: 1
                                }
                            },
                            markArea: {
                                data: [
                                    [{
                                        yAxis: '35',
                                        itemStyle: {
                                            color: '#FFF82F'
                                        }
                                    }, {
                                        yAxis: '70'
                                    }]
                                ]
                            }
                        }, {
                            name: 'line3',
                            type: 'line',
                            animation: false,
                            areaStyle: {
                                normal: {}
                            },
                            lineStyle: {
                                normal: {
                                    width: 1
                                }
                            },
                            markArea: {
                                data: [
                                    [{
                                        yAxis: '70',
                                        itemStyle: {
                                            color: '#F99A2D'
                                        }
                                    }, {
                                        yAxis: '115'
                                    }]
                                ]
                            }
                        },
                        {
                            name: 'line4',
                            type: 'line',
                            animation: false,
                            areaStyle: {
                                normal: {}
                            },
                            lineStyle: {
                                normal: {
                                    width: 1
                                }
                            },
                            markArea: {
                                data: [
                                    [{
                                        yAxis: '115',
                                        itemStyle: {
                                            color: '#FB343B'
                                        }
                                    }, {
                                        yAxis: '150'
                                    }]
                                ]
                            }
                        },
                        {
                            name: 'line5',
                            type: 'line',
                            animation: false,
                            areaStyle: {
                                normal: {}
                            },
                            lineStyle: {
                                normal: {
                                    width: 1
                                }
                            },
                            markArea: {
                                data: [
                                    [{
                                        yAxis: '150',
                                        itemStyle: {
                                            color: '#C936D7'
                                        }
                                    }, {
                                        yAxis: '250'
                                    }]
                                ]
                            }
                        }, {
                            name: 'line6',
                            type: 'line',
                            animation: false,
                            areaStyle: {
                                normal: {}
                            },
                            lineStyle: {
                                normal: {
                                    width: 1
                                }
                            },
                            markArea: {
                                data: [
                                    [{
                                        yAxis: '250',
                                        itemStyle: {
                                            color: '#6B3370'
                                        }
                                    }, { 
                                        YAXIS: '280' 
                                    }] 
                                ] 
                            } 
                        }, 
                        { 
                            name: '' , 
                            type: 'Line' , 
                            Smooth: "to true" , 
                            Symbol: 'Circle', // Sets the knee 
                            SymbolSize: 16, // Sets the knee size 
                            itemStyle: { // inflection attribute 
                                Color: '# 005 664' ,
                                 //
                             }, 
                            the lineStyle: { 
                                Color: "# 007B8F" , 
                                width: . 5 , 
                            }, 
                            Data: the this .mouthPm25List 
                        }, 


                    ], 
                } 
                myChart.setOption ( option)