Version 3 allows for direct use of the echarts functions and events, with the ability to override event functions like const updateAxisPointer = function(event)... However, I am struggling to implement this in version 4. You can find more information about version 4 [here][1]. I attempted to utilize the delegateMethod function, but it resulted in an error stating that this.chart [methodName] is not a function.
const updateAxisPointer = function(event) {
console.log('event', event);
};
this.$refs.eChart.delegateGet('updateAxisPointer', updateAxisPointer);
Below is how the code appears in version 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>