svg标签
supplementChart() {
let that = this;
this.myChart.getZr().off('mousedown');
this.myChart.getZr().off('mouseup');
let downOffsetX = 0,
mv = m_params => {
if (that.isMove == 0) return;
if (m_params.offsetX - downOffsetX > 0) {
that.svgw = m_params.offsetX - downOffsetX;
} else {
that.svgw = downOffsetX - m_params.offsetX;
that.svgStyle.left = m_params.offsetX + 'rem';
}
},
X1 = 0,
X2 = 0,
startTime = this.options.series[0].data[0][0],
endTime = this.options.series[0].data[this.options.series[0].data.length - 1][0],
getIndex = (x1, x2) => {
// java接口返回的开始时间与结束时间在数组第一项和最后一项取值，步进 5000 ms
let startIndex = -1,
endIndex = -1;
// 反向拖动处理
if (x1 > x2) {
[x1, x2] = [x2, x1];
}
let L = that.options.series[0].data.length - 1;
let step = this.options.series[0].data[1][0] - this.options.series[0].data[0][0]; // 步进 默认5000ms
for (let i = 0; i < L; i++) {
if (Math.abs(startTime - parseInt(x1 / 1000) * 1000) < step) {
startIndex = i;
}
if (Math.abs(endTime - parseInt(x2 / 1000) * 1000) < step) {
endIndex = L - i;
}
if (startIndex != -1 && endIndex != -1) {
break;
}
startTime += step;
endTime -= step;
}
if (startIndex != -1 && endIndex != -1) {
return [startIndex, endIndex, step];
} else {
return [0, 0, step];
}
};
this.myChart.getZr().on('mousedown', function(params) {
if (that.myChart.containPixel({ seriesIndex: [0, 1] }, [params.offsetX, params.offsetY])) {
//判断点击的点是否在坐标系内
that.isPutValue = false;
// 表示拖动开始
that.isMove = 1;
// 根据改变的offsetX改变svg的left样式
that.svgStyle.left = params.offsetX + 'rem';
// 局部保存变量，用于mv事件方法里调用（处理为了off指定的mousemove事件函数）
downOffsetX = params.offsetX;
that.myChart.getZr().on('mousemove', mv);
// 关闭触发tooltip显示的triggerOn（拖动卡顿的主要原因）
that.myChart.setOption({
tooltip: {
triggerOn: 'none',
show: false
}
});
// 获取拖动开始时像素坐标转逻辑x轴坐标
X1 = that.myChart.convertFromPixel({ seriesIndex: [0, 1] }, [params.offsetX, params.offsetY])[0];
}
});
this.myChart.getZr().on('mouseup', function(params) {
// 清除指定事件函数 防止完全清除导致tooltip功能丢失
that.myChart.getZr().off('mousemove', mv);
let opt = {
tooltip: {
triggerOn: 'mousemove',
show: true
}
};
if (X1 != 0) {
// 判断默认开始是否在x轴范围内
console.log(1);
// 获取拖动结束时像素坐标转逻辑x轴坐标
X2 = that.myChart.convertFromPixel({ seriesIndex: [0, 1] }, [params.offsetX, params.offsetY])[0];
if (that.myChart.containPixel({ seriesIndex: [0, 1] }, [params.offsetX, params.offsetY])) {
X2 = that.myChart.convertFromPixel({ seriesIndex: [0, 1] }, [params.offsetX, params.offsetY])[0];
} else if (X2 > endTime) {
X2 = endTime;
} else if (X2 < startTime) {
X2 = startTime;
}
if (X2 <= endTime && Math.abs(X1 - X2) > 60 * 2 * 1000) {
console.log(2);
// 判断默认结束是否在x轴范围内 并且相差大于120秒处理
let [i1, i2, step] = getIndex(X1, X2);
console.log(i1, i2, step);
if (step <= 5000) {
that.options.series[0].data = that.options.series[0].data.slice(i1, i2 + 1);
that.options.series[1].data = that.options.series[1].data.slice(i1, i2 + 1);
opt.series = that.options.series;
startTime = that.options.series[0].data[0][0];
endTime = that.options.series[0].data[that.options.series[0].data.length - 1][0];
// 复原tooltip配置，更新视图
} else {
if (X1 > X2) {
[X1, X2] = [X2, X1];
}
that.firstData(X1, X2);
}
}
}
// 表示拖动结束
that.isMove = 0;
// svg样式复原
that.svgStyle.left = 0;
that.svgw = 0;
that.myChart.setOption(opt);
X1 = 0;
X2 = 0;
});
},
2、处理大量数据时页面卡顿情况echarts属性优化
series中添加一下属性，其中最主要的属性是showSymbol，是否显示拐点，对大数据时卡顿影响很大
series:[
{
type: 'line'
sampling: 'lttb',
showSymbol: false,
}
]
