echarts 设置平均线,警戒线markLine属性

option = {
    title: {
        text: '一周水质处理量',
        subtext: 'm³'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['最大水处理量', '最少水处理量']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} m³'
        }
    },
    series: [
        {
            name: '最大水处理量',
            type: 'line',
            data: [10, 11, 13, 11, 12, 12, 9],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}, // 设置平均线 可以有多个yAxis,多条’示线   或者采用   {type : 'average', name: '平均值'},type值有  max  min  average,分为最大,最小,平均值
                    { 
                        yAxis: 5,
                        symbol:"none", // 去掉警戒线最后面的箭头
                        silent:false, // 鼠标悬停事件  true没有,false有
                        name: '警戒线', // 警戒线
                        lineStyle: { // 警戒线样式
                            type: 'solid',
                            color: 'red'
                        },
                        label: {
                             position: 'end',//将警示值放在哪个位置,三个值“start”,"middle","end"  开始  中点 结束
                             formatter: '警戒线', // 名称
                             fontSize: 14
                         },
                    },
                ] 
            }
        },
        {
            name: '最少水处理量',
            type: 'line',
            data: [1, 2, 2, 5, 3, 2, 8],
            markPoint: {
                data: [
                    {name: '周最高', value: 1, xAxis: 0, yAxis: 1},
                    {name: '周最低', value: 8, xAxis: 6, yAxis: 8}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}, // 设置平均线
                   
                ]
            }
        }
    ]
};

需求: 需要平均线,警戒线,最高值最低值,多条线在同一个echarts上;

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值