背景

在实现拖拽曲线的功能基础上，官方例子存在部分问题：连续拖拽掉点，视图更新导致拖拽不平滑，超出坐标轴报错等问题。因此，在进行多次调试后，通过以下方式来解决对应的问题。

问题一：连续拖拽掉点

定义变量preIndex记录上次改变的点，preSeconds记录上次改变的时间戳。若两次改变的时间戳在0.1s内，则认为中间的值均为改变值

  1. const index = myChart.convertFromPixel('grid', [dx.offsetX, dx.offsetY])[0];
  2.   if (preIndex) {
  3.     // 快速划过时，存在点丢失的情况
  4.     if (Math.abs(preIndex - index) > 1 && moment().millisecond() - preSeconds < 100) {
  5.       const max = preIndex - index > 0 ? preIndex : index;
  6.       const min = preIndex - index < 0 ? preIndex : index;
  7.       for (let i = min; i < max + 1; i++) {
  8.         fun(i);
  9.       }
  10.       preIndex = index;
  11.       preSeconds = moment().millisecond();
  12.       return;
  13.     }
  14.   }
  15.   preSeconds = moment().millisecond();
  16.   preIndex = index;

问题二：视图更新导致拖拽不平滑

视图更新（setOption）会引起页面的回流，导致页面性能变低，因此，通过防抖的方法，控制setOption的频率来实现页面不卡顿，而实现平滑拖拽。

  1. const fun = (index) => {
  2.     // 通用方法
  3.     if (dataChart[index] && myChart.convertFromPixel('grid', [dx.offsetX, dx.offsetY])) {
  4.       const value = myChart.convertFromPixel('grid', [dx.offsetX, dx.offsetY])[1].toFixed(2);
  5.       if (max) {
  6.         dataChart[index][1] = max < value ? max : value;
  7.       } else {
  8.         dataChart[index][1] = value;
  9.       }
  10.     }
  11.     clearTimeout(clock);
  12.     clock = setTimeout(() => {
  13.       myChart.setOption({
  14.         series: [
  15.           {
  16.             id,
  17.             type: 'line',
  18.             data: dataChart,
  19.           },
  20.         ],
  21.       });
  22.     }, 0);
  23.   };

总结

主要由于Echarts提供的例子在点数少的时候，卡顿不会明显，但由于系统大部分采用一天96点展示的方法，导致一个折线图会展示大部分节点，对浏览器GUI线程造成较大压力，所以通过防抖的方法，可以很好的解决以上办法。

封装方法

  1. /*
  2.  * @File: src/
  3.  * @Author: hunter
  4.  * @Date: 2020-09-10 09:31:10
  5.  * @LastEditors: hunter
  6.  * @LastEditTime: 2020-09-16 20:59:25
  7.  */
  9. import { getMetaPointList } from '@/utils/getMetaPointList';
  10. import echarts from 'echarts';
  11. import moment, { Moment } from 'moment';
  13. const tvMeta = {
  14.   startDateTime: '2020-01-01 00:00:00',
  15.   delta: 15,
  16.   deltaUnit: 1,
  17.   size: 96,
  18. };
  19. const dateArr = getMetaPointList(tvMeta)?.map((p: Moment) => p.format('HH:mm'));
  20. let preIndex;
  21. let preSeconds = moment().millisecond();
  22. let clock;
  24. // 拖拽图表
  25. // 拖拽
  26. const updatePosition = ({ myChart, dataChart }: any) => {
  27.   myChart &&
  28.     myChart.setOption({
  29.       graphic: echarts.util.map(dataChart, function (item) {
  30.         return {
  31.           position: myChart.convertToPixel('grid', item),
  32.         };
  33.       }),
  34.     });
  35. };
  37. const onPointDragging = ({ myChart, dataChart, dx, id, max }) => {
  38.   const fun = (index) => {
  39.     // 通用方法
  40.     if (dataChart[index] && myChart.convertFromPixel('grid', [dx.offsetX, dx.offsetY])) {
  41.       const value = myChart.convertFromPixel('grid', [dx.offsetX, dx.offsetY])[1].toFixed(2);
  42.       if (max) {
  43.         dataChart[index][1] = max < value ? max : value;
  44.       } else {
  45.         dataChart[index][1] = value;
  46.       }
  47.     }
  48.     clearTimeout(clock);
  49.     clock = setTimeout(() => {
  50.       myChart.setOption({
  51.         series: [
  52.           {
  53.             id,
  54.             type: 'line',
  55.             data: dataChart,
  56.           },
  57.         ],
  58.       });
  59.     }, 0);
  60.   };
  62.   const index = myChart.convertFromPixel('grid', [dx.offsetX, dx.offsetY])[0];
  63.   if (preIndex) {
  64.     // 快速划过时，存在点丢失的情况
  65.     if (Math.abs(preIndex - index) > 1 && moment().millisecond() - preSeconds < 100) {
  66.       const max = preIndex - index > 0 ? preIndex : index;
  67.       const min = preIndex - index < 0 ? preIndex : index;
  68.       for (let i = min; i < max + 1; i++) {
  69.         fun(i);
  70.       }
  71.       preIndex = index;
  72.       preSeconds = moment().millisecond();
  73.       return;
  74.     }
  75.   }
  76.   preSeconds = moment().millisecond();
  77.   preIndex = index;
  79.   if (dataChart.length > index && index >= 0) {
  80.     // 普通的重定位
  81.     fun(index);
  82.   }
  83. };
  85. // echart
  86. export const echartsAnimate = ({ myChart, saveData, id, max }: any) => {
  87.   let dataChart;
  88.   myChart &&
  89.     myChart.getOption().series.map((item) => {
  90.       if (item.id === id) {
  91.         dataChart = item.data.map((item, index) => {
  92.           return [dateArr[index], item];
  93.         });
  94.       }
  95.     });
  97.   setTimeout(() => {
  98.     myChart &&
  99.       myChart.setOption({
  100.         graphic: echarts.util.map(dataChart, function (item, dataIndex) {
  101.           return {
  102.             type: 'circle',
  103.             position: myChart.convertToPixel('grid', item),
  104.             shape: {
  105.               cx: 0,
  106.               cy: 0,
  107.               r: 16,
  108.             },
  109.             invisible: true, // 调试设置为false
  110.             draggable: true,
  111.             ondrag: echarts.util.curry((dataIndex, dx) => {
  112.               onPointDragging({ myChart, dataChart, dx, id, max });
  113.             }, dataIndex),
  114.             ondragend: echarts.util.curry((dataIndex, dx) => {
  115.               preIndex = undefined;
  116.               saveData(dataChart);
  117.             }, dataIndex),
  118.             z: 100,
  119.           };
  120.         }),
  121.       });
  122.   }, 0);
  124.   window.addEventListener('resize', updatePosition);
  125.   myChart.on('dataZoom', () => {
  126.     updatePosition({ myChart, dataChart });
  127.   });
  128. };

使用例子

  1. <ReactEcharts
  2.           style={{
  3.             height: '400px',
  4.             border: '1px solid rgb(204 204 204 / 0.5)',
  5.             paddingTop: '10px',
  6.             borderRadius: '6px',
  7.           }}
  8.           option={getConfig()}
  9.           ref={(e) => {
  10.             // 拖拽图表的核心
  11.             if (e) {
  12.               const myChart = e.getEchartsInstance();
  13.               echartsAnimate({ myChart, saveData, id: 'test' });
  14.             }
  15.           }}
  16.         />