Echarts 折线图【渐变色】

4 篇文章 0 订阅
//配置参数
options:{
    // Make gradient line here
    visualMap: [{
        show: false,
        type: 'continuous',
        seriesIndex: 0,
        min: 0,
        max: 100
    } ],
    title: [{
        left: 'center',
        text: '门锁耗电曲线'
    } ],
    tooltip: {
        trigger: 'axis'
    },
    xAxis: [{
        data: '',//dataList
    }],
    yAxis: [{
        splitLine: {show: false}
    }],
    grid: [{
        bottom: '50%'
    }, {
        top: '60%'
    }],
    series: [{
        type: 'line',
        showSymbol: true,
        data: '',//valueList
        itemStyle: {
            normal: {
                color: 'black',
                lineStyle: {        // 系列级个性化折线样式
                    width: 2,
                    type: 'solid',
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'green'
                    }, {
                        offset: 1,
                        color: 'red'
                    }]),//线条渐变色
                }
            },
            emphasis: {
                color: 'black',
                lineStyle: {        // 系列级个性化折线样式
                    width: 2,
                    type: 'dotted',
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'green'
                    }, {
                        offset: 1,
                        color: 'red'
                    }])
                }
            }
        },//线条样式
    }],
}

//图标生成

drawBatteryUsingLine:function () {
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('myChart'));

    // 过渡---------------------
    myChart.showLoading({
        text: '正在努力的读取数据中...',    //loading话术
    });

    //向后端获取数据
    var data = [["2000-06-05",100],["2000-06-06",90],["2000-06-07",89],["2000-06-08",86],["2000-06-09",73],["2000-06-10",71],["2000-06-11",60],["2000-06-12",60],["2000-06-13",55],["2000-06-14",50],["2000-06-15",45],["2000-06-16",40],["2000-06-17",35],["2000-06-18",33],["2000-06-19",31],["2000-06-20",27],["2000-06-21",25],["2000-06-22",10],["2000-06-23",0]];
    var dateList = data.map(item=> {
        return item[0];
    });
    var valueList = data.map(item=> {
        return item[1];
    });
    //options赋值
    this.options.xAxis[0].data = dateList;
    this.options.series[0].data = valueList;

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(this.options);

    // 过渡---------------------
    myChart.hideLoading();
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值