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配置项，希望官方大佬给个解决思路
主要是鼠标触发提示框导致的，可设置tooltip: { triggerOn: 'click' }
确实存在这个问题
这个问题困扰了我很久，今天刚刚解决。
如果是用的 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 < 240) return; this.lastMoveTime = currMoveTime; } ... }如果是用的别的控件，照样改造一下应该会有效果
话说本来就应该限制一下输入以便提升性能。
设置tooltip{ animation: false, }
我是这样设置就好了