Echart横坐标时间轴滑动
主要针对于dataZoom的使用,代码如下:
option = {
title: {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
"dataZoom": [
{
"show": true,
"height": ,
"xAxisIndex": [
],
bottom:,
"start": ,
"end":
},
{
"type": "inside",
"show": true,
"height": ,
"xAxisIndex": [
],
"start": ,
"end":
}],
series: [
{
name:'最高气温',
type:'line',
data:[, , , , , , ],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name:'最低气温',
type:'line',
data:[, -, , , , , ],
markPoint: {
data: [
{name: '周最低', value: -, xAxis: , yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '最大值'
}
},
type: 'max',
name: '最高点'
}]
]
}
}
]
};
Echart横坐标时间轴滑动的更多相关文章
- echart搭配时间轴进行展示 (本例展示的是多时间 多地区 多指标条件 )
1:照常先来几张图 看效果 2:首先 看官方文档 我把echart官方的例子给扒下来并整理了得出如下效果 上 案例图和代码 效果图 : 代码: <style type="text/c ...
- echart 时间轴、以及y轴值过大但是变化不大显示感觉不出变化的问题+弹出框拖动div事件
1.时间轴 echart 提供了一种图表,如果x轴是一个时间范围,并且是连续的,如果用传统的数据驱动会很慢,所以用时间轴的方式 function initCurve(_data){ var resul ...
- jquery时间轴tab切换效果实现结合swiper实现滑动显示效果
需求:根据时间轴进行tab页面内容切换(时间轴需要滑动查看并选择) 实现思路: 结合swiper插件实现滑动显示效果 根据transform: translateX进行左侧切换效果的实现(具体实现cs ...
- 关于echart的x轴固定为0-24小时显示一天内的数据
需求: echart折线图横坐标x轴固定显示为0-1-2-3-...-23-24一共24小时的数据. 根据需求,我在网上以及echart官网,发现x轴无论type是类目轴还是时间,都是自动处理的,尤其 ...
- SmohanTimeLine.js 酷炫的时间轴效果
展示地址 点此下载 原文出处 一.参数说明 item : '.item', //项目元素 top : 30, //与下一行的间距 pointWidth : 22, //时间点宽度 cornerWidt ...
- jQuery时间轴插件:jQuery Timelinr
前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. ...
- Jquery实现的几款漂亮的时间轴
引言 最近项目中使用了很多前端的东西,对于我一个做后台开发的人员,这是一个很好的锻炼的机会.经过这段时间的学习,感觉前端的东西太多了,太强大了,做出来的东西太炫酷了.现在有很多开源的前端框架,做的都非 ...
- 看看我做的一款 时间轴 插件 timegliderJs
TimegliderJs 是一款基于jQuery的时间轴插件.完成后效果. 介绍 Timeglider JS是一个由javascript支持缩放,数据驱动的时间轴组件.非常适合显示项目历史,项目计划及 ...
- jQ效果:jQuery时间轴插件jQuery Timelinr
前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. ...
随机推荐
- P1403 [AHOI2005]约数研究 题解
转载luogu某位神犇的题解QAQ 这题重点在于一个公式: f(i)=n/i 至于公式是怎么推出来的,看我解释: 1-n的因子个数,可以看成共含有2因子的数的个数+含有3因子的数的个数……+含有n因子 ...
- 如何使用桥接模式使虚拟机VMware中的Redhat能上网
VMware中有三种网络连接方式可使其上网:桥接模式,NAT模式,host-only模式,下面详细介绍如何使用桥接模式使虚拟机中的Redhat连上互联网. Bridge(桥接)模式 在Bridge模式 ...
- Python之set方法
class set(object): """ set() -> new empty set object set(iterable) -> new set o ...
- hive lock命令的使用
1.hive锁表命令 hive> lock table t1 exclusive;锁表后不能对表进行操作 2.hive表解锁: hive> unlock table t1; 3.查看被锁的 ...
- ubuntu16.04运行ros的时候编译工作空间catkin_make出现的一个问题Could not find a package configuration file provided by
最近在进行ros里面的gazebo仿真之前需要对自己创建的工作空间进行编译,但是进行编译的时候输入catkin_make出现如下错误提示 查阅ROS问答社区之后发现两个比较有用的链接,如下 https ...
- holer实现外网访问本地tomcat
外网访问内网Tomcat 内网主机上安装了Tomcat,只能在局域网内访问,怎样从公网也能访问本地Tomcat? 本文将介绍使用holer实现的具体步骤. 1. 准备工作 1.1 安装Java 1.7 ...
- Hadoop学习------Hadoop安装方式之(二):伪分布部署
要想发挥Hadoop分布式.并行处理的优势,还须以分布式模式来部署运行Hadoop.单机模式是指Hadoop在单个节点上以单个进程的方式运行,伪分布模式是指在单个节点上运行NameNode.DataN ...
- 电脑小知识-win10
设置开机自启 一直想设置几个软件开机自启,尤其是文件搜索类和截图软件,不然每次打开电脑都要双击好几个工具,下面就记录一下如何设置开机自启. 1.先打开咱们的任务管理器,看看都有什么是开机自启的: 可以 ...
- leetcode 买卖股票问题
leetcode121 Best Time to Buy and Sell Stock 说白了找到最大的两组数之差即可 class Solution { public: int maxProfit(v ...
- Echarts 一个开源图表设计工具
一般来说,因有所需,方有所求.最近项目中有这方面的需求,用着感觉不错.特此记录!此处仅是一个简单的demo.官网地址:http://echarts.baidu.com/,相关文档.插件都有. 1.js ...