vchart 渐变

 

 

 this.colorsFun = [new echarts.graphic.LinearGradient(
            0, 0, 0, 1, [{
                offset: 0, color: 'rgba(220,168,7,0.8)'

            }, {
                offset: 1, color: 'rgba(220,168,7,0)'
            }]),
        new echarts.graphic.LinearGradient(
            0, 0, 0, 1, [{
                offset: 0, color: 'rgba(50,183,233,1)'

            }, {
                offset: 1, color: 'rgba(50,183,233,0)'
            }])]


   <ve-line :data="chartData2" :settings="{
                    area: true,
                }" :colors="colorsFun" :extend="chartExtend" height="240px" :legend-visible="false"></ve-line>


或者

<ve-line :data="chartData" :extend="chartExtend" :settings="{
                    area: true,
                    itemStyle: { //面积图颜色设置
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#D0AB2A', // 0% 处的颜色
                                },
                                {
                                    offset: 0.2,
                                    color: '#D0AB2A', // 0% 处的颜色
                                },
                                {
                                    offset: 0.5,
                                    color: 'rgba(220,168,7,0.5)', // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0, 0, 0, 0)' // 100% 处的颜色
                                },
                            ],
                            globalCoord: false // 缺省为 false
                        }

                    }
                }" height="166px" :colors="['#D0AB2A']" :legend-visible="false"></ve-line>

  

 
posted @ 2023-04-12 14:21  一直闭眼看世界  阅读(36)  评论(0编辑  收藏  举报