ID

29

配置代码

var option = {
        backgroundColor: '#0d073d',
        title: {
            text: 'GDP增长率',
            textStyle: {
                color: '#fff',
                fontSize: 16,
                fontWeight: 400
            },
            itemGap: 5,
            subtext: '定时过滤',
            subtextStyle: {
                color: '#fff',
                fontSize: 14,
                fontWeight: 400
            },
            x: 'center',
            y: 5,
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor:'rgba(14,42,59,0.6)',
            borderColor:'#59dcff',
            borderWidth: 1,
            borderRadius: 0,
            textStyle: {
                color: "#fff",
                fontSize: 14,
                align:'left'
            },
            axisPointer:{
                type: 'line',
                lineStyle: {
                    width: 1,
                    type: 'dotted',
                    color: 'rgba(255,255,255,.618)'
                }
            },
            confine: true,
            position: function(point, params, dom, rect, size) {
                return [point[0], point[1] - 80];
            },
            formatter: function(params){
                var res = params[0].name+ '年：<br/>总量：'+ params[0].value +'亿元'+'<br/>增速：'+params[0].data.growth;
                return res;
            }
        },
        grid: {
            top:'15%',
            right: '5%',
            bottom: '10%',
            left: '8%'
        },
        legend: {
            show: false
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                interval: 0,
                margin: 5,
                textStyle: {
                    color: '#fff',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                },
                formatter: '{value}'
            },
            axisLine:{
                lineStyle:{
                    color:'#879dac'
                }
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['rgba(0, 41, 77, .618)', 'rgba(1, 35, 65, .618)']
                }
            },
            data: (function(data){
                var arr=[];
                data.forEach(function(items){
                    arr.push(items.name);
                });
                return arr;
            })(arrData)
        },
        yAxis: {
            type: 'value',
            max: 1200,
            axisLine: {
                lineStyle: {
                    color: '#879dac'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                },
                formatter: '{value}'
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(34, 63, 90, .618)',
                    type: 'dashed',
                    width: 1
                }
            }
        },
        color:['rgba(0,175,255,1)','rgba(0,218,204,1)'],
        series: [
            {
                name: '1',
                type: 'line',
                smooth: false,
                animationDuration: 1000,
                itemStyle: {
                    normal: {
                        color: 'rgba(0,175,255,1)',
                        borderColor: 'rgba(0,175,255,1)'
                    }
                },
                lineStyle: {
                    normal: {
                        color: 'rgba(0,175,255,1)',
                        width: 3,
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                            {offset: 0, color: 'rgba(0,175,255,1)'},
                            {offset: 1, color: 'transparent'}
                        ]),
                        opacity: .8
                    }
                },
                symbol: 'circle',
                symbolSize: 3,
                z: 1,
                data: arrData
            },
            {
                name: '2',
                type: 'line',
                smooth: false,
                itemStyle: {
                    normal: {
                        color: 'rgba(0,175,255,1)',
                        borderColor: 'rgba(0,175,255,1)'
                    }
                },
                lineStyle: {
                    normal: {
                        color: 'rgba(0,175,255,1)',
                        width: 3,
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                            {offset: 0, color: 'rgba(0,175,255,1)'},
                            {offset: 1, color: 'transparent'}
                        ]),
                        opacity: .8
                    }
                },
                symbol: 'emptyCircle',
                symbolSize: 3,
                data: newData
            },
            {
                name: '3',
                type: 'line',
                smooth: false,
                animationDuration: 1000,
                itemStyle: {
                    normal: {
                        color: '0,218,204',
                        borderColor: "rgba(0,159,146,0)"
                    }
                },
                lineStyle: {
                    normal: {
                        type: "solid",
                        width: 0,
                        color: 'rgba(0,218,204,1)'
                    }
                },
                areaStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(96,250,250,0)'
                            }, {
                                offset: 1,
                                color: 'rgba(96,250,250, .35)'
                            }]
                        },
                        opacity: .8
                    }
                },
                symbol: 'none',
                symbolSize: 3,
                data: maxData
            }
        ]
    };

完整示例代码