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可以实现指定的请求响应.篡改请求内容.延迟请求.捕获手机端请求等 ...
随机推荐
- UI自动化测试实战
前言 前面我们已经搭建好了wordpress网站,如果需要查看运行效果可以看我前面的搭建文章,下面我们来进行自动化测试的练习. 示例 首先我们测试自动登陆 import unittest from s ...
- LOJ10013曲线
题目描述 明明做作业的时候遇到了n 个二次函数s_i(x)=ax^2+bx+c ,他突发奇想设计了一个新的函数 f(x)=max{s_i(x)},i=1,2,...,n. 明明现在想求这个函数在 [ ...
- LOJ104 普通平衡树
题目描述 这是一道模板题. 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入 x 数: 删除 x 数(若有多个相同的数,因只删除一个): 查询 x 数的排名(若 ...
- COGS 307 模拟退火
307. [HAOI2006] 均分数据 ★★ 输入文件:data.in 输出文件:data.out 简单对比时间限制:3 s 内存限制:128 MB [问题描述] 已知N个正整数:A ...
- 一次sql server实战
前言:朋友在做授权项目的时候,遇到一个sql server数据库的注入点,没办法解决,让我帮忙看看,因为是授权项目,所以就可以帮助测试下. 内容如下: 单引号,很明显的错误,因为是时间格式:2020- ...
- Docker容器内中文乱码
Docker容器内中文乱码 一.通过Dockerfile解决中文乱码问题 方式二: 二.临时解决 方式二: 三.修改jre/lib/fonts下的字体 CSDN:黑猫_:Dockerfile 创建容器 ...
- linux系统磁盘管理(磁盘阵列)
1.磁盘阵列简介 RAID(Redundant Array of Independent Disks)即独立硬盘冗余阵列,简称磁盘阵列.磁盘阵列是由很多价格较便宜的磁盘,以硬件(RAID卡)或软件(M ...
- Java链表(英雄增删查改)
链表(Linked List)介绍 链表是有序的列表,但是它在内存中是存储如下 小结: 1.链表是以节点的方式来存储,是链式存储. 2.每个节点包含 data 域, next 域:指向下一个节点. 3 ...
- Eclipse中配置Junit
在要使用Junit的project名上,点击properties-->Java Build Path-->Libraries,点击Add Library 选择Junit 选择Junit 4 ...
- Codeforces Round #644 (Div. 3)
比赛链接:https://codeforces.com/contest/1360 A - Minimal Square 题意 计算能包含两个 $a \times b$ 矩形的最小正方形的面积. 题解 ...