首页 > 其他 > 详细

Echarts实现折线图的填充渐变

时间:2020-09-17 00:55:31      阅读:876      评论:0      收藏:0      [点我收藏+]

效果图:

技术分享图片

渐变使用line的areaStyle属性,linear为线性渐变

let option={
    series:[
        {
            type:‘line‘,
            areaStyle:{
                color:{
                    //线性渐变
                    type: ‘linear‘,
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: ‘rgba(1, 255, 255, 0.8)‘, // 0% 处的颜色
                    }, {
                        offset: 0.6, color: ‘rgba(1, 255, 255,0)‘, // 100% 处的颜色
                    }],
                    global: false, // 缺省为 false
                },
            },
        }
    ]
}

 

Echarts实现折线图的填充渐变

原文:https://www.cnblogs.com/wuhairui/p/13682217.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!