在本文中，可拖动节点的折线图是使用e chart实现的，并在echart中找到了一个演示。门户是https://echarts.baidu.com/examples/editor.html? C=线拉的，但是不是用vue写的，在重写到vue组件的过程中遇到了很多问题。在百度，发现没有相关文档，于是决定自己开发，基于demo开发了一些实用的功能，于是记录了这个过程。文件还有很多不完善的地方，欢迎讨论！

要求：制作折线图显示当前24小时数据，拖动折扣图设置数据

效果图如下：一开始和一般的折线图没什么区别，但实际上，如图所示，节点是可以上下拖动的

代码如下：

template div ref=' DOM ' class=' charts chart-bar '/div/templatescript import echart from ' echart ' import TdTHEME from ' _ c/charts/THEME。JSON '//这是我自己写的主题文件，可以不用管从" @/libs/工具"//导入{开，关}这是其他一些方法函数，可以不管echart。注册主题(' tdTheme '，tdTheme)导出默认{ name: 'ChartLine '，props: { text: String，subtext: String，yName: String }，data () { return { dom: null，symbolSize: 5，//通过拖动是可以实时改变这里的值的data: [[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]，[12，10]多姆。resize()} }，mounted(){ this。DOM=echart。初始化(这个.$refs.dom，' tdTheme ')这个。多姆。setOption({ title : { text : this。text，subtext: this.subtext，x: 'center' }，grid: { left: 50，top: 40 }，tooltip : { trigger : ' axis ' }，xAxis: { min:max: 23，格式时间显示方式} }，axis lene : { on zero : false } }，yAxis: { min: 4，max: 36，type: 'value '，name: this.yName，axis lene : { on zero : false } }，series: [ { id: 'a '，type: 'line '，smooth: true，symbolSize:为了方便拖拽，把符号大小尺寸设大了。数据：这个。data }]})这个。多姆。SetOption({ graphic : echart。乌提尔。地图(这个。数据，(dataItem，DataIndex)={ const=this//因为ondrag函数必须在回调内使用这个位置获取实时坐标，此处必须用那替换此返回{ //'圆圈'表示这个图形元素的类型是圆点键入："圆形”，shape: { //圆点的半径r: this.symbolSize/2 }，//用改变的方式对圆点进行定位位置： [x，y]表示将圆点平移到[x，y]位置。 //这里使用了convertToPixel这个应用程序接口来得到每个圆点的位置：号位置。多姆。converttopixel(' grid '，dataItem)，//这个属性让圆点不可见（但是不影响他响应鼠标事件)。invisible: true，//这个属性让圆点可以被拖拽draggable: true，//把z值设得比较大，表示这个圆点在最上方，能覆盖住已有的折线图的圆点z: 100，ondrag : echart。乌提尔。curry(函数(DataIndex){//此处必须用匿名函数，不能用箭头函数，否则拿不到拖动的坐标让起源=那个。多姆。converttopixel(' grid '，that.data[dataIndex]) //得到每个圆点原始位置//让maxY=那个。多姆。converttopixel(' grid '，[40，36]) //最高温度为36摄氏度，暂未做封装//超过最高温度36将不能拖动，写死的最低点高度为240,最高点为40如果(这个。位置[1]240){这个。位置[1]=240 }否则如果(这。位置[1]40){这个。位置[1]=40 }这个。位置[0]=原点[0]//控制每个点位只能在y轴方向移动//this.position[1]=origin[1] //控制每个点位只能在x轴方向移动//实时获取拖动的点位信息并根据此信息重新画图那个。数据[dataIndex]=那个。多姆。convertfrompixel(' grid '，这个。位置)。多姆。setoption({ series :[{ id : ' a '，data: that.data }] }) }，dataIndex)})})on(window，' resize '，this。多姆。设置选项({ graphic : echart。乌提尔。地图(这个。data，(item，DataIndex)={ return { position : this。多姆。converttopixel(' grid，item)} })}))，befordestroy(){ off(window，' resize '，this.resize) }}/script总结

以上是边肖介绍的vue echarts实现的拖拽节点的折线图(支持拖拽方向和上下限的设置)，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！