用Echarts画一个曲线图, 节点可拖动

const symbolSize = 10;
const data = [
  [0, 1.2],
  [1, 1.1],
  [2, 1.3],
  [3, 0.8],
  [4, 1,2],
  [5, 1.1],
  [6, 1.2],
  [7, 1.3],
  [8, 1.2],
 
];
option = {
  title: {
    text: '温度 ℃',
    left: '2%',
    textStyle: {
      fontSize: 11,
      fontStyle: 'normal',
      fontWeight: '400',
      fontFamily: 'PingFangSC-Regular, PingFang SC'
    }
  },
  tooltip: {
    triggerOn: 'none',
    formatter: function (params) {
      return (
        'X: ' +
        params.data[0].toFixed(2) +
        '<br>Y: ' +
        params.data[1].toFixed(2)
      );
    }
  },
  grid: {
    left: 50,
    top: 40
  },
  xAxis: {
    min: 0,
    max: 23,
    type: 'value',
    axisLine: { onZero: false },
    axisLabel: {
      formatter(value) {
        return value + ':00'; // 格式时间显示方式
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#D8D8D8'
      }
    }
  },
  yAxis: {
    min: 0,
    max: 1.4,
    interval: 0.1,
    type: 'value',
    axisLine: { onZero: false },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#D8D8D8'
      }
    },
  },
  dataZoom: [
    {
      type: 'inside', // 内置于坐标系中
      start: 0,
      end: 30,
      xAxisIndex: [0]
    }
  ],
  series: [
    {
      id: 'a',
      type: 'line',
      smooth: true,
      symbolSize: symbolSize,
      data: data,
      itemStyle: {
        normal: {
          //改变折现的颜色
          color: '#17B7BD',
          lineStyle: {
            color: '#17B7BD'
          }
        }
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#17B7BD" },
            
            { offset: 1, color: "#FFF" }
          ])
        }
      }, //填充区域样式
    }
  ]
};
setTimeout(function () {
  // Add shadow circles (which is not visible) to enable drag.
  myChart.setOption({
    graphic: data.map(function (item, dataIndex) {
      return {
        type: 'circle',
        position: myChart.convertToPixel('grid', item),
        shape: {
          cx: 0,
          cy: 0,
          r: symbolSize / 2
        },
        invisible: true,
        draggable: true,
        ondrag: function (dx, dy) {
          onPointDragging(dataIndex, [this.x, this.y]);
        },
        onmousemove: function () {
          showTooltip(dataIndex);
        },
        onmouseout: function () {
          hideTooltip(dataIndex);
        },
        z: 100
      };
    })
  });
}, 0);
window.addEventListener('resize', updatePosition);
myChart.on('dataZoom', updatePosition);
function updatePosition() {
  myChart.setOption({
    graphic: data.map(function (item, dataIndex) {
      return {
        position: myChart.convertToPixel('grid', item)
      };
    })
  });
}
function showTooltip(dataIndex) {
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: dataIndex
  });
}
function hideTooltip(dataIndex) {
  myChart.dispatchAction({
    type: 'hideTip'
  });
}
function onPointDragging(dataIndex, pos) {
  data[dataIndex] = myChart.convertFromPixel('grid', pos); // Update data
  myChart.setOption({
    series: [
      {
        id: 'a',
        data: data
      }
    ]
  });
}

option && myChart.setOption(option);