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

这篇文章将为大家详细讲解有关Echarts如何实现单条折线可拖拽效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司是创新、创意、研发型一体的综合型网站建设公司，自成立以来公司不断探索创新，始终坚持为客户提供满意周到的服务，在本地打下了良好的口碑，在过去的十年时间我们累计服务了上千家以及全国政企客户，如成都混凝土搅拌机等企业单位，完善的项目管理流程，严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致赞扬。

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

1、步骤：

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

2、效果：

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

3、代码：




 
 ECharts单条折线可拖拽

/** * @todo 加载echarts方法 * @url:异步请求路径 * @chartId:请求的echart的id * @titleText:标题名 * @detailHref:跳转路径 * @name:图例名 */ function dayComment(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数据 var data = getStaticJsonData(); coinConsumeChart( chartId, titleText, detailHref, name, data.date, data.pv, data.fromTime, data.toTime); } /** * @todo 可拖拽的折线图 * @param chartId 插件的div的ID * @param titleText 标题名 * @param sublink 副标题超链接的路径 * @param name 图例名 * @param xAxisData X轴数据 * @param seriesData Y轴数据 * @param fromTime 默认开始节点 * @param toTime 默认结束节点 * */ function coinConsumeChart( chartId , titleText, detailUrl, name, xAxisData, seriesData , fromTime, toTime){ // 指定图表的配置项和数据 var myChart = echarts.init(document.getElementById( chartId )); var option = { 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数据 function getStaticJsonData(){ var data = '{"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 + ')'); return data; } dayComment( 'Ajax请求路径', 'consume_line', '用户消费','http://www.baidu.com', 'A消费'); //执行

关于“Echarts如何实现单条折线可拖拽效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

分享题目：Echarts如何实现单条折线可拖拽效果
文章路径：http://mswzjz.cn/article/igcjoo.html

网站建设知识

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

其他资讯