javascript - 触摸 datazoom 的滑块时出现 eCharts 错误

Question

我正在努力寻找解决此错误的方法。我正在显示一个带有 N(<=7) Yaxis 和数据缩放的图表。大多数时候工作正常： 工作成功 但是当我触摸滑块时，它显示错误

Uncaught TypeError: Cannot read property 'type' of undefined

    at Object.reset (dataSample.js?fdde:111)
    at Task.seriesTaskReset [as _reset] (Scheduler.js?7c13:485)
    at Task._doReset (task.js?9fbc:202)
    at Task.perform (task.js?9fbc:117)
    at eval (Scheduler.js?7c13:272)
    at HashMap.each (util.js?6d8b:448)
    at eval (Scheduler.js?7c13:255)
    at Array.forEach (<anonymous>)
    at each (util.js?6d8b:206)
    at Scheduler._performStageTasks (Scheduler.js?7c13:221)

如果我运行两次旁边的功能，则不会出现此错误

    const initChart = (data) => {
  console.log('start init')
  let dateList = data.dateList;
  let dataList = data.dataList;
  let indexIdtoName = store.getters["chart/indexIdtoName"];

  let legendList = [];
  let seriesData = [];

  for (let item in dataList) {
    for (let itemj in dataList[item]) {
      legendList.push(item + indexIdtoName[itemj]);

      let now = dataList[item];
      let head = now[itemj][0];
      let maxdata = Math.max(...now[itemj]);
      let newData = now[itemj].map((item) => {
        return {
          value: item / maxdata,
          price: item,
          type: itemj,
          incRate: (item / head - 1) * 100,
        };
      });

      seriesData.push({
        name: item + indexIdtoName[itemj],
        data: newData,

        type: "line",
      });
    }
  }
  let option={}

  //item.chart.clear();
  option = {
    xAxis: {
      type: "category",
      data: dateList,
    },
    yAxis: {
      type: "value",
    },
    toolbox: {
      // feature 各工具配置项: dataZoom 数据区域缩放;restore 配置项还原;saveAsImage下载为图片;
      feature: {
        dataZoom: {
         // yAxisIndex: "none", // y轴不缩放，Index默认为0
        },
        saveAsImage: {},
      },
    },
   dataZoom: [{
      type: 'slider',
      show: true,
      height: 20,
      left: '10%',
      right: '10%',
      bottom: '2%',
      realtime:true,
      start: 0,
      end: 100,
      textStyle: {
        color: '#d4ffff',
        fontSize: 11
      }
    }, {
      type: 'inside'
    }],
    legend: {
      data: legendList,
    },
    series: seriesData,
    title: {
      text: "房价走势",
      textStyle: {
        fontStyle: "normal",
        color: "black",
        fontWeight: "bolder",
        fontSize: 32,
      },
      textAlign: "auto",
    },
    tooltip: {
      trigger: "item",
      formatter: function (a, b) {
        return `<span style="color:white">${a.seriesName} <br/> ${
          a.name
        }：${a.data.price}${toolTipText(
          a.data.type
        )} <br/> <span style="color:#ff0000">涨幅：${a.data.incRate.toFixed(
          2
        )}%</span></span> `;
      },
    },
  };

  item.chart.setOption(option);
};

标签： javascriptvuejs3web-frontendecharts