echarts的折线图中添加一条警戒线

如下图:
在这里插入图片描述
模拟后台数据:

var reg_data ={datas: [{desccode: "EfficiencyGraph", yield: "97", y: "81", description: "08:00-09:00", x: "1"},
   {desccode: "EfficiencyGraph", yield: "97", y: "99.67", description: "09:00-10:00", x: "2"}
   ,{desccode: "EfficiencyGraph", yield: "97", y: "105.20", description: "10:00-11:00", x: "3"}
    ,{desccode: "EfficiencyGraph", yield: "97", y: "105.71", description: "11:00-13:00", x: "4"}
   ,{desccode: "EfficiencyGraph", yield: "97", y: "94.67", description: "13:00-14:00", x: "5"}
    ,{desccode: "EfficiencyGraph", yield: "97", y: "79.67", description: "14:00-15:00", x: "6"}
    ,{desccode: "EfficiencyGraph", yield: "97", y: "0", description: "15:00-16:00", x: "7"}
    ,{desccode: "EfficiencyGraph", yield: "97", y: "0", description: "16:00-18:00", x: "8"}
    ,{desccode: "EfficiencyGraph", yield: "97", y: "0", description: "18:00-19:00", x: "9"}
   ,{desccode: "EfficiencyGraph", yield: "97", y: "0", description: "19:00-20:00", x: "10"}]};

将以上数据转换成可用的:
如:var data = {x:arrX,y:arrY,warnNum:s[0].yield,maxY:maxy};

以下是上图的配置原码:

function lineChartL(id,data) {
    var lineChartDom = echarts.init($("#" + id).get(0));
   // 图表的配置项和数据
    var option = {
        title:{
            /*text:"警戒("+data.warnNum+")",
            right:18,
            bottom:10 + (data.warnNum<=0?23:data.warnNum),*/
            textStyle:{
                color:"red",
                fontSize:13,
                fontWeight:"normal",
                fontFamily:"微软雅黑"
            }
        },
        series: [
            {
                name: "总直通率",  //鼠标悬停点的显示名称
                data: data.y, //y点数据
                type: 'line',
                z:10,
                areaStyle: { //渐变色
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: 'rgba(2,237,255,0.6)'},
                                {offset: 0.5, color: 'rgba(2,237,255,0.3)'},
                                {offset: 1, color: 'rgba(2,237,255,0.1)'}
                            ]
                        )
                    }},
                smooth: true,
                itemStyle: {
                    // color: '#02edff',
                    normal:{
                        label:{show:true},
                        color:"#02edff"
                    }
                },
                showSymbol: true,
                symbol: 'circle',     //设定为实心点
                symbolSize: 10,   //设定实心点的大小
                center: [20, 50],
                markLine : {   //添加警戒线
                    symbol:"none",               //去掉警戒线最后面的箭头
                    name:"警戒线",
                    silent:true,
                    label:{
                        position:"end",         //将警示值放在哪个位置,三个值“start”,"middle","end"  开始  中点 结束
                        formatter: "警戒线(" +data.warnNum+ ")",
                        color:"red",
                        fontSize:14
                    },
                    data : [{
                        silent:true,             //鼠标悬停事件  true没有,false有
                        lineStyle:{               //警戒线的样式  ,虚实  颜色
                            type:"solid",
                            color:"red"
                        },
                        name: '警戒线',
                        yAxis: data.warnNum
                    }]
                }
            }],
        xAxis: {
            type: 'category',
            data: data.x,
            axisLine: { // 坐标轴小标记
                lineStyle: { // 属性lineStyle控制线条样式
                    // fontWeight : 'bolder',
                    color: '#1d364a',
                    // shadowColor : '#1d364a', // 默认透明
                    width: 1
                }
            },
            boundaryGap: false,
        },
        yAxis: [
            {
            type: 'value',
            show: true,
            minInterval: 0,
            maxInterval: data.maxY,
            min:0,
            max:data.maxY,
            splitNumber: 3,
            nameTextStyle: {
                color: "#fff",
                rich: {
                    color: "#fff"
                }
            },
            axisLine: { // 坐标轴小标记
                lineStyle: { // 属性lineStyle控制线条样式
                    // fontWeight : 'bolder',
                    color: '#1d364a',
                    // shadowColor : '#1d364a', // 默认透明
                    width: 1
                }
            },
            // 控制网格线是否显示
            splitLine: {
                show: true,
                //  改变轴线颜色
                lineStyle: {
                    // 使用深浅的间隔色
                    color: ['#1d364a'],
                    width: 1
                }
            }
        },
            {
            type: "value",
            // name:"abc",
            // nameLocation:"start",
            axisLine: { // 坐标轴小标记
                lineStyle: { // 属性lineStyle控制线条样式
                    // fontWeight : 'bolder',
                    color: '#1d364a',
                    // shadowColor : '#1d364a', // 默认透明
                    width: 1
                }
            }
        }],
        legend: {
            data: ["Y"]
        },
        grid: { //修改图表显示位置
            top: '10%',
            bottom: '10%',
            containLabel: true
        },
        tooltip: { //悬停显示数据
            // trigger: 'axis'
        },
        textStyle: {
            color: "#fff"
        },
        lineStyle: {
            color: "#02edff"
        }
    };
    lineChartDom.setOption(option);
}
  • 3
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值