[echarts] 用graphic模拟可移动的markline

用graphic模拟可移动的markline

let base = +new Date(1988, 9, 3);
let oneDay = 24 * 3600 * 1000;
let data = [[base, Math.random() * 300]];

for (let i = 1; i < 20000; i++) {
    let now = new Date((base += oneDay));
    data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
}

option = {
  grid: {
    top: '40px',
    bottom: '60px',
    left: '50px',
    right: '30px'
  },
  xAxis: {
    type: 'time',
    boundaryGap: false,
    axisLine: {onZero: false},
    axisPointer:
    {
      show: true,
      type: 'line',
    },
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%']
  },
  series: [
    {
    name: 'Fake Data',
    type: 'line',
    smooth: true,
    symbol: 'none',
    areaStyle: {},
    data: data
    }
  ],
  graphic: {
    elements: [
    {
    type: 'group',
    left: 'center',
    draggable: 'horizontal',
    ondrag: function (params) {    
      var pointInPixel = [params.offsetX, params.offsetY];
      var pointInGrid = myChart.convertFromPixel('grid', pointInPixel);

      var xTime = new Date(pointInGrid[0])

      //get closest value from cursor
      var point = data.reduce((prev, curr) => Math.abs(new Date(curr[0]).valueOf() - xTime.valueOf()) < Math.abs(new Date(prev[0]).valueOf() - xTime.valueOf()) ? curr : prev)

      //console.log('poi', new Date(pointInGrid[0]), new Date(point[0]), point[1])

      var d = document.getElementById('value2');
      d.style.left = params.offsetX+'px';
      d.innerHTML = point[1]
    },
    children: [
    {
      id: 'bar1',
      type: 'rect',
      top: '30px',
      shape: {
          width: 2,
          height: 685
      },
      style: {
          fill: "#ff0000"
      },
      cursor: 'ew-resize'
    },
    {
      type: 'circle',
      top: '740px',
      shape: {
          r:10
      },
      style: {
          fill: "#ff0000"
      },
    }
    ]
    },
    {
      type: 'group',
      left: '150px',
      draggable: 'horizontal',
      ondrag: function (params) {    
        var pointInPixel = [params.offsetX, params.offsetY];
        var pointInGrid = myChart.convertFromPixel('grid', pointInPixel);

        var xTime = new Date(pointInGrid[0])

        //get closest value from cursor
        var point = data.reduce((prev, curr) => Math.abs(new Date(curr[0]).valueOf() - xTime.valueOf()) < Math.abs(new Date(prev[0]).valueOf() - xTime.valueOf()) ? curr : prev)

        //console.log('poi', new Date(pointInGrid[0]), new Date(point[0]), point[1])

        var d = document.getElementById('value1');
        d.style.left = params.offsetX+'px';
        d.innerHTML = point[1]
      },
      children: [
        {
            type: 'rect',
            top: '30px',
            shape: {
                width: 2,
                height: 685
            },
            style: {
                fill: "#0000ff"
            },
            cursor: 'ew-resize'
        },
      ]
    },
  ]}
};