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可以实现指定的请求响应.篡改请求内容.延迟请求.捕获手机端请求等 ...
随机推荐
- MySQL的索引为什么用B+Tree?InnDB的数据存储文件和MyISAM的有何不同?
前言 这篇文章的题目,是我真实在面试过程中遇到的问题,某互联网众筹公司在考察面试者MySQL相关知识的第一个问题,我当时还是比较懵的,没想到这年轻人不讲武德,不按套路出牌,一般的问MySQL的相关知识 ...
- 数据分析中常用的Excel函数
数据分析中excel是一个常见且基础的数据分析工具,要想掌握好它,学会使用其中的常用函数是一个绕不过去的坎.从网上搜集的资料来说,基本上确定了数据分析中Excel的常用函数有以下这六类 数学函数:SU ...
- 基础知识——TCP协议
七层网络模型:物理层,数据链路层,网络层,传输层,会话层,表示层,应用层. 五层网络模型: 1. 应用层:确定进程之间通信的性质以满足用户需求.(各种传输协议) 2. 运输层:负责主机间不同进程的通信 ...
- 算法-迪杰斯特拉算法(dijkstra)-最短路径
迪杰斯特拉算法(dijkstra)-最短路径 简介: 迪杰斯特拉算法是由荷兰计算机科学家狄克斯特拉于1959 年提出的,因此又叫狄克斯特拉算法.是从一个顶点到其余各顶点的最短路径算法,解决的是有向图中 ...
- yum.repos.d中的变量($releasever与$basearch)
今天打算更新一下centos的repo源,把原先国外的repo地址换成国内的,速度快一些.主要替换的文件是/etc/yum.repos.d/Centos-Base.repo .替换的时候,不知道大家有 ...
- 前n项余数个数和
一:O(n) 计算贡献:前n项中,能被i(1~n)整除的数的个数为(n/i)个,,也就是 i 给前n项中(n/i)个数做了余数 #include<iostream> using names ...
- Codeforces Round #649 (Div. 2) A. XXXXX
题目链接:https://codeforces.com/contest/1364/problem/A 题意 找出大小为 $n$ 的数组 $a$ 的最长连续子数组,其元素和不被 $x$ 整除. 题解 如 ...
- AtCoder Beginner Contest 188 E - Peddler (树)
题意:有\(n\)个点,\(m\)条单向边,保证每条边的起点小于终点,每个点都有权值,找到联通的点的两个点的最大差值. 题解:因为题目说了起点小于终点,所以我们可以反向存边,然后维护连通边的前缀最小值 ...
- c语言实现链表增、删、改、查及文件读写 && 链表实现程序
一.链表实现增删改查 1.链表定义 1 #include<stdio.h> 2 #include<string.h> 3 #include<windows.h> 4 ...
- GoAccess 监控工具
GoAccess 基本概述 简易的统计访问量的软件,官方安装教程 GoAccess 安装 # 下载包 [root@web01 ~]# wget http://tar.goaccess.io/goacc ...