编程 Javascript

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实现折线图的拖拽效果

- Author -

lxq_9532

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS 对象介绍

Jan 20 Javascript

Javascript Jquery 遍历Json的实现代码

Mar 31 Javascript

location.href语句与火狐不兼容的问题

Jul 04 Javascript

jquery选择符快速提取web表单数据示例

Mar 27 Javascript

创建你的第一个AngularJS应用的方法

Jun 16 Javascript

Javascript原型链的原理详解

Jan 05 Javascript

JavaScript检测原始值、引用值、属性

Jun 20 Javascript

jQuery如何获取动态添加的元素

Jun 24 Javascript

jQuery基于随机数解决中午吃什么去哪吃问题示例

Dec 29 jQuery

JS实现提示框跟随鼠标移动

Aug 27 Javascript

JavaScript键盘事件响应顺序详解

Sep 30 Javascript

windows实现npm和cnpm安装步骤

Oct 24 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