微客导航 » 文章资讯 » Echarts实现单条折线可拖拽效果

Echarts实现单条折线可拖拽效果

2023-08-04 07:05:05 165

本文实例为大家分享了Echarts单条折线可拖拽的具体代码，供大家参考，具体内容如下

1、步骤：

1)、封装Echarts折线图方法coinConsumeChart(),提取出公共的部分；
2)、AJax获取后台数据传参至Echarts公共方法；
3)、模拟后台获取的json数据；
4)、给dayComment()方法值开始执行。

2、效果：

3、代码：





ECharts单条折线可拖拽

/** *@todo加载echarts方法 *@url:异步请求路径 *@chartId:请求的echart的id *@titleText:标题名 *@detailHref:跳转路径 *@name:图例名 */ functiondayComment(url,chartId,titleText,detailHref,name){ /*$.ajax({//Ajax请求你要展现的数据 url:url, type:'post', cache:false, dataType:'json', async:false,//改为同步 data:{},//查看方式 success:function(data){ detailHref='http://www.baidu.com'; coinConsumeChart(chartId,titleText,detailHref,name,data.date,data.pv,data.fromTime,data.toTime); }, error:function(){ alert('服务器异常！') } });*/ //假设已经获取到json数据 vardata=getStaticJsonData(); coinConsumeChart(chartId,titleText,detailHref,name,data.date,data.pv,data.fromTime,data.toTime); } /** *@todo可拖拽的折线图 *@paramchartId插件的div的ID *@paramtitleText标题名 *@paramsublink副标题超链接的路径 *@paramname图例名 *@paramxAxisDataX轴数据 *@paramseriesDataY轴数据 *@paramfromTime默认开始节点 *@paramtoTime默认结束节点 **/ functioncoinConsumeChart(chartId,titleText,detailUrl,name,xAxisData,seriesData,fromTime,toTime){ //指定图表的配置项和数据 varmyChart=echarts.init(document.getElementById(chartId)); varoption={ title:{ text:titleText, x:'center',//主标题居中 subtext:'详情', sublink:detailUrl,//副标题超链接 subtarget:'blank',//副标题超链接打开方式 subtextStyle:{ color:'#2299EE', fontSize:15, } }, color:['#3398DB'], tooltip:{ trigger:'axis' }, legend:{ data:[name], top:30, left:55,//图示显示在左边 }, toolbox:{ show:true, feature:{ //mark:{show:true}, //dataZoom:{show:true}, //magicType:{show:true,type:['line','bar','stack','tiled']}, magicType:{show:true,type:['line','bar']}, dataView:{show:true}, //restore:{show:true}, //saveAsImage:{show:true} } }, calculable:true, dataZoom:{ show:true, realtime:true, //start:20, //end:80//百分比 startValue:fromTime,//拖拽条开始时间 endValue:toTime//拖拽条结束时间 }, xAxis:[ { type:'category', boundaryGap:false, data:xAxisData } ], yAxis:[ { type:'value' } ], series:[ { name:name, type:'line', data:seriesData, }, ] }; //使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } //模拟AJax请求获取返回的json数据 functiongetStaticJsonData(){ vardata='{"date":["20180726","20180727","20180728","20180729","20180730","20180731","20180801","20180802","20180803","20180804","20180805","20180806","20180807","20180808","20180809","20180810","20180811","20180812","20180813","20180814"],"pv":[100,10,20,30,60,800,700,300,1000,100,100,360,900,180,120,150,600,140,1200,800],"fromTime":"20180808","toTime":"20180814"}'; data=eval('('+data+')'); returndata; } dayComment('Ajax请求路径','consume_line','用户消费','http://www.baidu.com','A消费');//执行

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

Echarts实现单条折线可拖拽效果

热门推荐

随机推荐