前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >折线图线条渐变色

折线图线条渐变色

作者头像
用户4344670
发布2020-06-22 15:54:39
6940
发布2020-06-22 15:54:39
举报
文章被收录于专栏:vue的实战
代码语言:javascript
复制
option = {
   xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name:'样例3',
   
                        type:'line',
                        itemStyle: {
                            color: '#6A5ACD', 
                            normal: {  
                                lineStyle: {        // 系列级个性化折线样式 
                                    width: 2, 
                                    type: 'solid', 
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                                        offset: 0, 
                                        color: '#0000FF' 
                                    }, { 
                                        offset: 1, 
                                        color: '#CD5C5C' 
                                    }]),//线条渐变色 
                                } 
                            }, 
                            emphasis: {
                                color: '#6A5ACD',   
                                lineStyle: {        // 系列级个性化折线样式 
                                    width: 2, 
                                    type: 'dotted', 
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                                        offset: 0, 
                                        color: '#1E90FF' 
                                    }, { 
                                        offset: 1, 
                                        color: '#0000FF' 
                                    }]) 
                                } 
                            } 
                        },//线条样式
                        ///折线下方是否有颜色的设置
                        areaStyle:{
                            normal:{
                              //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

                                    offset: 0,
                                    color: 'rgba(80,141,255,0.39)'
                                }, {
                                    offset: .34,
                                    color: 'rgba(56,155,255,0.25)'
                                },{
                                    offset: 1,
                                    color: 'rgba(38,197,254,0.00)'
                                }])

                            }
                        },//区域颜色渐变
                        data:[450, 432, 401, 454, 590, 530, 110,242]
                 
    }]
};

QQ截图20200618154319.png

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档