echarts 图表加水平直线或者标准线

如果给 echarts 水平添加一条控制下,效果图如下:

我们只需添加一个每个月的数值都是一样的,去除掉折线上面的点即可,代码如下:

var option = {
    ......
    series: [
        {
            name: '控制线',
            type: 'line',
            symbol: 'rect',
            smooth: 'true',
            symbolSize: 0,
            showSymbol: 'false',
            lineStyle: {
                normal: {
                    width: 2
                }
            },
            data: [200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200]
        },
    ]
};

如果我们需要添加的是一条标准线,标准线上的折线是一种颜色,标准线下的折线又是一种颜色,效果图如下:

直接上代码:

option = {
   visualMap: {
        show: false,
        pieces: [
          {
            gt: 0,
            lte: 6000,          //这儿设置基线上下颜色区分 基线下面为绿色
            color: '#03d6d6'
        }, {
                    
            gt: 6000,          //这儿设置基线上下颜色区分 基线上面为红色
            color: '#e91642'
        }]
    },
    series: [{
        type: 'line',
        smooth:true,//平滑曲线
        data: [1233, 4323, 333, 3343, 13302, 10342, 4203],
        markLine: {
            silent: true,
            lineStyle: {
              normal: {
                color: '#01fef9'                   // 这儿设置安全基线颜色
              }
            },
            data: [{
                yAxis: 6000
            }],
            label: {
              normal: {
                formatter: '标准\n基线'           // 这儿设置安全基线
              }
            },
        },

    }]
};

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值