介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head>
,& lt; meta charset=皍tf-8"比;
,& lt; script src=啊?echarts.js"祝辞& lt;/script>
& lt;/head>
& lt; body>
,& lt; div id=癿ain",祝辞& lt;/div>
,& lt; script 类型=拔谋?javascript"比;
,var symbolSize =, 20;
,var data =, [[15,, 0], [-50,, 10], [-56.5,, 20], [-46.5, 30], [-22.1, 40]];
,var myChart =, echarts.init (. getelementbyid(& # 39;主要# 39;));
,myChart.setOption ({
,#表示不使用默认的“显示”“隐藏“触发规则。
,,提示:{
,,,新型:& # 39;没有# 39;
,,,格式化程序:function (params), {
,,,return & # 39; X:, & # 39;, +, params.data [0] .toFixed (2), +, & # 39; & lt; br> Y:, & # 39;, +, params.data [1] .toFixed (2);
,,}
,,},
,,xAxis: {
,,,分钟:-100年,
,,,马克斯:80年,
,,,类型:& # 39;价值# 39;
,,axisLine: {onZero:假}
,,},
桠溪才能:{
,,,分钟:-30年,
,,,马克斯:60岁
,,,类型:& # 39;价值# 39;
,,axisLine: {onZero:假}
,,},
,,系列:[
,,{
,,,,,& # 39;一个# 39;
,,,类型:,& # 39;行# 39;
光滑,,,,,真的,
,,,symbolSize:, symbolSize,
,,,数据:数据
,,}
,,,
,});
,myChart.setOption ({
,#拖拽功能:用,graphic 组件,在每个点上面,覆盖一个隐藏的可拖拽的圆点
图形:才能,echarts.util.map(数据,function (项目,,dataIndex), {
,,return {
,,,类型:,& # 39;圆# 39;
,,,位置:,myChart.convertToPixel(& # 39;网格# 39;,,项),
,,,形状:,{
,,,,r: symbolSize /, 2
,,,},
,,,看不见的:,真的,
可拖动的:,,,,真的,
,,,ondrag:, echarts.util.curry (dataIndex onPointDragging也),
,,,onmousemove:, echarts.util.curry (dataIndex showTooltip也),
onmouseout:,,,, echarts.util.curry (dataIndex hideTooltip也),
,,,z: 100
,,};
})才能
,});
,window.addEventListener(& # 39;调整# 39;,,function (), {
myChart.setOption({才能
,,,图形:echarts.util.map(数据,,function (项目,,dataIndex), {
,,,return {
,,,,位置:,myChart.convertToPixel(& # 39;网格# 39;,,项目)
,,,};
,,})
,,});
,});
,function showTooltip (dataIndex), {
myChart.dispatchAction({才能
,,,类型:& # 39;showTip& # 39;
,,,seriesIndex: 0,
,,dataIndex: dataIndex
,,});
,}
,function hideTooltip (dataIndex), {
myChart.dispatchAction({才能
,,,类型:& # 39;hideTip& # 39;
,,});
,}
,function onPointDragging (dataIndex, dx, dy), {
数据才能[dataIndex],=, myChart.convertFromPixel(& # 39;网格# 39;,,this.position);
myChart.setOption({才能
,,,系列:[{
,,,,,& # 39;一个# 39;
,,,数据:数据
,,}]
,,});
,}
& lt;/script>
& lt;/body>
& lt;/html>
小编给大家分享一下echarts如何实现折线图的拖拽效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
使用echarts实现折线图的拖拽,供大家参考,具体内容如下
以上是“echarts如何实现折线图的拖拽效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
