Как использовать функцию updateAxisPointer в vue -echarts-v4.1? - PullRequest
0 голосов
/ 28 апреля 2020

В версии 3 вы можете напрямую использовать функцию и событие самого echarts, переопределяя функцию для события, как написано const updateAxisPointer = function (event) ... Я не могу понять, как это сделать в версии 4. Вот [ссылка] [1] на версию 4. Я пытался работать с функцией DelegateMethod, но он отображает ошибку this.chart [methodName] не является функцией.

const updateAxisPointer = function(event) {
          console.log('event', event);
};
this.$refs.eChart.delegateGet('updateAxisPointer', updateAxisPointer);

Здесь как выглядит код для версии 3

  <div class="echarts">
    <IEcharts :option="option" @ready="onReady" />
  </div>
</template>

<script>
import IEcharts from 'vue-echarts-v3/src/full.js';

export default {
  name: 'View',
  components: {
    IEcharts,
  },
  data() {
    // const that = this
    return {
      ins: null,
      echarts: null,
      option: {
        legend: {
          orient: 'vertical',
          top: 40,
          left: 60,
        },
        tooltip: {
          trigger: 'axis',
          showContent: false,
        },
        dataset: {
          source: [],
        },  
        yAxis: {
          type: 'value',
          name: '',
          nameLocation: 'middle',
          nameGap: 40,       
        },
        grid: {
          left: 40,
          right: 37,
          bottom: 45,
          top: '50%',
          containLabel: true,
        },
        series: [],
      }
    };
  },
  methods: {
    onReady(instance, echarts) {
      const that = this;
      that.ins = instance;
      that.echarts = echarts;

      const updateAxisPointer = function(event) {
        let xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          let dimension = xAxisInfo.value + 1;
          that.ins.setOption({
            series: {
              id: 'pie',
              label: {
                formatter: '{b}: {@[' + dimension + ']} ({d}%)',
              },
              encode: {
                value: dimension,
                tooltip: dimension,
              },
            },
          });
        }
      };
      that.ins.on('updateAxisPointer', updateAxisPointer);
    },
  },
};
</script>```


  [1]: https://github.com/ecomfe/vue-echarts/blob/master/src/components/ECharts.vue
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...