本篇文档主要是利用echarts实现可拖动节点的折线图,在echarts中找到了一个演示,传送门:https://echarts.baidu.com/examples/editor.html& # 63; c=line-draggable,但是不是用vue写的,并且在改写为vue组件的过程中遇到了很多问题,在百度过程中发现并没有相关的文档,所以决定自己开发,并在演示的基础上开发了一些实用的功能,所以把这个过程记录下来。文档中还有很多不够完善的地方,欢迎讨论哈!
制作一个折线图用于显示当前24小时的数据,并且可以通过拖动折现图设置数据
初步看和一般的折线图没什么区别,但是实际如图示,节点是可以上下拖动的
代码如下:
& lt; template>
& lt; div ref=癲om”class=巴急韈hart-bar祝辞& lt;/div>
& lt;/template>
& lt; script>
从“echarts”进口echarts
从“进口tdTheme _c/图表/主题。json的//这是我自己写的主题文件,可以不用管
进口从}{,“@/libs/工具”//这是其他一些方法函数,可以不管
echarts。registerTheme (tdTheme, tdTheme)
出口默认{
名称:“ChartLine”,
道具:{
文字:字符串,
潜台词:字符串,
yName:字符串
}，
数据(){
返回{
dom:空,
symbolSize: 5//通过拖动是可以实时改变这里的值的
数据:[[0,10],[1,10],[2,20],[3,30],[4,36],[5,20],[6、25],[7,20],[8 21],[9日22],
[10日23],[11日25],[12、10],[13日11],[14、19],[15 20],[16日12],[17日13],[18日12],[19日9],
(20、21),[21日18],[22日10],[23日12]]
}
}，
方法:{
调整(){
this.dom.resize ()
}
}，
安装(){
这一点。dom=echarts.init参(这个。。dom, tdTheme)
this.dom.setOption ({
标题:{
文本:this.text,
潜台词:this.subtext,
谢:“中心”
}，
网格:{
左:50,
上图:40
}，
提示:{
触发:“轴”
}，
xAxis: {
分钟:0,
马克斯:23日,
类型:“价值”,
axisLabel: {
格式化程序(值){
返回值+”:00 '//格式时间显示方式
}
}，
axisLine: {onZero:假}
}，
桠溪:{
分钟:4
马克斯:36,
类型:“价值”,
名称:this.yName,
axisLine: {onZero:假}
}，
系列:[
{
id:“一个”,
类型:“行”,
平滑:没错,
symbolSize:这个。symbolSize,//为了方便拖拽,把symbolSize尺寸设大了。
数据:this.data
}
]
})
this.dom.setOption ({
图形:echarts.util.map(这一点。数据(dataItem dataIndex)=比;{
const这=//因为ondrag函数必须在回调内使用this.position获取实时坐标,此处必须用,替换这个
返回{//霸病北硎菊飧鐾夹卧氐睦嘈褪窃驳牡恪?
类型:“圆”,
形状:{//圆点的半径。
接待员:这一点。symbolSize/2
}，//用变换的方式对圆点进行定位.position: (x, y)表示将圆点平移到(x, y)位置。//这里使用了convertToPixel这个API来得到每个圆点的位置
位置:this.dom。convertToPixel(“网格”,dataItem),//这个属性让圆点不可见(但是不影响他响应鼠标事件)。
看不见的:真的,//这个属性让圆点可以被拖拽。
拖拽:没错,//把z值设得比较大,表示这个圆点在最上方,能覆盖住已有的折线图的圆点。
z: 100,
ondrag: echarts.util。咖喱(函数(dataIndex){//此处必须用匿名函数,不能用箭头函数,否则拿不到拖动的坐标
让=that.dom起源。convertToPixel(“网格”,that.data [dataIndex])//得到每个圆点原始位置//让maxY=that.dom。convertToPixel(“网格”,[40岁,36])//最高温度为36摄氏度,暂未做封装//超过最高温度36将不能拖动,写死的最低点高度为240年最高点为40
如果这一点。位置[1]比;240){
这一点。位置[1]=240
如果(这其他}。位置[1]& lt;40){
这一点。位置[1]=40
}
这一点。起源位置[0]=[0]//控制每个点位只能在y轴方向移动//这个。起源位置[1]=[1]//控制每个点位只能在x轴方向移动//实时获取拖动的点位信息并根据此信息重新画的图
那[dataIndex]=that.dom数据。convertFromPixel(“网格”,this.position)
that.dom.setOption ({
系列:[{
id:“一个”,
数据:that.data
})
})
},dataIndex)
}
})
})
(窗口、“调整”this.dom.setOption ({
图形:echarts.util.map(这一点。数据,(项目,dataIndex)=比;{
返回{
位置:this.dom。convertToPixel(“网格”项)
}
})
}))
}，
beforeDestroy () {
(窗口、“调整”this.resize)
}
}
& lt;/script>
