echarts手机端,数据多时可以滚动
<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手机端,数据多时可以滚动的更多相关文章
- JGUI源码:Accordion鼠标中键滚动和手机端滑动实现(2)
本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:ht ...
- 移动手机端H5无缝间歇平滑向上滚动js代码
在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...
- fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题
最近接触了好几次jquery.fullpage.js这个插件,实现整屏的滑动,效果很炫,用fullpage来实现也很简单,但是也碰到了一些问题和大家分享一下 1.单屏高度超过屏幕高度,实现单屏的滑动 ...
- 自己动手丰衣足食,h5手机端jquery弹窗插件(事件冒泡、单例模式、遮盖部分禁止默认滚动)
感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc ...
- delphi xe5 android 开发数据访问手机端(一)
上几片文章我们把供手机端调用的web服务完成,接下来实现手机端调用webservices获取数据 1.新建firemonkey mobile application 2.选择blank applica ...
- Fiddler抓取手机端(ios+android)APP接口数据(http+https)
(1)android 环境要求: PC机和手机连接在同一网络下 工具下载地址: Fiddler网上可以下载,自行下载.注意:需要安装fiddlercertmaker(网上自行下载)进行认证 配置步骤: ...
- XE5 Android 开发数据访问手机端[转]
把供手机端调用的web服务完成,接下来实现手机端调用webservices获取数据 1.新建firemonkey mobile application 2.选择blank application 3. ...
- 11.采集手机端app企查查上司公司数据(未成功)
---恢复内容开始--- 采集企查查手机端app数据: 1.首先手机端安装app并usb连接电脑端,fiddler监控手机请求数据对数据进行分析抓取. 手机端界面与fiddler界面参照: 2.对获取 ...
- charles捕获手机端请求数据
charles是mac os中的一款类似于windows下fiddler的代理软件,个人感觉比fiddler功能强大:通过charles可以实现指定的请求响应.篡改请求内容.延迟请求.捕获手机端请求等 ...
随机推荐
- copy,集合
一.基础数据类型补充: 1种方法:删除列表里面的元素时,一定不能循环列表,会出错.可以循环索引,然后循环删除开头或结尾这个位置的元素(原开头结尾的元素被删除之后,会有新的元素顶上来). 2种方法:把要 ...
- 《我想进大厂》之Zookeeper夺命连环9问
谈谈你对Zookeeper的理解? Zookeeper是一个开源的分布式协调服务,由雅虎公司创建,由于最初雅虎公司的内部研究小组的项目大多以动物的名字命名,所以后来就以Zookeeper(动物管理员) ...
- CODING 联合 TKE,让应用发布更便捷
随着互联网服务的竞争进入红海,IT 服务的复杂性加大,用户对于软件工程的速度与质量有了更高的追求.在这样的大背景下,DevOps.容器.微服务逐步取代传统的开发模式成为云原生的关键组成部分,腾讯云更是 ...
- .Net微服务实战之必须得面对的分布式问题
系列文章 .Net微服务实战之技术选型篇 .Net微服务实战之技术架构分层篇 .Net微服务实战之DevOps篇 .Net微服务实战之负载均衡(上) .Net微服务实战之CI/CD .Net微服务实战 ...
- 并发编程补充--方法interrupted、isinterrupted详解
并发编程 interrupted()源码 /** * Tests whether the current thread has been interrupted. The * <i>int ...
- Java排序算法(二)选择排序
一.测试类SortTest import java.util.Arrays; public class SortTest { private static final int L = 20; publ ...
- mysql创建和使用数据库
mysql连接和断开 mysql -h host -u user -p******** /*建议不要在命令行中输入密码,因为这样做会使其暴露给在您的计算机上登录的其他用户窥探*/ mysql -u u ...
- 小希的迷宫B - B
上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该是双向连通的,就是说如果有一个通道连通了 ...
- 【uva 12627】Erratic Expansion(算法效率--递推)
题意:初始1个红气球,每小时后,1个红气球会变成3个红气球和1个蓝气球,而1个蓝气球会变成4个蓝气球.问经过N小时后,第L~R行一共有多少个红气球. 解法:问行数就定义f[i][j]表示 i 小时后前 ...
- 【noi 2.6_2421】Exchange Rates(DP)
题意:起始有1000元美元,给出N天美元与加拿大元的汇率.问N天内可以不停的兑换,每次兑换需要收取3%的手续费,问可以得到的最大的美元数. 解法:直接用2个变量存第 i 天时手中是美元和加拿大元的最大 ...