折线图线一半实线一半虚线

let xAxisData = [{"year":2022,"month":1,"date":"2022-01","lineD":false,"lineK":false,"monthEn":"Jan"},{"year":2022,"month":2,"date":"2022-02","lineD":false,"lineK":false,"monthEn":"Feb"},{"year":2022,"month":3,"date":"2022-03","lineD":false,"lineK":false,"monthEn":"Mar"},{"year":2022,"month":4,"date":"2022-04","lineD":false,"lineK":false,"monthEn":"Apr"},{"year":2022,"month":5,"date":"2022-05","lineD":false,"lineK":true,"monthEn":"May"},{"year":2022,"month":6,"date":"2022-06","lineD":true,"lineK":true,"monthEn":"Jun"},{"year":2022,"month":7,"date":"2022-07","lineD":true,"lineK":true,"monthEn":"Jul"},{"year":2022,"month":8,"date":"2022-08","lineD":true,"lineK":true,"monthEn":"Aug"},{"year":2022,"month":9,"date":"2022-09","lineD":true,"lineK":true,"monthEn":"Sep"},{"year":2022,"month":10,"date":"2022-10","lineD":true,"lineK":true,"monthEn":"Oct"},{"year":2022,"month":11,"date":"2022-11","lineD":true,"lineK":true,"monthEn":"Nov"},{"year":2022,"month":12,"date":"2022-12","lineD":true,"lineK":true,"monthEn":"Dec"}]
let blueList = [{"month":"1","year":"2022","price":1330,"date":"2022-01"},{"month":"2","year":"2022","price":1360,"date":"2022-02"},{"month":"3","year":"2022","price":1380,"date":"2022-03"},{"month":"4","year":"2022","price":1410,"date":"2022-04"},{"month":"5","year":"2022","price":1410,"date":"2022-05"},{"month":"6","year":"2022","price":1410,"date":"2022-06"},{"month":"7","year":"2022","price":1450,"date":"2022-07"},{"month":"8","year":"2022","price":1450,"date":"2022-08"},{"month":"9","year":"2022","price":1450,"date":"2022-09"},{"month":"10","year":"2022","date":"2022-10"},{"month":"11","year":"2022","date":"2022-11"},{"month":"12","year":"2022","date":"2022-12"}];
let greenList = [{"month":"1","year":"2022","price":876.37,"date":"2022-01"},{"month":"2","year":"2022","price":906,"date":"2022-02"},{"month":"3","year":"2022","price":936.12,"date":"2022-03"}]
option = {
        tooltip: {
          trigger: "axis", 
          backgroundColor: '#fff',
          formatter: function (datas) {
            let marker2  ='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;border: 1px solid #5B8FF9;"></span>'
            let marker4  ='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;border: 1px solid #5AD8A6;"></span>'
            let str = '';
            str = `${datas[0]&&datas[0].data&&datas[0]&&datas[0].data.date?'<p>'+datas[0].data.date+'</p>':'<p>'+datas[1]&&datas[1].data.date+'</p>'}
            ${datas[0]&&datas[0].value||(datas[1]&&datas[1].value&&datas[0]&&datas[0].value)?'<p>'+datas[0].marker+datas[0].seriesName+' : <span style="color: #000;"> '+datas[0].value+'</span></p>':''}
            ${(datas[1]&&datas[1].value&&datas[0]&&datas[0].value==undefined)?'<p>'+marker2+datas[1].seriesName+' : <span style="color: #000;"> '+datas[1].value+'</span></p>':''}
            ${datas[2]&&datas[2].value?'<p>'+datas[2].marker+datas[2].seriesName+' : <span style="color: #000;"> '+datas[2].value+'</span></p>':''}
            ${datas[3]&&datas[3].value?'<p>'+marker4+datas[3].seriesName+' : <span style="color: #000;"> '+datas[3].value+'</span></p>':''}`
            return str;
          },
          textStyle:{
            color: "#5a5a5a",
            fontSize: 12,
          },
          extraCssText: 'box-shadow: 0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05);'
        },
        
        grid: {
          left: "0%",
          right: "2%",
          bottom: "15%",
          containLabel: true, 
        },
        xAxis: {
          type: "category",
          axisTick: {
            alignWithLabel: true
          },
          axisLabel:{
            formatter:function(value){
              let arr = value.split('-')
              if(arr[0]=='Jan'){
                let str = `${arr[0]}\n${arr[1]}`
                return str
              }else{
                return arr[0]
              }
            }
          },
          data: xAxisData.map(item=>item.monthEn+'-'+item.year),
        },
        dataZoom: [
          { 
            type: 'slider', 
            filterMode:'empty',//防止切换数据时 折线图错乱（多出一条连到底的直线）
            handleSize: 32,
            start: 0, 
            end: 60, 
            bottom: "10", 
          },
          {  type: 'inside', },
        ],
        yAxis: {
          type: "value",
          axisLine:{show :false},
          axisTick:{show :false},
        },
        series: [
          {
            name: 'one',
            type: "line",
            symbol:'circle',
            symbolSize:10,
            lineStyle: {
              color:'#5B8FF9',
            },
            itemStyle:{
              normal:{
                color:'#5B8FF9',
                borderColor:'#fff',
              },
              emphasis:{
                borderColor: '#000',
              }
            },
            connectNulls: true,
            data: xAxisData.map(item=>{
              for (let index = 0; index < blueList.length; index++) {
                const element = blueList[index];
                if(item.date==element.date&&!item.lineD){
                  return {value:element.price,date:item.date}
                }
              }
            }),
          },
          {
            name: 'one',
            type: "line",
            symbol:'circle',
            symbolSize:10,
            lineStyle: {
              color:'#5B8FF9',
              type: 'dashed',
            },
            itemStyle:{
              normal:{
                color:'rgba(0,0,0,0)',
                borderColor:'#5B8FF9',
              },
              emphasis:{
                borderColor: '#5B8FF9',
              }
            },
            connectNulls: true,
            data: xAxisData.map(item=>{
              for (let index = 0; index < blueList.length; index++) {
                const element = blueList[index];
                if(item.date==element.date&&item.lineK){
                  return {value:element.price,date:item.date}
                }
              }
            }),
          },
          {
            name: 'two',
            type: "line",
            symbol:'circle',
            symbolSize:10,
            lineStyle: {
              color:'#5AD8A6',
            },
            itemStyle:{
              normal:{
                color:'#5AD8A6',
                borderColor:'#fff',
              },
              emphasis:{
                borderColor: '#000',
              }
            },
            connectNulls: true,
            data: xAxisData.map(item=>{
              for (let index = 0; index < greenList.length; index++) {
                const element = greenList[index];
                if(item.date==element.date&&!item.lineD){
                  return {value:element.price,date:item.date}
                }
              }
            }),
          },
          {
            name: 'two',
            type: "line",
            symbol:'circle',
            symbolSize:10,
            lineStyle: {
              color:'#5AD8A6',
              type: 'dashed',
            },
            itemStyle:{
              normal:{
                color:'rgba(0,0,0,0)',
                borderColor:'#5AD8A6',
              },
              emphasis:{
                borderColor: '#5AD8A6',
              }
            },
            connectNulls: true,
            data: xAxisData.map(item=>{
              for (let index = 0; index < greenList.length; index++) {
                const element = greenList[index];
                if(item.date==element.date&&item.lineK){
                  return {value:element.price,date:item.date}
                }
              }
            }),
          },
        ],
      }