Platform & Project

Android, UniApp, echarts version 4.8.0 uses the official renderJs-Echarts-Demo project notation

Problem description & recurrence

The configuration of Echarts is as follows, which is actually quite simple

option:{
  tooltip: {
    trigger: 'axis'}}Copy the code

You can achieve the following effectThis effect works fine on the PC side, the mouse slides in, the axisPointer appears, and the mouse slides out of the line and disappears

But after the mobile configuration, a very strange phenomenon occurs

If you touch the chart, the indicator line appears normally, and if you touch the chart outside, the indicator line disappears normally. But if you touch the chart outside quickly, not only does the indicator line not disappear normally, but then you touch the chart outside and the indicator line doesn’t disappear normally until the next time you touch the chart

It’s not known what caused this (nothing to do with 300ms click delay on mobile)

To solve

The final solution is not elegant, but it is still working. Taking a page from the official project for option monitoring, bind a click method to the box that wraps the page and trigger the clickOutSide method. The echarts container code reads as follows (don’t forget to prevent events from bubbling)

<template>
  <view
    @click.stop='1'
    id='echarts-container' 
    :prop="option" 
    :someKey="key"
    :change:someKey="echarts.updateKey"
    :change:prop="echarts.updateEcharts"
  ></view>
</template>
Copy the code
export default {
  data() {
    reurn {
      key: 1}},methods: {
    clickOutSide() {
      if(this.key === 1) {
        this.key = 2
      }else {
      	this.key = 1}}}}Copy the code

This means that every time you click outside of echarts, you trigger the updateKey method in renderJS

let myChart
export default {
  methods: {
    updateKey() {
      myChart.dispatchAction({
        type: 'updateAxisPointer'})}}}Copy the code

That’s all for this problem & fix. The ClickOutside part is a rough implementation and can be optimized at will not only for UniApp, but also for other places where axisPointer doesn’t disappear