收藏
回答

小程序中运用到echarts图表,在echarts图标上进行拖动上划有时echarts图表隐藏掉?

var option = {

color: ['#019c37'],

calculable: false,

series: [{

name: '今日',

type: 'line',

stack: '总量',

data: newData,

smooth: true,

},

{

name: '昨日',

type: 'line',

data: oldData,

symbolSize: 0, // symbol的大小设置为0

showSymbol: false, // 不显示symbol

lineStyle: {

width: 0, // 线宽是0

color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的

},

},

{

name: '增量',

type: 'line',

data: poorData,

symbolSize: 0, // symbol的大小设置为0

showSymbol: false, // 不显示symbol

lineStyle: {

width: 0, // 线宽是0

color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的

},

}

],

tooltip: {

trigger: 'axis',

position: function (point, params, dom, rect, size) {

// 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下

// 提示框位置

var x = 0; // x坐标位置

var y = 0; // y坐标位置


// 当前鼠标位置

var pointX = point[0];

var pointY = point[1];


// 外层div大小

// var viewWidth = size.viewSize[0];

// var viewHeight = size.viewSize[1];


// 提示框大小

var boxWidth = size.contentSize[0];

var boxHeight = size.contentSize[1];


// boxWidth > pointX 说明鼠标左边放不下提示框

if (boxWidth > pointX) {

x = 5;

} else { // 左边放的下

x = pointX - boxWidth;

}


// boxHeight > pointY 说明鼠标上边放不下提示框

if (boxHeight > pointY) {

y = 5;

} else { // 上边放得下

y = pointY - boxHeight;

}


return [x, y];

},

formatter: function (param) {

// 利用循环更改显示的内容

let list = param

let txt = list[0].name + "\n"

txt += list[0].seriesName + ":" + list[0].value + "\n" + list[1].seriesName + ":" + list[1].value + "\n" + list[2].seriesName + ":" + list[2].value + "\n"

return txt

},

},

xAxis: {

type: 'category',

boundaryGap: false,

axisTick: {

show: false,

},

axisLine: {

show: false,

lineStyle: {

color: '#fff', // x坐标轴的轴线颜色

width: 0 //这里是坐标轴的宽度,为0就是不显示

},

},

axisLabel: {

color: '#676767',

fontSize: 12

},

data: TableData,

},

yAxis: {

type: 'value',

min: this.data.minData,

max: this.data.maxData,

interval: (this.data.maxData - this.data.minData) / 5,

axisLabel: {

color: '#676767',

fontSize: 10

},

axisTick: {

show: false

},

axisLine: {

lineStyle: {

color: '#FFf',

width: 0, //这里是为了突出显示加上的

}

}

}

};

这是option配置项,希望官方大佬给个解决思路

回答关注问题邀请回答
收藏

5 个回答

  • Adrastus
    Adrastus
    2020-05-11

    主要是鼠标触发提示框导致的,可设置tooltip: { triggerOn: 'click' }

    2020-05-11
    有用 2
    回复 1
    • 坚强一孤狼
      坚强一孤狼
      2023-06-07
      非常感谢!好人
      2023-06-07
      回复
  • TRUE
    TRUE
    2019-12-05

    确实存在这个问题

    2019-12-05
    有用 2
    回复 4
    • DL
      DL
      2019-12-05
      有好的解决办法没
      2019-12-05
      回复
    • TRUE
      TRUE
      2019-12-05回复DL
      目前还没有解决方法,等有时间再来研究看看吧
      2019-12-05
      回复
    • DL
      DL
      2019-12-05
      有偿解决
      2019-12-05
      回复
    • 谢均平
      谢均平
      2020-01-07
      我也出现了这个问题,超过20横坐标不消失,21 个时,或1个也不消失,有大佬能解决吗
      2020-01-07
      回复
  • 王琛
    王琛
    2020-01-16

    这个问题困扰了我很久,今天刚刚解决。

    如果是用的 mpvue-echarts ,那么设置 throttleTouch="true" 可以解决

    <mpvue-echarts v-if="isOnLoad" :echarts="echarts" :onInit="onInit" :canvasId="canvasId" throttleTouch="true" />
    

    mpve-echarts 里这个参数的作用,是限制 mouse-move 的输入频率

    touchMove(e) {
       ...
          if (throttleTouch) {
            const currMoveTime = Date.now();
            if (currMoveTime - lastMoveTime < 240return;
            this.lastMoveTime = currMoveTime;
          }
       ...
    }
    

    如果是用的别的控件,照样改造一下应该会有效果

    2020-01-16
    有用 1
    回复 4
    • 谢均平
      谢均平
      2020-02-22
      我的想法是,计算 touchmove 的发出响应的距离,就是,你在图表中移动可以,超出了屏幕就return 掉,这样不好就是适配很难做好标准
      2020-02-22
      回复
    • 谢均平
      谢均平
      2020-02-22
      超出了图表就return
      2020-02-22
      回复
    • 王琛
      王琛
      2020-02-25回复谢均平
      没去看过内部逻辑,设置了这个参数可以工作以后就没继续研究过。但怀疑是内部多线程刷新导致的数据异常,所以这个方法可以用。
      话说本来就应该限制一下输入以便提升性能。
      2020-02-25
      回复
    • sherlock成
      sherlock成
      2020-08-31
      感谢大佬,今天也遇到了这个问题
      2020-08-31
      回复
  • Carain
    Carain
    2020-02-22

    设置tooltip{ animation: false, }

    我是这样设置就好了

    2020-02-22
    有用
    回复 2
    • DL
      DL
      2020-02-22
      谢谢,我试一下哈
      2020-02-22
      回复
    • Paper Plane
      Paper Plane
      2020-03-27回复DL
      请问这个问题解决了吗?
      2020-03-27
      回复
  • DL
    DL
    2019-12-05

    ,当手指拖拽出这个区域后,echarts图表消失掉了

    2019-12-05
    有用
    回复 6
    • 一位啥也不会的前端打字员
      一位啥也不会的前端打字员
      2019-12-19
      确实有这个问题 lz解决掉了吗
      2019-12-19
      回复
    • DL
      DL
      2019-12-19回复一位啥也不会的前端打字员
      莫有,目前没有好的解决办法呢
      2019-12-19
      回复
    • Paper Plane
      Paper Plane
      2020-03-27回复DL
      请问现在这个问题解决了吗?
      2020-03-27
      回复
    • 逗丁
      逗丁
      2020-04-07
      同问
      2020-04-07
      回复
    • await
      await
      2020-05-28
      tooltip 设置为不是X轴触发的
      2020-05-28
      回复
    查看更多(1)
登录 后发表内容
问题标签