折线图渐变背景

因为项目里只用折线图，所以想只引入折线图，这样可能会节省体积 。

//echarts主模块
  let echarts = require('echarts/lib/echarts')
//echarts折线图模块
   require('echarts/lib/chart/line')
//echarts悬浮组件
   require('echarts/lib/component/tooltip');

页面：

<template>
    <div class="index">
        <div class="index-line" id="line"></div>
    </div>
</template>
<script>
    let echarts = require('echarts/lib/echarts')
    require('echarts/lib/chart/line')
    require('echarts/lib/component/tooltip');
    export default {
        name: '',
        data() {
            return {}
        },
        mounted() {

            this.$nextTick(() => {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('line'));
                myChart.setOption({
                    title: {
                        // text: '折线图堆叠'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '3%',
                        bottom: '6%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: '#999',
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#999',
                            }
                        },
                        //网格线
                        splitLine: {
                            show:true,
                        },
                        data: ['周一','周二','周三','周四','周五','周六','周日']
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#999',
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#999',
                            }
                        },
                    },
                    series: [
                        {
                            name:'邮件营销',
                            type:'line',
                            smooth: true,
                            symbolSize: 7,
                            data:[120, 132, 101, 134, 90, 230, 210],
                            lineStyle: {

                            },
                            itemStyle: {
                                normal: {
                                    color: "rgba(179,127,235,0.5)",
                                    lineStyle: {
                                        color: '#7b7878',
                                        width: 1,
                                    }
                                }
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: 'rgba(179,127,235,0.8)' // 最高处 的颜色
                                    }, {
                                        offset: 0.5, color: 'rgba(179,127,235,0.5)'
                                    },{
                                        offset: 1, color: 'rgba(179,127,235,0.01)' // 最底处 的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            }
                        },
                    ]
                });
            })
        }
    }
</script>

<style>
    .index{
        width: 100%;
        height: 100%;
    }
    .index-line{
        width: 100%;
        height: 300px;
    }
</style>