标签：false color rgba 折线图 233 lineStyle dot 255

/**
 *
 * 作者: GhostCat
 * 博客: https://gcat.cc
 * 描述: 带点和渐变的折线图
 *
 */
 
let label = [233, 233, 200, 180, 199, 233, 210, 180];
let value = [233, 233, 200, 180, 199, 233, 210, 180];

option = {
    backgroundColor: '#101e44',
    grid: {
        top: 100,
        containLabel: true,
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(255,255,255,0)', // 0% 处的颜色
                        },
                        {
                            offset: 0.5,
                            color: 'rgba(255,255,255,1)', // 100% 处的颜色
                        },
                        {
                            offset: 1,
                            color: 'rgba(255,255,255,0)', // 100% 处的颜色
                        },
                    ],
                    global: false, // 缺省为 false
                },
            },
        },
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                formatter: '{value}',
                fontSize: 14,
                margin: 20,
                textStyle: {
                    color: '#7ec7ff',
                },
            },
            axisLine: {
                lineStyle: {
                    color: '#243753',
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#243753',
                },
            },
            axisTick: {
                show: false,
            },
            data: label,
        },
    ],
    yAxis: [
        {
            boundaryGap: false,
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#7ec7ff',
                },
            },
            nameTextStyle: {
                color: '#fff',
                fontSize: 12,
                lineHeight: 40,
            },
            splitLine: {
                lineStyle: {
                    color: '#243753',
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#283352',
                },
            },
            axisTick: {
                show: false,
            },
        },
    ],
    series: [
        {
            name: '报名',
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
                color: '#19a3df',
                borderColor: '#a3c8d8',
            },
            lineStyle: {
                normal: {
                    width: 6,
                    color: '#19a3df',
                },
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: 'rgba(88,255,255,0.2)',
                            },
                            {
                                offset: 0.8,
                                color: 'rgba(88,255,255,0)',
                            },
                        ],
                        false
                    ),
                },
            },
            data: value,
        },
    ],
};

标签：false,color,rgba,折线图,233,lineStyle,dot,255
来源： https://www.cnblogs.com/z-j-c/p/15826359.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。