Echarts单条折线可拖拽

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

2、效果：

3、代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts单条折线可拖拽</title><script src="http://code.jquery.com/jquery-1.4.1.min.js"></script><!-- 引入 echarts.js --><script src="http://echarts.baidu.com/examples/vendors/echarts/echarts.min.js?_v_=1526486305040"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id='consume_line' style="width:600px;height:400px;margin-left:20px;"> </div>
</body>
</html>
<script type="text/javascript">/*** @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消费');  //执行
</script>

Echarts单条折线可拖拽相关推荐

`echarts`实现关系图拖拽
echarts 目标:echarts实现关系图拖拽效果:当所有的节点都处在高亮的状态时,可以拖拽任何节点.当点击其中一个节点与之有直接联系的节点高亮,其他的置灰.并且高亮的节点均可拖拽.点击空白处时 ...
Vue 结合 echarts 原生 html5 实现拖拽排版报表系统
前言不知道各位 coder 有没有碰到过许多重复的业务需求,比如排版相类似的报表,只不过是顺序稍微换了一下,就是一个新的页面,虽然基于模板思想来写的话也能减少不少代码,但是相对的不那么方便,笔者最近 ...
echarts实现大数据拖拽数据图表
//[血压] function getDtBP(json) {var DiastolicArray = [];var ShrinkArray = [];var LastUpdateArray = [] ...
使用echarts实现类似股票k图可拖拽可悬浮十字线
实现难点需要悬浮出现十字线,再次点击后可拖拽点击屏幕后鼠标悬浮实现思路点击折线图屏幕后开启或者开启可拖拽 chartDomBig.getZr().off("click");// ...
echarts 地图拖拽和缩放
禁止拖拽和缩放在配置中roam设置为false,开启为true 只拖拽或只缩放缩放 roam设置为'scale',拖拽roam设置为'move'
低代码可视化报表开源工具，只要在线拖拽就能做出复杂数据报表
平时苦于做报表的小伙伴们,今天TJ君给你们带来一个开源低代码可视化报表项目,JimuReport,来解决你们的报表难题! JimuReport,作为一个报表项目,它拥有类似excel的操作风格,简简单 ...
php echarts 两条曲线图,使用laravel和ECharts实现折线图效果的例子
1.首先引入echart.js 2.html页面,要有一个布局容器,用来显示图像,一定要设置宽和高 3.echarts折线图的使用 var myChart = echarts.init(documen ...
JimuReport 1.3.7 首个正式版本发布，免费的可视化拖拽报表
项目介绍积木报表,一款免费的可视化Web报表工具,像搭建积木一样在线拖拽设计!功能涵盖,数据报表.打印设计.图表报表.大屏设计等! 秉承"简单.易用.专业"的产品理念,极大的降低 ...
小程序mpvue图片绘制水印_基于mpvue小程序使用echarts画折线图的方法示例
第一次使用mpvue框架来写小程序,项目开发直接搬用mpvue-shop(一个仿网易严选的小程序开发项目),项目结构清楚,实现了大部分功能,对于初次使用mpvue的小伙伴们来说,是一个很好的选择. 关 ...
svg实现多个元素拖拽
下面使用到的index.css path{stroke:black;stroke-width:3;fill:none;stroke-linecap: round; } svg {} p{text-al ...

Echarts单条折线可拖拽

Echarts单条折线可拖拽相关推荐

最新文章

热门文章