Vue项目eCharts折线图区域渐变填充

Question

我在Vue项目中使用eCharts生成折线图，现在希望给区域添加渐变效果，但在areaStyle中设置了无效，具体代码如下

        drawLine () {
            let echart = this.$echarts.init(document.getElementById('echart'))
            
            echart.setOption({
                xAxis: {
                    data: ['a','b','c','d','e'],
                    boundaryGap: false,
                },
                yAxis: {
                    splitLine: {
                        show: false,        //隐藏纵轴坐标线
                    }
                },
                series: [{
                    name: '数量',
                    type: 'line',
                    data: [5,4,10,12,25],
                    areaStyle: {
                        normal: {
                            color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#000000'
                            }, {
                                offset: 1,
                                color: '#fff'
                            }]),
                        },
                    },
                    smooth: true,
                    symbolSize: 10,
                }]
            })
        }

请问是哪儿不对吗？

多谢!

Answer 1

    normal: {
        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#000000'
        }, {
            offset: 1,
            color: '#fff'
        }]),
    },

你这里的渐变echarts这个变量 需要新的实例化 new echarts.graphic.LinearGradient这样子才可以