echarts实现折线图的拖拽效果

使用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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于mpvue小程序使用echarts画折线图的方法示例

    第一次使用mpvue框架来写小程序,项目开发直接搬用mpvue-shop(一个仿网易严选的小程序开发项目),项目结构清楚,实现了大部分功能,对于初次使用mpvue的小伙伴们来说,是一个很好的选择. 关于组件的选择: 1.echarts-for-weixin,官方echarts的小程序版本.使用参考:echarts-for-weixin介绍,如果你是原生开发小程序版本,这个组件非常适合你,开发过程中可使用echarts官方提供的所有配置和Api,但并不适合mpvue项目. 2.wx-charts,

  • echarts多条折线图动态分层的实现方法

    echarts多条折线图动态分层的实现方法

    1.关于Echarts 大家可以到这个网址看一下,还是比较详细的. http://echarts.baidu.com/doc/example.html 这个功能还是很强大的,对于喜欢做数据统计来说是美味的. 2.echarts多条折线图动态分层 var xData = param.xData; var data = param.yData let option = []; let num =param.num ? param.num : 0; let max = num ? num *100 :

  • vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）

    本篇文档主要是利用echarts实现可拖动节点的折线图,在echarts中找到了一个demo,传送门:https://echarts.baidu.com/examples/editor.html?c=line-draggable,但是不是用vue写的,并且在改写为vue组件的过程中遇到了很多问题,在百度过程中发现并没有相关的文档,所以决定自己开发,并在demo的基础上开发了一些实用的功能,所以把这个过程记录下来.文档中还有很多不够完善的地方,欢迎讨论哈! 需求:制作一个折线图用于显示当前24小时

  • Echarts教程之通过Ajax实现动态加载折线图的方法

    一.GIF图 二.前台代码 // 调用方法 hotlineLine(); // 定时刷新 setInterval(function () { hotlineLine(); },5000); function hotlineLine(){ // 初始化图表元素 var hotlineLine = echarts.init(document.getElementById('hotlineLine_id')); $.get('${pageContext.request.getContextPath()

  • Echarts动态加载多条折线图的实现代码

    背景:动态加载多条折线图,折线图条数不确定 页面效果: 页面代码 //气象数据 function serchQx(beginTime, endTime, str, parameter) { $("#rr").html("");//将循环拼接的字符串插入下拉列表 var t = $("#imageParameter").val(); $ .ajax({ type : "POST", data : { "str"

  • jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法

    jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法

    本文实例讲述了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法.分享给大家供大家参考,具体如下: 1.问题背景 设计一条折线图,但是图形中不用插件自带的颜色,需要自定义线条和折点的颜色 2.实现源码 (1)图形自分配颜色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-设置折线图中折线线条颜色和折线点颜色</t

  • 使用laravel和ECharts实现折线图效果的例子

    1.首先引入echart.js <script type="text/javascript" src="{{ asset('/public/js/echarts.js') }}"></script> 2.html页面,要有一个布局容器,用来显示图像,一定要设置宽和高 <div class="contain" style="width: 84%;" id="contain">

  • Layer+Echarts构建弹出层折线图的方法

    layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验. 在中国可视化生态系统中,ECharts 通过提供方便丰富的可视化图表,极大缩短了用户与数据的距离.个人认为是最好用的可用来生成图表的插件. 现在使用Layer和Echarts构建弹出层折线图. 下载好所需要用到的工具包,Echarts下载为echarts.min.js,Layer在layer官网下载之后将layer文件夹放到项目之中. 在HTML文件中引入

  • jQuery插件echarts实现的单折线图效果示例【附demo源码下载】

    jQuery插件echarts实现的单折线图效果示例【附demo源码下载】

    本文实例讲述了jQuery插件echarts实现的单折线图效果.分享给大家供大家参考,具体如下: 1.问题背景: 设计一个折线图,展示一个星期内水果销售量 2.实现源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-单折线图</title> <script type="text/javascript"

  • 微信小程序使用echarts获取数据并生成折线图

    微信小程序使用echarts获取数据并生成折线图

    微信小程序使用echarts,实现左右双Y轴,动态获取数据,生成折线图 本来使用的是wxcharts,但发现实现不了左右双y轴的效果,就换成echarts 要实现这样的效果,需要以下几步: (1)去github下载插件,放进自己的项目里 只需要将名称是ec-canvas的文件夹放进自己项目里. 像这样: (2)分别写小程序的四个文件 ① echart.json { "usingComponents": { "ec-canvas": "../../ec-ca

  • jQuery插件echarts实现的多折线图效果示例【附demo源码下载】

    jQuery插件echarts实现的多折线图效果示例【附demo源码下载】

    本文实例讲述了jQuery插件echarts实现的多折线图效果.分享给大家供大家参考,具体如下: 1.问题背景: 设计一个折线图,折线图展示苹果.香蕉的销售量 2.实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-多折线图</title> <script type="text/javascript&qu

随机推荐