当前位置： 移动技术网 > IT编程>开发语言>JavaScript > echarts折线图上下颜色渐变样式

echarts折线图上下颜色渐变样式

2019年10月26日  | 移动技术网IT编程  | 我要评论 
// 折线图
let linechart = echarts.init(document.getelementbyid('linechart'));
let lineoption = {
    title: {
        text: '数据接入增量趋势',
        textstyle: {
            color: '#cccccc',
            fontsize: 14
        }
    },
    tooltip : {      // 悬浮提示
        trigger: 'axis',
        axispointer: {
            type: 'cross',
            label: {
                backgroundcolor: '#6a7985'
            }
        }
    },
    grid: {
        left: 5,
        right: 20,
        top: 50,
        bottom: 5,
        containlabel: true
    },
    xaxis : [
        {
            type : 'category',
            boundarygap : false,    // 是否紧贴y轴
            axisline: { // x轴
                linestyle: {
                    color: '#606970'
                }
            },
            axistick: { // x轴刻度
                linestyle: {
                    color: '#606970'
                }
            },
            axislabel: { // x轴文字
                color: '#ffffff',
                fontsize: 10
            },
            data : ['4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日']
        }
    ],
    yaxis : [
        {
            name: '单位：万条',
            type: 'value',
            nametextstyle: {
                color: '#ffffff',
                fontsize: 10,
                padding: [0, 0, 0, 0]
            },
            axisline: { // y轴
                show: false
            },
            axistick: { // y轴刻度
                show: false
            },
            axislabel: { // y轴文字
                color: '#ffffff',
                fontsize: 10
            },
            splitline: { // y轴分割线
                linestyle: {
                    color: '#606970'
                }
            },
            splitnumber: 5,    // 总分隔线条数
            interval: 25       // 强制分隔单位
        }
    ],
    series : [
        {
            name:'数据接入增量',
            type:'line',
            stack: '总量',
            itemstyle: {
                color: '#5dd9da'
            },
            linestyle: {
                color: '#5dd9da',
                width: 0.5
            },
            areastyle: {         // 颜色自上而下渐变
                color: new echarts.graphic.lineargradient(0, 0, 0, 1, [{        // 1代表上面
                    offset: 0,
                    color: '#3399fb'
                }, {
                    offset: 1,
                    color: '#3399cd'
                }]),
                opacity: 1    // 填充区域透明度
            },
            data:[0, 25, 50, 75, 100, 0, 25, 50, 75, 100, 0, 25]
        }
    ]
};
linechart.setoption(lineoption);

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网