多图示例echarts 折线配置项内容和展示

多图示例

         function formatTime(shijianchuo){
        var date = new Date(shijianchuo);
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var second = date.getSeconds();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        if (hours >= 0 && hours <= 9) {
          hours = "0" + hours;
        }
        if (minutes >= 0 && minutes <= 9) {
          minutes = "0" + minutes;
        }
        if (second >= 0 && second <= 9) {
          second = "0" + second;
        }
        var currentdate = hours + seperator2 + minutes;
        return currentdate;
    };
    
    function formatY(v){
        let str;
        if(v == "1"){
            str = "一级";
        }else if(v == "2"){
            str = "二级";
        }else if(v == "3"){
            str = "三级";
        }else if(v == "4"){
            str = "四级";
        }else if(v == "5"){
            str = "五级";
        }else{
            str = "开始";
        }
        return str;
        // return 1;
    }
    var datax = ["10:00","10:05","10:10","10:15","10:20","10:25","10:30","10:35","10:40","10:45",
    "10:50"];
    var startTime = "1611715974";    //开始时间
    var statusStr = "饱满,无,一般|饱满,无,较好|较好,明显,一般|饱满,无,较好|饱满,无,一般|饱满,无,一般|饱满,无,正常|饱满,无,较好|饱满,无,很好|饱满,无,差|较好,轻微,差|较好,有,差|较好,隐性,一般|饱满,无,很好|饱满,无,差|饱满,无,很好|中等,轻微,一般|饱满,无,一般|饱满,无,一般|中等,轻微,差|饱满,无,较好|饱满,无,差|饱满,无,一般|饱满,无,正常|饱满,无,很好|饱满,无,差|较好,有,一般|较好,隐性,很好|饱满,无,很好|饱满,无,很好|饱满,无,一般|饱满,轻微,一般|饱满,无,正常|中等,轻微,差|较好,轻微,一般|饱满,无,一般|饱满,无,正常|较好,隐性,正常|饱满,轻微,一般|较差,轻微,差|饱满,轻微,正常|饱满,轻微,差|饱满,轻微,一般|中等,轻微,一般|饱满,无,一般|饱满,无,一般|中等,轻微,差|饱满,轻微,一般";
    statusStr = statusStr.split("|");
    
    //拿值
    let flag = 0;
    let js=[];
    let pl=[];
    let gz=[];
    let timeList = [];
    for(let j=0;j<statusStr.length;j++){
        let blockList = statusStr[j].split(",");
        for(let g=0;g<blockList.length;g++){
            let stastr = blockList[g];
            if(g == "0"){
              if (stastr == "较差") {
                  js.push(1);
                } else if (stastr == "略差") {
                  js.push(2);
                } else if (stastr == "中等") {
                  js.push(3);
                } else if (stastr == "较好") {
                  js.push(4);
                } else {
                  js.push(5);
                }  
            }else if(g == "1"){
                 if (stastr == "无") {
                  pl.push(1);
                } else if (stastr == "隐性") {
                  pl.push(2);
                } else if (stastr == "轻微") {
                  pl.push(3);
                } else if (stastr == "有") {
                  pl.push(4);
                } else {
                  pl.push(5);
                }
            }else{
                if (stastr == "差") {
                  gz.push(1);
                } else if (stastr == "一般") {
                  gz.push(2);
                } else if (stastr == "正常") {
                  gz.push(3);
                } else if (stastr == "较好") {
                  gz.push(4);;
                } else {
                  gz.push(5);
                }
            }
        }
        timeList.push(startTime*1);
        startTime=startTime*1+60;
    }
    
    let stackjs=[],stackpl=[],stackgz=[],demodata=[];
    for(let j=0; j<js.length;j++){
        stackjs.push(js[j]*1 -1);
        stackpl.push(pl[j]*1 - 1);
        stackgz.push(gz[j]*1 - 1);
        demodata.push(1);
    }
    console.log(js,pl);
    let demodatapl = [];
    for(let h=0;h<demodata.length;h++){
        let obj;
        if(h%2 == "0"){
            obj = {
                value: 1,
                itemStyle: {
                    color: '#a90000',
                    borderColor:"#a90000"
                }
            }
        }else{
            obj = {
                value: 1,
                itemStyle: {
                    color: '#ff6000',
                    borderColor:"#ff6000"
                }
            }
        }
        demodatapl.push(obj);
    }
    option = {
        title: {
            text: '指标示例',
            left: 'left',
            top: 0
        },
        legend:{
            show:true
        },
        dataZoom:[
            {type:"inside",xAxisIndex:[0,1,2],zoomLock:true},
            // {type:"inside",xAxisIndex:1},
            // {type:"inside",xAxisIndex:2},
            // {type:"inside",xAxisIndex:3},
        ],
        grid: [
            {left: '4%', top: '4%', width: '90%', height: '22%',containLabel:"true"},
            {left: '4%', top: '34%', width: '90%', height: '22%',containLabel:"true"},
            {left: '4%', top: '64%', width: '90%', height: '22%',containLabel:"true"}
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            textStyle:{
                color:'red'
            },
            backgroundColor: 'rgba(255, 255, 255, 1)',
            borderColor:"#b6d88e",
            borderWidth:1,
            // position: function (pos, params, el, elRect, size) {
            //     var obj = {top: 10};
            //     obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
            //     return obj;
            // },
            extraCssText: 'width: 140px'
        },
        axisPointer: {
            link: {xAxisIndex: 'all'},
            label: {
                backgroundColor: 'red',
                formatter:function(res){
                    console.log("res",res);
                    if(res.axisDimension == "x"){
                        return formatTime(res.value*1000);
                    }else{
                         console.log(res);
                        if(res.value*1 <=1){
                            return "一级";
                        }else if(res.value <=2){
                            return "二级";
                        }else if(res.value <=3){
                            return "三级";
                        }else if(res.value <=4){
                            return "四级";
                        }else if(res.value <=5){
                            return "五级";
                        }
                    }
                }
            },
            borderColor:"#b6d88e",
        },
        xAxis: [
            {gridIndex: 0,splitLine:{show:true}, data:timeList,axisLabel:{formatter:function(v){return formatTime(v*1000)}}},
            {gridIndex: 1, data:timeList,axisLabel:{formatter:function(v){return formatTime(v*1000)}}},
            {gridIndex: 2, data:timeList,axisLabel:{formatter:function(v){return formatTime(v*1000)}}}
        ],
        yAxis: [
            {gridIndex: 0,min: 0, max: 5,axisLabel:{
                formatter:function(v){return formatY(v)},
            },
            splitLine:{
             
            },
            },
            {gridIndex: 1, min: 0, max: 5,axisLabel:{formatter:function(v){return formatY(v)}}},
            {gridIndex: 2, min: 0, max: 5,axisLabel:{formatter:function(v){return formatY(v)}}}
        ],
        series: [
            {
                name: '',
                type: 'line',
                xAxisIndex: 0,
                yAxisIndex: 0,
                stack:"js",
                data: stackjs,
                barWidth:"100%",
                symbol:false,
                symbolSize:0,
                smooth:0.5,
                tooltip:{
                    show:false
                },
                itemStyle:{
                   
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(255, 158, 68)'
                    }, {
                        offset: 1,
                        color: 'rgb(255, 70, 131)'
                    }])
                },
            },
            // {
            //     name: 'I',
            //     type: 'bar',
            //     xAxisIndex: 0,
            //     yAxisIndex: 0,
            //     stack:"js",
            //     data: demodata,
            //     // barWidth:"100%",
            //     // symbol:'rect',
            //     // symbolSize:[30,10],
            //     itemStyle:{
            //         color:"#366fab",
            //         borderColor:"#366fab"
            //     },
            //     // lineStyle:{
            //     //     color:'rgba(0,0,0,0)'
            //     // }
            //     // markLine: markLineOpt
            // },
             {
                name: '',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: stackpl,
                stack:"pl",
                barWidth:"100%",
                tooltip:{
                    show:false
                },
                itemStyle:{
                  color:"rgba(0,0,0,0)",
                  borderColor:"rgba(0,0,0,0)"
                }
            },
            {
                name: 'II',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: demodatapl,
                stack:"pl",
                barWidth:"100%",
            },
            {
                name: '',
                type: 'bar',
                xAxisIndex: 2,
                yAxisIndex: 2,
                data: stackgz,
                tooltip:{
                    show:false
                },
                stack:"gz",
                barWidth:"100%",
                itemStyle:{
                    color:"rgba(0,0,0,0)",
                    borderColor:"rgba(0,0,0,0)"
                },
            },
            {
                name: 'III',
                type: 'bar',
                xAxisIndex: 2,
                yAxisIndex: 2,
                data: demodata,
                stack:"gz",
                barWidth:"100%",
                itemStyle:{
                    color:"#366fab",
                    borderColor:"#366fab"
                },
            },
            // {
            //     name: 'IV',
            //     type: 'bar',
            //     xAxisIndex: 3,
            //     yAxisIndex: 3,
            //     data: dataAll[3],
            //     barWidth:"100%",
            //     // markLine: markLineOpt
            //     // symbol:'rect',
            //     // symbolSize:[30,10],
            //     itemStyle:{
            //         color:"#366fab",
            //         borderColor:"#366fab"
            //     },
            //     // lineStyle:{
            //     //     color:'rgba(0,0,0,0)'
            //     // }
            // }
        ]
    };