<div id="container" style="height: 400px"></div>
<script type="text/javascript" src="<!--{$skinUrl}-->js/jquery.min.js"></script>
<script type="text/javascript" src="<!--{$skinUrl}-->js/echarts.common.min.js"></script>

function initData(type,num) {
$.post('report.ajaxload.html',{type:type,num:num}, function(data){
var tbhtml = "";
var listLth=data.list.length;
for(var i=0; i<listLth;i++){
tbhtml += '<tr><td>'+data.list[i].payDate+'</td>';
tbhtml += '<td>'+data.list[i].num+'</td>';
tbhtml += '<td>'+data.list[i].payamount+'</td></tr>';
}
$("#tbody").html(tbhtml);

var detail= data.report;
hightChartsfn(detail,num);
}, 'json');
}
var data='<!--{$data.report}-->';
data = JSON.parse(data);
hightChartsfn(data,0);
function hightChartsfn(data,num) {
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var title = data.title;
var detail = data.detail;
var end = 100;
if(num>0){
end = 50;
}
option = null;
option = {
backgroundColor:'#fff',
xAxis: {
type: 'category',
boundaryGap: false,
data: title
},
tooltip: {
trigger: 'axis'
},
yAxis: {
type: 'value'
},
dataZoom: [
{
show: true,
realtime: true,
start: 0,
end: end
},
{
type: 'inside',
realtime: true,
start: 0,
end: end
}
],
series: [{
name:'销售额',
data: detail,
type: 'line',
itemStyle:{
normal:{
color:'#4cabdd',
lineStyle:{
color:'#4cabdd',
width:3
}
}
}
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}


echarts手机端,数据多时可以滚动的更多相关文章

  1. JGUI源码:Accordion鼠标中键滚动和手机端滑动实现(2)

    本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:ht ...

  2. 移动手机端H5无缝间歇平滑向上滚动js代码

    在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...

  3. fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题

    最近接触了好几次jquery.fullpage.js这个插件,实现整屏的滑动,效果很炫,用fullpage来实现也很简单,但是也碰到了一些问题和大家分享一下 1.单屏高度超过屏幕高度,实现单屏的滑动 ...

  4. 自己动手丰衣足食,h5手机端jquery弹窗插件(事件冒泡、单例模式、遮盖部分禁止默认滚动)

    感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc ...

  5. delphi xe5 android 开发数据访问手机端(一)

    上几片文章我们把供手机端调用的web服务完成,接下来实现手机端调用webservices获取数据 1.新建firemonkey mobile application 2.选择blank applica ...

  6. Fiddler抓取手机端(ios+android)APP接口数据(http+https)

    (1)android 环境要求: PC机和手机连接在同一网络下 工具下载地址: Fiddler网上可以下载,自行下载.注意:需要安装fiddlercertmaker(网上自行下载)进行认证 配置步骤: ...

  7. XE5 Android 开发数据访问手机端[转]

    把供手机端调用的web服务完成,接下来实现手机端调用webservices获取数据 1.新建firemonkey mobile application 2.选择blank application 3. ...

  8. 11.采集手机端app企查查上司公司数据(未成功)

    ---恢复内容开始--- 采集企查查手机端app数据: 1.首先手机端安装app并usb连接电脑端,fiddler监控手机请求数据对数据进行分析抓取. 手机端界面与fiddler界面参照: 2.对获取 ...

  9. charles捕获手机端请求数据

    charles是mac os中的一款类似于windows下fiddler的代理软件,个人感觉比fiddler功能强大:通过charles可以实现指定的请求响应.篡改请求内容.延迟请求.捕获手机端请求等 ...

随机推荐

  1. POJ2029 二维线段树

    Get Many Persimmon Trees POJ - 2029 Seiji Hayashi had been a professor of the Nisshinkan Samurai Sch ...

  2. 分布式缓存 — MongoDB

    --- 数据库管理系统 数据库管理系统主要分为俩大类:RDBMS.NOSQL.在个人电脑.大型计算机和主机上应用最广泛的数据库管理系统是关系型DBMS.NoSQL是对不同于传统的关系数据库的数据库管理 ...

  3. 高性能缓存 Caffeine 原理及实战

    一.简介 Caffeine 是基于Java 8 开发的.提供了近乎最佳命中率的高性能本地缓存组件,Spring5 开始不再支持 Guava Cache,改为使用 Caffeine. 下面是 Caffe ...

  4. Web信息收集之搜索引擎-GoogleHacking

    Web信息收集之搜索引擎-GoogleHacking 一.信息收集概述 二.Google Hacking 2.1 site 2.2 filetype 2.3 inurl 2.4 intitle 2.5 ...

  5. size_t 、wchar_t和 ptrdiff_t

    size_t在C语言中就有了. 它是一种"整型"类型,里面保存的是一个整数,就像int, long那样.这种整数用来记录一个大小(size).size_t的全称应该是size ty ...

  6. java 去掉重复的数字

    public static void main(String[] args) { String s="1,2,2,2,2,2,3,3,3"; String[] array = s. ...

  7. ceph --- (简单操作及openstack交接)

    部署ceph :https://www.cnblogs.com/cloudhere/p/10519647.html Centos7部署ceph:https://www.cnblogs.com/kevi ...

  8. 3.centos 7执行service iptables save报错问题

    1.报错 [root@localhost ~]# service iptables save The service command supports only basic LSB actions ( ...

  9. Java JDBC 模糊查询 避免输入_,%返回全部数据

    Java JDBC 模糊查询 避免输入_,%返回全部数据 "SELECT * FROM employees WHERE INSTR(first_name,?)>0 " 仅供参 ...

  10. C++模板的介绍

    ​ 作者:良知犹存 转载授权以及围观:欢迎添加微信:Allen-Iverson-me-LYN     1. 模板是泛型编程的基础,泛型编程即以一种独立于任何特定类型的方式编写代码.C++模板的作用,类 ...