<template>
<div>
<div class="echart-box" id="echart-box"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
data() {
return {
myChart: null,
// 记录坐标点
lastPosition: null
}
},
mounted() {
this.getEchart()
this.setDrag()
},
computed: {
option() {
return {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
}
}
},
methods: {
getEchart() {
var chartDom = document.getElementById('echart-box');
this.myChart = echarts.init(chartDom);
this.option && this.myChart.setOption(this.option);
},
// 添加拖拽点
setDrag() {
// console.log("添加拖拽点", this.option.series[0].data)
this.myChart.setOption({
// 声明一个 graphic component，里面有若干个 type 为 'circle' 的 graphic elements。
// 这里使用了 echarts.util.map 这个帮助方法，其行为和 Array.prototype.map 一样，但是兼容 es5 以下的环境。
// 用 map 方法遍历 data 的每项，为每项生成一个圆点。
graphic: echarts.util.map(this.option.series[0].data, (dataItem, dataIndex) => {
let position = this.myChart.convertToPixel({gridIndex: 0}, [dataIndex, dataItem])
let tempObj = {
// 'circle' 表示这个 graphic element 的类型是圆点。
type: 'circle',
shape: {
// 圆点的半径。
r: 10
},
// 用 transform 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。
// 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置，下面介绍。
position: position,
// 这个属性让圆点不可见（但是不影响他响应鼠标事件）。
invisible: true,
// 这个属性让圆点可以被拖拽。
draggable: true,
// 把 z 值设得比较大，表示这个圆点在最上方，能覆盖住已有的折线图的圆点。
z: 100,
// 此圆点的拖拽的响应事件，在拖拽过程中会不断被触发。下面介绍详情。
// 这里使用了 echarts.util.curry 这个帮助方法，意思是生成一个与 onPointDragging功能一样的新的函数，只不过第一个参数永远为此时传入的 dataIndex 的值。
ondrag: echarts.util.curry(this.onPointDragging, dataIndex)
};
return tempObj
})
});
},
// 拖拽响应事件
onPointDragging(dataIndex, position) {
// newPosition 为圆点当前位置,x轴不改变固定dataIndex
let newPosition = [ dataIndex, position.offsetY ]
this.option.series[0].data[dataIndex] = this.myChart.convertFromPixel({gridIndex: 0}, newPosition)[1];
// console.log("拖拽", dataIndex, newPosition, this.option.series[0].data)
// 相邻点改变的比例
let propor = 0.5
// 要跟随改变的前后点的范围，1则为前后一个点跟随变化
let number = 1
let frontY = []
let behindY = []
let gridY = this.option.series[0].data[dataIndex]
let proporNumber = this.lastPosition? ( gridY - this.lastPosition ) * propor: null
for ( let i = 1; i <= number; i++) {
frontY[i] = this.option.series[0].data[dataIndex + i]
behindY[i] = this.option.series[0].data[dataIndex - i]
// 若当前移动像素点Y轴改变，前后点改变其指定比例的量
if( this.lastPosition != position.offsetY && this.lastPosition) {
frontY[i] = frontY[i] + proporNumber
behindY[i] = behindY[i] + proporNumber
}
// console.log("周围点坐标", frontY, behindY, gridY, this.lastPosition)
this.option.series[0].data[dataIndex + i] = frontY[i]
this.option.series[0].data[dataIndex - i] = behindY[i]
}
// 赋值记录上一个点的像素坐标
this.lastPosition = gridY
// 用更新后的 data，重绘折线图。
this.myChart.setOption({
series: [{
data: this.option.series[0].data
}]
});
// 重新添加拖拽点
this.setDrag()
//------------使用像素控制周围点的变化--------------------
// let frontYPixel = this.myChart.convertToPixel({gridIndex: 0}, [dataIndex + 1, this.option.series[0].data[dataIndex + 1]])
// let behindYPixel = this.myChart.convertToPixel({gridIndex: 0}, [dataIndex - 1, this.option.series[0].data[dataIndex - 1]])
// 前后一个点的原始Y轴像素点
// let frontY = frontYPixel[1]
// let behindY = behindYPixel[1]
// 若当前移动像素点Y轴改变，前后点改变其指定比例的量
// if( this.lastPosition != position.offsetY && this.lastPosition) {
// frontY = frontYPixel[1] + ( position.offsetY - this.lastPosition ) * propor
// behindY = behindYPixel[1] + ( position.offsetY - this.lastPosition ) * propor
// }
// console.log("周围点像素坐标", position.offsetY, frontYPixel[1], frontY)
// this.option.series[0].data[dataIndex + 1] = this.myChart.convertFromPixel({gridIndex: 0}, [frontYPixel[0], frontY])[1];
// this.option.series[0].data[dataIndex - 1] = this.myChart.convertFromPixel({gridIndex: 0}, [behindYPixel[0], behindY])[1];
}
}
}
</script>
<style>
.echart-box {
height: 400px;
width: 800px;
}
</style>
