getting error on echart zoom locationService is not defined

Hi, I am implementing a simple Business chart panel ( line chart) with the code that is already provided in the plugin editor. Zoom works as expected however it throws the following error in console:

VM73:36 Uncaught ReferenceError: locationService is not defined at t.eval (eval at <anonymous> (module.js?_cache=6.1.0:1:1), <anonymous>:36:3) at e.trigger (EchartsPanel.styles.ts:7:15) at t.eval (EchartsPanel.styles.ts:7:15) at e.trigger (EchartsPanel.styles.ts:7:15) at t.Px (EchartsPanel.styles.ts:7:15) at t.dispatchAction (EchartsPanel.styles.ts:7:15) at t._dispatchZoomAction (EchartsPanel.styles.ts:7:15) at t._onBrush (EchartsPanel.styles.ts:7:15) at e.trigger (EchartsPanel.styles.ts:7:15) at lq (EchartsPanel.styles.ts:7:15)

Similarly when adding subscriber to data-hover event and hover over the data, nothing is printed on the console. Below is the code, that combines code provided by default with the following tutorial https://volkovlabs.io/plugins/volkovlabs-echarts-panel/eventbus/ :


  const sData = s.fields.find((f) => f.type === 'number').values.buffer || s.fields.find((f) => f.type === 'number').values;
  const sTime = s.fields.find((f) => f.type === 'time').values.buffer || s.fields.find((f) => f.type === 'time').values;

  return {
    name: s.refId,
    type: 'line',
    showSymbol: false,
    areaStyle: {
      opacity: 0.1,
    },
    lineStyle: {
      width: 1,
    },
    data: sData.map((d, i) => [sTime[i], d.toFixed(2)]),
  };
});

/**
 * Enable Data Zoom by default
 */
setTimeout(() => context.panel.chart.dispatchAction({
  type: 'takeGlobalCursor',
  key: 'dataZoomSelect',
  dataZoomSelectActive: true,
}), 500);

/**
 * Update Time Range on Zoom
 */
context.panel.chart.on('datazoom', function (params) {
  const startValue = params.batch[0]?.startValue;
  const endValue = params.batch[0]?.endValue;
  locationService.partial({ from: startValue, to: endValue });
});

const subscription = context.grafana.eventBus.subscribe({ type: 'data-hover' }, () => {
  console.log('React to Data Hover')
})

return {
  version: 2,
  config: { notMerge: true },
  option: {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      left: '0',
      bottom: '0',
      data: context.panel.data.series.map((s) => s.refId),
      textStyle: {
        color: 'rgba(128, 128, 128, .9)',
      },
    },
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: 'none',
          icon: {
            zoom: 'path://',
            back: 'path://',
          },
        },
        saveAsImage: {},
      }
    },
    xAxis: {
      type: 'time',
    },
    yAxis: {
      type: 'value',
      min: 'dataMin',
    },
    grid: {
      left: '2%',
      right: '2%',
      top: '2%',
      bottom: 24,
      containLabel: true,
    },
    series,
  },
  unsubscribe: () => {
    subscription.unsubscribe();
    console.log('Unsubscribed');
  }
}; ```

VolkovLabs / business-charts

getting error on echart zoom locationService is not defined #305