echarts折线图设置横向基准线/水平线

 注意：请勿复制源码以防页面乱码 具体基准线设置项请参考js注释

需求：在搜索框内输入数值 基准线会自动移动至相应位置

 

代码如下：

  <div class="mt43  globalflowAnalysisForensics" >

                        
                          <div class="pencilBox" style="text-align:right;height:20px;">
                            <i class="redbox"></i>
                            <span class="whiteColor">安全基线</span>
                            <b class="deepColor"></b>
                            <span class="glyphicon glyphicon-pencil js-pencil" ></span>
                            <div class="js-alertPrompt hidden">
                              <div class=" positionHorn boxLineColor js-Prompt1" style="">
                                <i class="leftBottom"></i>
                                <i class="rightBottom"></i>
                                <input type="" name="" class="boxLineColor iptsearch" placeholder="请设置基线(kb)" autocomplete="off">
                              </div>
                              <input autocomplete="off" type="button" class="search-button smallbutton js-changeline" name="" value="确定">
                            </div>


                          </div>
              						<div class="globalflow" id="globalflow">

                          </div>

              					</div>

 

js如下：

//铅笔点击输入
    $('.js-pencil').on('click',function(){
      $(".js-alertPrompt").removeClass("hidden");
      $(".pencilBox").css("text-align","right");
    });
//确定按钮
    $('.js-changeline').on('click',function(){
      linevalue=Number($(".iptsearch").val());           //将linevalue设置 为数值类型 切记
        $(".js-alertPrompt").addClass("hidden");
      fnBrokenline3('globalflow',unnormalFlow.ssids,unnormalFlow.datasizes);
    });


var linevalue=200;                             //将linevalue设置为全局变量 切记 为数值类型 也不能为0 
    var unnormalFlow="";
    // 异常流量报警
    function fnglobalflowAnalysisForensics(){
        $.ajax({
            url:'/home/susApFlow',
            type:'post',
            data:{},
            success:function(data){
                // var hour = data.hour;
                // var y1 = data.yes_count;
                // var y2 = data.count;
                // fuDoubleDiagram(id,hour,y1,y2,'个');
                unnormalFlow=data
                fnBrokenline3('globalflow',data.ssids,data.datasizes);
            },
            error:function(error){console.log(error);}
        });

    }

    /*折线图 -- 带中间标线*/
    function fnBrokenline3(id,dtx,dty){

        var pieChart = echarts.init(document.getElementById(id));
        var option1 = {
            grid: {
                left: '1%',
                right: '5%',
                bottom: '1%',
                top:'15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                axisTick: {           //去掉坐标轴刻线
                    show: false
                },
                axisLine:{
                    lineStyle:{
                       color:'rgba(30,130,190,0.7)'     //X轴的颜色
                    },
                },
                axisLabel:{
                    color:'#FFF',
                    interval: '0',
                    formatter:function(params){
                        var newParamsName = "";// 最终拼接成的字符串
                        var paramsNameNumber = params.length;// 实际标签的个数
                        var provideNumber = 7;// 每行能显示的字的个数
                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                        /**
                         * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                         */
                         // 条件等同于rowNumber>1
                        if (paramsNameNumber > provideNumber) {
                        /** 循环每一行,p表示行 */
                        for (var p = 0; p < rowNumber; p++) {
                        var tempStr = "";// 表示每一次截取的字符串
                        var start = p * provideNumber;// 开始截取的位置
                        var end = start + provideNumber;// 结束截取的位置
                        // 此处特殊处理最后一行的索引值
                        if (p == rowNumber - 1) {
                        // 最后一次不换行
                         tempStr = params.substring(start, paramsNameNumber);
                        } else {
                            // 每一次拼接字符串并换行
                        tempStr = params.substring(start, end) + "\n";
                        }
                        newParamsName += tempStr;// 最终拼成的字符串
                        }

                        } else {
                        // 将旧标签的值赋给新标签
                        newParamsName = params;
                        }
                         //将最终的字符串返回
                        return newParamsName
                    }
                },
                data:dtx
            },

                visualMap: {
                    show: false,
                    pieces: [
                      {
                        gt: 0,
                        lte: linevalue,          //这儿设置基线上下颜色区分 基线下面为绿色
                        color: '#03d6d6'
                    }, {
                                
                        gt: linevalue,          //这儿设置基线上下颜色区分 基线上面为红色
                        color: '#e91642'
                    }]
                },
                yAxis: {
                    type: 'value',
                    name: '(kb)',
                    nameTextStyle:{
                        color:'#FFF'
                    },
                    axisTick: {//去掉坐标轴刻线
                        show: false
                    },
                    axisLine:{
                        lineStyle:{
                            color:'rgba(30,130,190,0.7)'         //y轴的颜色
                        },
                    },
                    axisLabel:{
                        color:'#FFF'
                    },
                    splitLine:{show: false},//去除网格线

                },
                series: [{
                    type: 'line',
                    smooth:true,//平滑曲线
                    data:dty,
                    markLine: {
                        silent: true,
                        lineStyle: {
                          normal: {
                            color: '#01fef9'                   // 这儿设置安全基线颜色
                          }
                        },
                        data: [{
                            yAxis: linevalue
                        }],
                        label: {
                          normal: {
                            formatter: '安全\n基线'           // 这儿设置安全基线
                          }
                        },
                    },

                }, ]
            };
        pieChart.setOption(option1);
    }