echarts數據太多自動滾動和toollip自動播放

 

 效果圖----數據自動滾動和toollip自動播放

    /**
    * @allData: 待處理數組
    * @n: 返回元素個數
    * @index:
    */
    prev4Items (allData, n, index) {
      let startIndex = index;
      let length = allData.length;
      let newArr = [];
      if (startIndex < 0) {
        newArr = [ ...allData.slice(length + startIndex, length), ...allData.slice(0, n + startIndex) ];
        startIndex = length + startIndex - 1;
      } else if (startIndex >= 0 && startIndex <= length - n) {
        newArr = allData.slice(startIndex, startIndex + n);
        startIndex -= 1;
      } else if (startIndex > length - n) {
        newArr = [ ...allData.slice(startIndex, length), ...allData.slice(0, n - (length - startIndex)) ];
        startIndex -= 1;
      }
      return [ newArr, startIndex ];
    },

//echart初始化中寫柱狀圖數據滾動邏輯，和toolip自動播放

import loopShowTooltip from '../utils/echarts-tooltip-carousel.js';

 init () {
      const _this = this;
      this.myChart = this.$echarts.init(document.getElementById(_this.echartOpt.name));
      this.myChart.showLoading();
      this.myChart.setOption(this.echartOpt.option, true);
      this.myChart.hideLoading();
      if (this.echartOpt.name === 'departmentEff' && this.echartOpt.option.yAxis.data.length > 6) {
        loopShowTooltip(this.myChart, this.echartOpt.option, { loopSeries: true, interval: 3000 });
        let originalArr = [ ...this.echartOpt.option.series[0].data ];
        let originalYaxis = [ ...this.echartOpt.option.yAxis.data ];
        let indexLast = originalArr.length;
        let startIndex = 0;
        this.echartOpt.option.series[0].data = this.prev4Items(originalArr, 6, startIndex)[0];
        this.echartOpt.option.yAxis.data = this.prev4Items(originalYaxis, 6, startIndex)[0];
        this.echartOpt.option.dataZoom[0].show = false;
        // console.log('this.echartOpt.option.series[0].data--up', this.echartOpt.option.series[0].data);
        setInterval(() => {
          startIndex++;
          this.echartOpt.option.series[0].data = this.prev4Items(originalArr, 6, startIndex)[0];
          this.echartOpt.option.yAxis.data = this.prev4Items(originalYaxis, 6, startIndex)[0];
          if (startIndex === indexLast) {
            startIndex = 0;
          }
        }, 3000);
        // console.log('newOpthis.echartOpt.optiontions', this.echartOpt.option.series[0].data);
        this.myChart.setOption(this.echartOpt.option, true);
        // console.log('this.departmentEff---other', this.myChart, this.echartOpt, this.echartOpt.option);
      }

//

 loopShowTooltip(this.myChart, this.echartOpt.option, { loopSeries: true, interval: 3000 });-----以下js代碼為toolip自動播放方法

      echarts-tooltip-carousel.js'

/**
 * Created by chengwb on 2016/9/3.
 */

// (function (global) {
// global.tools = global.tools || {};

// tools.loopShowTooltip = function (chart, chartOption, options) {
const loopShowTooltip = function (chart, chartOption, options) {
  // console.log(chart, chartOption, options, '你好');
  let defaultOptions = {
    loopSeries: false,
    interval: 3000,
    seriesIndex: 0,
    updateData: null
  };

  if (!chart || !chartOption) {
    return;
  }

  let dataIndex = 0; // 數據索引，初始化為-1，是為了判斷是否是第一次執行
  let seriesIndex = 0; // 系列索引
  let timeTicket = 0;
  let seriesLen = chartOption.series.length; // 系列個數
  let dataLen = 0; // 某個系列數據個數
  let chartType; // 系列類型
  let first = true;
  let lastShowSeriesIndex = 0;
  let lastShowDataIndex = 0;
  if (seriesLen === 0) {
    return;
  }

  // 待處理列表
  // 不循環series時seriesIndex指定顯示tooltip的系列，不指定默認為0，指定多個則默認為第一個
  // 循環series時seriesIndex指定循環的series，不指定則從0開始循環所有series，指定單個則相當於不循環，指定多個
  // 要不要添加開始series索引和開始的data索引？

  if (options) {
    options.interval = options.interval || defaultOptions.interval;
    options.loopSeries = options.loopSeries || defaultOptions.loopSeries;
    options.seriesIndex = options.seriesIndex || defaultOptions.seriesIndex;
    options.updateData = options.updateData || defaultOptions.updateData;
  } else {
    options = defaultOptions;
  }

  // 如果設置的seriesIndex無效，則默認為0
  if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) {
    seriesIndex = 0;
  } else {
    seriesIndex = options.seriesIndex;
  }

  /**
   * 清除定時器
   */
  function clearLoop () {
    if (timeTicket) {
      clearInterval(timeTicket);
      timeTicket = 0;
    }
    chart.off('mousemove', stopAutoShow);
    zRender.off('mousemove', zRenderMouseMove);
    zRender.off('globalout', zRenderGlobalOut);
  }

  /**
   * 取消高亮
   */
  function cancelHighlight () {
    /**
     * 如果dataIndex為0表示上次系列完成顯示，如果是循環系列，且系列索引為0則上次是seriesLen-1，否則為seriesIndex-1；
     * 如果不是循環系列，則就是當前系列；
     * 如果dataIndex>0則就是當前系列。
     */
    let tempSeriesIndex =
      dataIndex === 0
        ? options.loopSeries
          ? seriesIndex === 0
            ? seriesLen - 1
            : seriesIndex - 1
          : seriesIndex
        : seriesIndex;
    let tempType = chartOption.series[tempSeriesIndex].type;

    if (tempType === 'pie' || tempType === 'radar') {
      chart.dispatchAction({
        type: 'downplay',
        seriesIndex: lastShowSeriesIndex,
        dataIndex: lastShowDataIndex
      }); // wait 系列序號為0且循環系列，則要判斷上次的系列類型是否是pie、radar
    }
  }

  /**
   * 自動輪播tooltip
   */
  function autoShowTip () {
    let invalidSeries = 0;
    let invalidData = 0;
    console.log(invalidSeries, invalidData);
    function showTip () {
      // 判斷是否更新數據
      if (
        dataIndex === 0 &&
        !first &&
        typeof options.updateData === 'function'
      ) {
        options.updateData();
        chart.setOption(chartOption);
      }

      let series = chartOption.series;
      let currSeries = series[seriesIndex];
      // console.log(currSeries, '哈哈哈哈哈');
      // console.log(Boolean(!series), Boolean(!currSeries), Boolean(!currSeries.type), Boolean(!currSeries.data), Boolean(!currSeries.data.length), series.length);
      // Boolean(!series);
      if (
        !series ||
        series.length === 0 ||
        !currSeries ||
        !currSeries.type ||
        !currSeries.data ||
        !currSeries.data.length
      ) {
        return;
      }
      chartType = currSeries.type; // 系列類型
      dataLen = currSeries.data.length; // 某個系列的數據個數

      let tipParams = { seriesIndex: seriesIndex };
      // console.log(tipParams.dataIndex, tipParams, chartType, 'tipParams.dataIndex');
      switch (chartType) {
        case 'pie':
        case 'map':
        case 'chord':
          tipParams.name = currSeries.data[dataIndex].name;
          break;
        case 'radar': // 雷達圖
          tipParams.seriesIndex = seriesIndex;
          tipParams.dataIndex = dataIndex;
          break;
        default:
          tipParams.dataIndex = dataIndex;
          break;
      }

      if (chartType === 'pie' || chartType === 'radar') {
        if (!first) {
          cancelHighlight();
        }
        // console.log(seriesIndex, dataIndex, 'n是誰');
        // 高亮當前圖形
        chart.dispatchAction({
          type: 'highlight',
          seriesIndex: seriesIndex,
          dataIndex: dataIndex
        });
      }

      // 顯示 tooltip
      tipParams.type = 'showTip';

      // 防止updateData時先處理tooltip后刷新數據導出tooltip顯示不正確
      setTimeout(() => {
        chart.dispatchAction(tipParams);
      }, 0);

      lastShowSeriesIndex = seriesIndex;
      lastShowDataIndex = dataIndex;
      dataIndex = (dataIndex + 1) % dataLen;
      if (options.loopSeries && dataIndex === 0) {
        // 數據索引歸0表示當前系列數據已經循環完
        invalidData = 0;
        seriesIndex = (seriesIndex + 1) % seriesLen;
        if (seriesIndex === options.seriesIndex) {
          invalidSeries = 0;
        }
      }
      // console.log(lastShowSeriesIndex, lastShowDataIndex, dataIndex, seriesIndex, options, 'seriesIndexseriesIndexseriesIndexseriesIndex');
      first = false;
    }

    showTip();
    timeTicket = setInterval(showTip, options.interval);
    // console.log(timeTicket, 'timeTickettimeTickettimeTickettimeTickettimeTicket~~~timeTicket');
  }

  // 關閉輪播
  function stopAutoShow () {
    if (timeTicket) {
      clearInterval(timeTicket);
      timeTicket = 0;

      if (chartType === 'pie' || chartType === 'radar') {
        cancelHighlight();
      }
    }
  }

  let zRender = chart.getZr();// getZr()事件獲取柱狀圖當前點擊列的數據

  function zRenderMouseMove (param) {
    if (param.event) {
      // 阻止canvas上的鼠標移動事件冒泡
      param.event.cancelBubble = true;
    }

    stopAutoShow();
  }

  // 離開echarts圖時恢復自動輪播
  function zRenderGlobalOut () {
    if (!timeTicket) {
      autoShowTip();
    }
  }

  // 鼠標在echarts圖上時停止輪播
  chart.on('mousemove', stopAutoShow);
  zRender.on('mousemove', zRenderMouseMove);
  zRender.on('globalout', zRenderGlobalOut);

  autoShowTip();

  return {
    clearLoop: clearLoop
  };
};
export default loopShowTooltip;
// })(window);