echarts实现折线图的拖拽效果


Posted in Javascript onDecember 19, 2019

使用echarts实现折线图的拖拽,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <script src="./echarts.js"></script>
</head>
<body>
 <div id="main" style="width: 600px;height:400px;"></div>
 <script type="text/javascript">
 var symbolSize = 20;
 var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];
 var myChart = echarts.init(document.getElementById('main'));
 myChart.setOption({
 # 表示不使用默认的『显示』『隐藏』触发规则。
  tooltip: {
   triggerOn: 'none',
   formatter: function (params) {
    return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
   }
  },
  xAxis: {
   min: -100,
   max: 80,
   type: 'value',
   axisLine: {onZero: false}
  },
  yAxis: {
   min: -30,
   max: 60,
   type: 'value',
   axisLine: {onZero: false}
  },
  series: [
   {
    id: 'a',
    type: 'line',
    smooth: true,
    symbolSize: symbolSize,
    data: data
   }
  ],
 });
 myChart.setOption({
 #拖拽功能:用 graphic 组件,在每个点上面,覆盖一个隐藏的可拖拽的圆点
  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),
    onmousemove: echarts.util.curry(showTooltip, dataIndex),
    onmouseout: echarts.util.curry(hideTooltip, dataIndex),
    z: 100
   };
  })
 });
 window.addEventListener('resize', function () {
  myChart.setOption({
   graphic: echarts.util.map(data, function (item, dataIndex) {
    return {
     position: myChart.convertToPixel('grid', item)
    };
   })
  });
 });
 function showTooltip(dataIndex) {
  myChart.dispatchAction({
   type: 'showTip',
   seriesIndex: 0,
   dataIndex: dataIndex
  });
 }
 function hideTooltip(dataIndex) {
  myChart.dispatchAction({
   type: 'hideTip'
  });
 }
 function onPointDragging(dataIndex, dx, dy) {
  data[dataIndex] = myChart.convertFromPixel('grid', this.position);
  myChart.setOption({
   series: [{
    id: 'a',
    data: data
   }]
  });
 }

</script>
</body>
</html>

echarts实现折线图的拖拽效果

echarts实现折线图的拖拽效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 #Javascript
Echarts实现单条折线可拖拽效果
Dec 19 #Javascript
Webpack设置环境变量的一些误区详解
Dec 19 #Javascript
Echarts实现多条折线可拖拽效果
Dec 19 #Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 #Javascript
利用JS如何获取form表单数据
Dec 19 #Javascript
在Vue项目中使用Typescript的实现
Dec 19 #Javascript
You might like
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
php和html的区别点详细总结
2019/09/24 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
python编写简单爬虫资料汇总
2016/03/22 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
python线性插值解析
2020/07/05 Python
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
马来西亚网上购物:Youbeli
2018/03/30 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
村主任“四风”问题个人整改措施
2014/10/04 职场文书
导游词之安徽九华山
2019/09/18 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers