echarts 曲线图 - 带渐变

<div id="essentialInformation" style="width: 100%;height:25.199203187251vh;"></div>


function essentialInformation (){
    var essentialInformation = document.getElementById('essentialInformation');
    var myChart = echarts.init(essentialInformation);
    var option;

    option = {
        tooltip: {
            trigger: "axis",
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "0%",
            top: "10%",
            containLabel: true,
        },
        xAxis: {
            type: "category",
            boundaryGap: false,
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#f2f9ff",
                },
            },
            axisLine: axisLine,
            axisTick: {
                //y轴刻度线
                show: true,
            },
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: "value",
            axisLabel: axisLabel,
            axisLine: axisLine,
            axisTick: {
                //y轴刻度线
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: "rgba(112,145,127,.1)",
                },
            },
        },
        series: [{
            name: "达标天数",
            type: "line",
            color: ["#07DC9F"],
            areaStyle: {
                normal: {
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "rgba(7,220,159,0.4)", // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "rgba(7,220,159,0)", // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                },
            },
            smooth: true,
            data: [820, 932, 901, 934, 1290, 1330, 1320],

        }]
    };

    option && myChart.setOption(option);
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值