lxf
/
baise-pc-vue


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
							<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=line-simple&code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCGYVA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEFQGVmphdFoBdEgF8-6cjnxFUpMpRqyAbowA2SrT2jrB4VEZUhLCi_MQegsJiAIwArAAMPLDQCv7-WQBMBQAshckAHFnJAMypVcUA7IUAbOnWoR4U1HT-ENDKcQ5x7glCYCIxALTJ6bNZmbALCw0LyTNV1W0dpF3etL39vHHoeOQAtgBGwP50YEaM0Kz-ytsn51f-JhAAXt4FmcdYAcqCYKM83ID0PRrpw6ABiVKNdIAYVa6SOCVIAHcIAIwNoiKVIZ5urIhHhtBpgpihpiICwzqDyOD4pjYFcOAIIqpcfiiNVXqQOVyOMiYRx4QBRSXNWXNDFs6H-WGychUPLALHUhJ2QYkWx2ADcQA
	⚠ 请注意，该图表不是 Apache ECharts 官方示例，而是由用户代码生成的。请注意鉴别其内容。
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};


    function getXAxis(arrays){
      let set = new Set()
      for(let array of arrays){
        for(let item of array){
          set.add(item.createDate)
        }
      }
      let newArray = new Array()
      set.forEach(value => {
        newArray.push(value);
      })
      newArray.sort((a, b) => {
        return a.localeCompare(b)
      })
      return newArray;
    }

    var list1 = [
            {value:0.3,createDate:"2023-02-10"},
            {value:0.4,createDate:"2023-02-15"},
            {value:0.7,createDate:"2023-02-18"},
            {value:0.5,createDate:"2023-02-20"},
            ]
    var list2 = [
      {value:0.5,createDate:"2023-02-10"},
      {value:0.6,createDate:"2023-02-15"},
      {value:0.8,createDate:"2023-02-18"},
      {value:0.4,createDate:"2023-02-20"},
    ]
    var list3 = [
      {value:-0.2,createDate:"2023-02-09"},
      {value:-0.2,createDate:"2023-02-10"},
      {value:-0.2,createDate:"2023-02-11"},
      {value:-0.2,createDate:"2023-02-15"},
      {value:-0.2,createDate:"2023-02-16"},
      {value:-0.2,createDate:"2023-02-17"},
      {value:-0.2,createDate:"2023-02-18"},
      {value:-0.2,createDate:"2023-02-21"},
    ]
    var list4 = [
      {value:-0.5,createDate:"2023-02-09"},
      {value:-0.5,createDate:"2023-02-11"},
      {value:-0.5,createDate:"2023-02-12"},
      {value:-0.5,createDate:"2023-02-16"},
      {value:-0.5,createDate:"2023-02-17"},
      {value:-0.5,createDate:"2023-02-18"},
      {value:-0.5,createDate:"2023-02-19"},
      {value:-0.5,createDate:"2023-02-22"},
    ]
    let xAxisData = getXAxis([list1,list2,list3,list4]);

    function getSeries(arrays){
      let series = new Array();
      for(let array of arrays){
        if(array[0].value < 0){
          let points = createPoints();
          points.data = fillByCreateDate(xAxisData, array, null)
          series.push(points);
        }else{
          let line = createLine();
          line.data = fillByCreateDate(xAxisData, array, "mid")
          series.push(line)
        }
      }
      return series;
    }
    function createPoints(){
      return {
        data:[],
        type: 'line',
        symbol: 'triangle',
        symbolSize: 20,
        lineStyle: {
          color: '#5470C600',
          width: 4,
          type: 'dashed'
      },
        itemStyle: {
          borderWidth: 3,
          borderColor: '#EE6666',
          color: 'yellow'
        }
      }
    }

    function createLine(){
      return {
        data: [],
        type: 'line',
        symbol: function(array,obj){
          if(!obj.data.mid){
            return "emptyCircle";
          }else{
            return "none"
          }
        },
        itemStyle: {
          borderWidth:0,
          borderColor: '#EE666600',
          borderJoin:"miter",
          color: function(obj){
            if(!obj.data.mid){
              return obj.color;
            }else{
              return "none"
            }
          },
          borderWidth: function(obj){
            console.log(obj)
          }
        }
      }
    }

    function fillByCreateDate(createDates, datas, filler){
      let res = new Array()
      let j=0;
      for(let i=0;i<createDates.length;i++){
        if(!datas[j]){
          res.push({value:null})
        }else if(createDates[i] == datas[j].createDate){
          res.push(datas[j++])
        }else{
          res.push({value:filler,mid:'mid'});
        }
      }
      //处理中间值
      if(filler == "mid"){
        insertMid(res)
      }
      return res;
    }

    function insertMid(datas){
      let before = null;
      let n = 0;
      for(let i=0;i<datas.length;i++){
        if(!before && datas[i].value === "mid"){
          datas[i] = {value:null};
          continue;
        }

        if(!before){
          before = datas[i].value;
          continue;
        }

        if(datas[i].value === "mid"){
          n++;
        }else{
          if(n > 0){
            insertMid2(before, datas[i].value, datas, i , n)
            n = 0;
          }
          before = datas[i].value;

        }
      }
    }

    function insertMid2(before, alter, datas, i , n){
      let f = (alter - before) / (n + 1);
      for(let j = i-n; j < i;j++){
        datas[j].value = before + f;
        before = datas[j].value;
      }
    }

    let series = getSeries([list1,list2,list3,list4]);
console.log(series)
var option = {
  xAxis: {
    type: 'category',
    data: xAxisData
  },
  yAxis: {
    type: 'value'
  },
  series: series
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>