U 整理提交

he wei

22 小时以前 011aab07af85ba820b9f96a02c249b7ba26c8d26

 src/components/echarts/line-scroll.vue

@@ -80,8 +80,9 @@
   function makeGrid(top, opt) {
      let res = echarts.util.merge({
         top: top + '%',
         height: gridHeight + '%',
         left: 60,
         height: gridHeight - 0.5 + '%',
      bottom: top + gridHeight - 0.5 + '%',
         left: 90,
         right: 14,
      }, opt || {}, true);
    return JSON.parse(JSON.stringify(res));
@@ -98,18 +99,26 @@
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            showSymbol: true,
        xAxisIndex: idx,
        yAxisIndex: idx,
        gridIndex: idx,
        seriesIndex: idx,
        // 禁用动画，确保立即渲染
        animation: false,
        // silent: true,
            lineStyle: {
               width: 1
            },
            data: datas[idx],
        tooltip: {
          show: true,
        },
            data: datas[idx].map(v => v + 3),
         });
      });

      return JSON.parse(JSON.stringify(res));
      // return JSON.parse(JSON.stringify(res));
    return res;
   }

  let lastXLabels = [];
@@ -121,8 +130,8 @@
      nextTick(() => {
        chart.value.setOption(getOptions(lastXLabels, lastDatas));
      });
    }
  )
    },
  );


   function getOptions(xLabels, datas) {
@@ -152,23 +161,29 @@
              color: '#fff'
            }
          },
      } : { show: false };
      } : { axisLine: { show: false }};
      xAxis.push(makeXAxis(i, xAxisOption));
      yAxis.push(makeYAxis(i, {
               name: props.yLabels.length ? props.yLabels[i].replace(/(#)/g, '$1\n').replace(/\n$/, '') : '',
            }));
        name: props.yLabels.length ? props.yLabels[i] : '',
      }));
    }

      const option = {
      animation: false,
      color: ['#1186ce', '#e5c619', '#1d1dfd', '#2dbfae'],
         tooltip: {
            trigger: 'axis',
        // 强制显示所有系列
        alwaysShowContent: true,
            axisPointer: {
          snap: true,
               lineStyle: {
                  color: '#fff'
               }
            },
        formatter: function (params) {
          // console.log('params:', params);
          // console.log('捕获的seriesIndex:', params.map(p => p.seriesIndex));
               if (params.length) {
            // params.unshift({ seriesName: 'time', value: params[0].name, color: '#5193f2' })
            let _label = '';
@@ -187,7 +202,7 @@
                  });
            res.push('<span style="color: #000">' + _label + '</span>');
            res = res.join('<br>');
            // console.log('res', res, '=============');
            // console.log('res', res, params, '=====tooltip========', series, datas, xLabels[xLabels.length - 1]);
            return res;
            
               }
@@ -206,12 +221,15 @@
         series
      };

    console.log('option', option, '=============');
    // console.log('option', option, '=======dcout======');
    
      return option;
   }

  let myChart = null;
  const startIndex = computed(() => {
    return Math.floor(props.startIdx);
  });

   function initChart() {
      if (chart.value) {
@@ -227,18 +245,25 @@
         let option = getOptions(xLabels, datas);
      // chart.value.setOption(option, {notMerge: true});
      chart.value.setOption(option);
      
      // tooltip Bug 重新渲染了一下 就没问题了
      if (props.startIdx == 0) {
        nextTick(() => {
          emit('scroll', 0.1);
        });
      }
      }
   }

  function scrollToTop() {
    if (props.startIdx > 0) {
    if (startIndex.value > 0) {
      emit('scroll', -1);      
    }
    
  }

  function scrollToBottom() {
    if (props.startIdx < props.modeCount - 4) {
    if (startIndex.value < props.modeCount - 4) {
      nextTick(() => {
        emit('scroll', 1);
      });
@@ -261,10 +286,10 @@
    <base-chart ref="chart" v-model:fullFlag="fullFlag" :key="startIdx">
      <template #tools v-if="modeCount > 4">
        <div class="t-contain">
          <div :class="['btn', 'btn-top', {disabled: startIdx == 0}]" @click="scrollToTop">
          <div :class="['btn', 'btn-top', {disabled: startIndex <= 0}]" @click="scrollToTop">
            <svg-icon icon-class="arrow-right" ></svg-icon>
          </div>
          <div :class="['btn', 'btn-bottom', {disabled: startIdx == modeCount - 4}]" @click="scrollToBottom">
          <div :class="['btn', 'btn-bottom', {disabled: startIndex == modeCount - 4}]" @click="scrollToBottom">
            <svg-icon icon-class="arrow-right" ></svg-icon>
          </div>
        </div>