1.拐点拖拽 ,只有点击拐点才可以拖拽， 并且限制了只能在当前X轴进行拖拽
// chart
myChart(){
const that = this
let symbolSize = 20;
let data = new Array();
let dataReal = new Array();
//this.real
let list = this.plan;
let realList = this.real;
for (var k = 0; k < 96; k++) {
var itemdata = new Array();
itemdata.push(k * 1);
itemdata.push(list[k]);
data.push(itemdata);
}
for (var k = 0; k < 96; k++) {
var itemdata = new Array();
itemdata.push(k * 1);
itemdata.push(realList[k]);
dataReal.push(itemdata);
}
let myChart = echarts.init(document.getElementById('chart'));
// 定义折线路径颜色
let color = 'rgba(135, 206, 250, 0.7)';
myChart.setOption({
legend:{
data: ['实际','预测'],
top: 'top',
center: 'center'
},
grid: {
left: '10%',
right: '10%',
top: '20%',
bottom: '20%',
},
// tooltip: {
// formatter: function(params) {
// return params.seriesName+': ' + params.data[1].toFixed(3) + '<br>时间' + ': '+ params.name;
// }
// },
xAxis: {
type: 'category',
splitNumber: 96, // 设置轴线的刻度数量
data: ['00:15', '00:30', '00:45', '01:00', '01:15', '01:30', '01:45', '02:00', '02:15', '02:30', '02:45',
'03:00', '03:15', '03:30', '03:45', '04:00', '04:15', '04:30', '04:45', '05:00', '05:15', '05:30', '05:45',
'06:00', '06:15', '06:30', '06:45', '07:00', '07:15', '07:30', '07:45', '08:00', '08:15', '08:30', '08:45',
'09:00', '09:15', '09:30', '09:45', '10:00', '10:15', '10:30', '10:45', '11:00', '11:15', '11:30', '11:45',
'12:00', '12:15', '12:30', '12:45', '13:00', '13:15', '13:30', '13:45', '14:00', '14:15', '14:30', '14:45',
'15:00', '15:15', '15:30', '15:45', '16:00', '16:15', '16:30', '16:45', '17:00', '17:15', '17:30', '17:45',
'18:00', '18:15', '18:30', '18:45', '19:00', '19:15', '19:30', '19:45', '20:00', '20:15','20:30','20:45',
'21:00','21:15','21:30','21:45','22:00','22:15','22:30','22:45','23:00','23:15','23:30','23:45','24:00'],
},
yAxis: {
name : 'MW',
minInterval : 1,
type: 'value',
axisLine: {
onZero: false
}
},
series: [
{
name:'预测',
id: 'a',
type: 'line',
data: data,
markPoint: {
data: [],
symbol: true,
symbolSize: symbolSize,
draggable: true,
},
tooltip: {
show: false // 禁用 pictorialBar 系列的 tooltip
},
},
{
name:'实际',
id: 'b',
type: 'line',
data: dataReal,
markPoint: {
data: [],
symbol: true,
symbolSize: symbolSize,
draggable: true,
},
tooltip: {
show: false // 禁用 pictorialBar 系列的 tooltip
},
},
]
});
setTimeout(function() {
myChart.setOption({
graphic: echarts.util.map(data, function(item, dataIndex) {
return {
type: 'circle',
position: myChart.convertToPixel('grid', item),
shape: {
r: symbolSize / 2
},
invisible: true,
draggable: true,
ondrag: echarts.util.curry(onPointDragging, dataIndex),
// onm ousemove: echarts.util.curry(showTooltip, dataIndex),
// onm ouseout: echarts.util.curry(hideTooltip, dataIndex),
z: 100
};
})
});
}, 0);
window.addEventListener('resize', updatePosition);
myChart.on('dataZoom', updatePosition);
function updatePosition() {
myChart.setOption({
graphic: echarts.util.map(data, function(item, dataIndex) {
return {
position: myChart.convertToPixel({ seriesIndex: 0 }, [dataIndex, item])
};
})
});
}
function onPointDragging(dataIndex, dx, dy) {
// console.log(this.position);
//让X轴保持不变
var x = data[dataIndex][0]; //去掉这个相关的就是X,Y都变了
data[dataIndex] = myChart.convertFromPixel('grid', this.position);
data[dataIndex][0] = x;
myChart.setOption({
series: [{
id: 'a',
data: data
}]
});
let list = []
data.forEach(item=>{
list.push(item[1])
})
that.planData = data[dataIndex][1].toFixed(3) + 'MW'
that.planDate = that.timeData[dataIndex]
that.realData = that.real[dataIndex].toFixed(3) + 'MW'
that.realDate = that.timeData[dataIndex]
setTimeout(()=>{
that.changeData = list
},200)
}
myChart.getZr().on('click', (params)=> {
const pointInPixel = [params.offsetX, params.offsetY];
// 使用 convertFromPixel 方法转换像素坐标值到逻辑坐标系上的点
let pointInGrid = myChart.convertFromPixel({seriesIndex: 0}, pointInPixel);
let pointInGrid2 = myChart.convertFromPixel({seriesIndex: 1}, pointInPixel);
// X 轴数据的索引值
let xIndex = pointInGrid[0];
// Y 轴坐标点数值
let yIndex = pointInGrid2[1];
// 使用 getOption() 获取图表的 option
let myOption = myChart.getOption();
// 获取点击位置的 x 轴对应坐标的名称和 y 轴对应的数据
let xAxisData = myOption.xAxis[0].data[xIndex];
let seriesData = myOption.series[0].data[xIndex];
let seriesRealData = myOption.series[1].data[xIndex];
this.planData = seriesData[1].toFixed(3) + 'MW'
this.realData = seriesRealData[1].toFixed(3) + 'MW'
this.planDate = xAxisData
this.realDate = xAxisData
})
}2.点击定位，鼠标点击echarts的画布内，自动会将当前鼠标悬停的X轴内的拐点定位到鼠标悬停的位置，实现效果形成一个鼠标直接点击后移动直接绘制的效果。
// 点击定位
chart() {
this.myChart = echarts.init(document.getElementById('chart'))
let yValue
let yValue2
let dragFlag = false
document.onmousedown = function(ev) {
dragFlag = true
}
document.onmouseup = function(ev) {
dragFlag = false
}
this.chartOption = {
title: {
show: true,
text: '',
left: 'center',
top: 10
},
legend: {
data: ['预测']
},
tooltip: {
trigger: 'axis',
showContent: true,
axisPointer: {
type: 'cross',
axis: 'x',
label: {
backgroundColor: '#283b56',
formatter: function(params) {
let html = ''
if (params.axisDimension === 'y' && params.seriesData.length < 2) {
yValue = params.value
let temp = parseFloat(yValue).toFixed(3)
return temp
}
if (params.axisDimension === 'x' && params.seriesData.length < 2) {
let value = params.seriesData[0].value
let temp = parseFloat(value).toFixed(3)
return '预测曲线:' + temp + '\n时间:' + params.value
} else {
let plan
let otherLineStr = ''
for (let i = 1; i < params.seriesData.length; i++) {
plan = parseFloat(params.seriesData[0].data).toFixed(3)
let temp = parseFloat(params.seriesData[i].data).toFixed(3)
otherLineStr += ('\n' + '对比曲线' + (i) + ':' + temp)
}
return '预测曲线:' + plan + '\n时间:' + params.value + otherLineStr
}
}
}
},
formatter: function(params) {
if (dragFlag) {
dragRefresh(params[0].dataIndex, yValue)
}
}
},
color: this.colors[0],
grid: {
left: '3%',
top: '17%',
right: '3%',
bottom: '24%'
},
xAxis: {
data: this.xDataTime,
splitLine: {
show: false,
interval: 0
}
},
yAxis: {
type: 'value',
z: 2,
name: '出力(MW)',
max: this.yDataMax,
min: 0,
nameGap: 35,
splitLine: {
lineStyle: {
color: '#DBDBDB',
type: 'dashed'
}
},
axisLine: {
show: true
},
axisTick: {
show: false
}
},
series: [
{
id: 'aaa',
name: '预测',
data: this.changePlan,
type: 'line',
smooth: true,
symbolSize: 2,
z: 3,
width: 3,
itemStyle: {
color: this.colors[0],
emphasis: {
radius: '30%' // 放大半径，控制为30%即可
}
}
}
]
}
/**
* 图形刷新
* @param index 预测数据索引
* @param value 预测数据数值
*/
const dragRefresh = (index, value) => {
if (value) {
this.changePlan[index] = Number(value).toFixed(3)
refresh()
}
}
/**
* 图形刷新
*/
const refresh = () => {
setTimeout(() => {
this.myChart.setOption({
series: [{
id: 'aaa',
data: this.changePlan,
itemStyle: {
color: this.colors[0]
}
}
]
})
})
}
this.chartOption && this.myChart.setOption(this.chartOption, true)
window.addEventListener('resize', () => {
this.myChart.resize()
})
}3. 整体平移，折现图保持当前的插值与X轴坐标，整体上下平移，范围是根据点击拐点后Y轴移动的大小，实现效果点击折线任意一点，保持当前的折现同时上下平移
chart() {
let that = this
let yValue
let yValue2
let rawSeries = this.chartOption.series
this.myChart.dispose()
// const plan = [20, 21, 20, 23, 26, 25, 26, 25, 28, 29, 30, 29, 28, 27, 26, 25, 24, 23, 23, 21, 20, 21, 22, 23];
this.myChart = echarts.init(document.getElementById('chart'))
this.chartOption = {
legend: {
data: ['预测']
},
// animation:false,
grid: {
left: '3%',
top: '17%',
right: '3%',
bottom: '20%'
},
tooltip: {
trigger: 'axis',
showContent: true,
axisPointer: {
type: 'cross',
axis: 'x',
label: {
backgroundColor: '#283b56'
}
}
},
xAxis: {
type: 'category',
data: this.xDataTime
},
yAxis: {
type: 'value',
name: '出力(MW)',
max: this.yDataMax,
min: 0,
nameGap: 35,
splitLine: {
lineStyle: {
color: '#DBDBDB',
type: 'dashed'
}
},
axisLine: {
show: true
},
axisTick: {
show: false
}
},
series: null
}
this.chartOption.series = rawSeries
this.myChart.setOption(this.chartOption, true)
// 拖拽
setTimeout(function() {
that.myChart.setOption({
graphic: echarts.util.map(that.changePlan, function(item, dataIndex) {
let position = that.myChart.convertToPixel({ seriesIndex: 0 }, [dataIndex, item])
return {
id: dataIndex,
type: 'circle',
position: position,
shape: {
r: 5
},
invisible: true,
draggable: true,
ondrag: echarts.util.curry(onPointDragging, dataIndex),
onm ousemove: echarts.util.curry(showTooltip, dataIndex),
onm ouseout: echarts.util.curry(hideTooltip, dataIndex),
ondragend: echarts.util.curry(onPointDragEnd, dataIndex),
z: 100
}
})
})
}, 0)
window.addEventListener('resize', updatePosition)
that.myChart.on('dataZoom', updatePosition)
function updatePosition() {
that.myChart.setOption({
graphic: echarts.util.map(that.changePlan, function(item, dataIndex) {
return {
position: that.myChart.convertToPixel({ seriesIndex: 0 }, [dataIndex, item])
}
})
})
}
function showTooltip(dataIndex) {
that.myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: dataIndex
})
}
function hideTooltip(dataIndex) {
that.myChart.dispatchAction({
type: 'hideTip'
})
}
function onPointDragging(dataIndex, dx, dy) {
let math = Number(that.changePlan[dataIndex] - that.myChart.convertFromPixel({ seriesIndex: 0 }, this.position)[1]).toFixed(3)
for (let i = 0; i < that.changePlan.length; i++) {
if (math < 0) {
that.changePlan[i] = (Number(that.changePlan[i]) + Math.abs(Number(math))) >= that.yDataMax ? that.yDataMax : Number(that.changePlan[i]) + Math.abs(Number(math))
} else {
that.changePlan[i] = (Number(that.changePlan[i]) - math) <= 0 ? 0 : Number(that.changePlan[i]) - math
}
}
that.myChart.setOption({
series: [{
id: 'aaa',
data: that.changePlan.map(item => {
return Number(item).toFixed(3)
})
}]
})
}
function onPointDragEnd(dataIndex, dx, dy) {
that.myChart.setOption({
graphic: echarts.util.map(that.changePlan, function(item, dataIndex) {
return {
id: dataIndex,
position: that.myChart.convertToPixel({ seriesIndex: 0 }, [dataIndex, item])
}
})
})
}
window.addEventListener('resize', () => {
this.myChart.resize()
})
}根据需求也可以将功能整合在一起，点击拖拽效果图：
保持折现平移后的效果图：
