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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
json 定义
Jun 10 Javascript
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 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
我的论坛源代码(五)
2006/10/09 PHP
Snoopy类使用小例子
2008/04/15 PHP
php定界符
2014/06/19 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
dess中一个简单的多路委托的实现
2010/07/20 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
python开发之str.format()用法实例分析
2016/02/22 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
params有什么用
2016/03/01 面试题
农田水利实习自我鉴定
2013/09/19 职场文书
医院营销工作计划
2015/01/16 职场文书
小学六年级毕业感言
2015/07/30 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
java设计模式--三种工厂模式详解
2021/07/21 Java/Android