EChart.js 笔记二
交互组件
Echart.js 中交互组件比较多。例如: legend(图例)、title(标题组件)、visualMap(视觉映射组件)、dataZoom(数据缩放组件)、timeline(时间线组件)。
数据缩放组件 - dataZoom
支持 grid(直角坐标系)、 polar(极坐标系)。
先支持单一横轴:
- option = {
- xAxis: {
- type: 'value'
- },
- yAxis: {
- type: 'value'
- },
- dataZoom: [
- { // 这个dataZoom组件,默认控制x轴。
- type: 'slider', // 这个 dataZoom 组件是 slider(滑动) 型 dataZoom 组件
- start: 10, // 左边在 10% 的位置。
- end: 60 // 右边在 60% 的位置。
- }
- ],
- series: [
- {
- type: 'scatter', // 这是个『散点图』
- itemStyle: {
- opacity: 0.8
- },
- symbolSize: function (val) { // 控制散点大小
- return val[2] * 40;
- },
- data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
- }
- ]
- }
这样就可以完成横向拖动观察数据的功能;
优化:在表格中用滚轮完成缩放,只需要更新 dataZoom 中的设置即可:
- option = {
- ...,
- dataZoom: [
- { // 这个dataZoom组件,默认控制x轴。
- type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
- start: 10, // 左边在 10% 的位置。
- end: 60 // 右边在 60% 的位置。
- },
- { // 这个dataZoom组件,也控制x轴。
- type: 'inside', // 这个 dataZoom 组件是 inside(内部鼠标滚轮) 型 dataZoom 组件
- start: 10, // 左边在 10% 的位置。
- end: 60 // 右边在 60% 的位置。
- }
- ],
- ...
- }
如果想要添加对 Y 轴的支持,更新 dataZoom 中 yAxisIndex 即可:
- option = {
- ...,
- dataZoom: [
- {
- type: 'slider',
- xAxisIndex: 0,
- start: 10,
- end: 60
- },
- {
- type: 'inside',
- xAxisIndex: 0,
- start: 10,
- end: 60
- },
- {
- type: 'slider',
- yAxisIndex: 0,
- start: 30,
- end: 80
- },
- {
- type: 'inside',
- yAxisIndex: 0,
- start: 30,
- end: 80
- }
- ],
- ...
- }
EChart.js 笔记二的更多相关文章
- EChart.js 笔记一
一直对数据可视化比较感兴趣,当年 Alibaba 年报晚会上的大屏显示可谓是技惊四座,够震撼,将数据之美展现得淋漓尽致. 国内的前端数据可视化插件中,echart.js 算是热度很高的,也容易上手,算 ...
- 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...
- 纯JS实现KeyboardNav(学习笔记)二
纯JS实现KeyboardNav(学习笔记)二 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码 ...
- jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}
笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...
- JS--我发现,原来你是这样的JS(二)(基础概念--躯壳篇--不妨从中文角度看js)
一.介绍 这是红宝书(JavaScript高级程序设计 3版)的读书笔记第二篇(基础概念--躯壳篇),有着部分第三章的知识内容,当然其中还有我个人的理解. 红宝书这本书可以说是难啃的,要看完不容易,挺 ...
- python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码
python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码 python的json.dumps方法默认会输出成这种格式"\u535a\u ...
- webpack笔记二 管理资源
webpack笔记二 管理资源 webpack最出色的功能之一就是除了引入JavaScript,还可以通过loader引入任何其它类型的文件. 加载CSS 为了在JavaScript模块中import ...
- amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...
- amazeui学习笔记二(进阶开发4)--JavaScript规范Rules
amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...
随机推荐
- robotframework下添加python文件作为Library(可以创建自己想实现的接口)
1.在robotframework中要想实现自己的接口,例如:print,还有图片内容比对函数.可以自己在项目中加第三方库 2.创建后的内容如下: 3.在测试用例中引用:
- Edusoho之LNMP环境搭建
1.更新 sudo apt-get update sudo apt-get upgrade 2.安装Nginx sudo apt-get install nginx 3.安装php sudo apt- ...
- AT1219 歴史の研究
附带权值的类区间众数问题?不是很好策啊 发现题目没有强制在线,而且也只有询问操作,那么可以考虑莫队 但是这里的莫队有一个很显著的特征,插入的时候很好维护答案,但是删除的时候不好回退 那么有没有什么办法 ...
- Spring MVC自定义403,404,500状态码返回页面
代码 HTTP状态码干货:http://tool.oschina.net/commons?type=5 import org.springframework.boot.web.servlet.erro ...
- 体验usually.js的管道函数——pipe函数
体验usually.js的管道函数——pipe函数 usually.js 是一个面向现代 Web 开发的 JavaScript 函数库,基于 ES6 开发.最新版本2.4.1,最新版本usually. ...
- RNG牛掰!
2018-05-21 RNG牛掰!Uzi圆梦! 不说了,先去哭了! 2018-07-08 洲际赛后更新,RNG依然牛逼! 2018-08-30 亚运后后更新,UZI加油! 2018-10-22 继续加 ...
- Win10 Anaconda下TensorFlow-GPU环境搭建详细教程(包含CUDA+cuDNN安装过程)
目录 前言 第一步:安装Anaconda 1.下载和安装 2.配置Anaconda环境变量 第二步:安装TensorFlow-GPU 1.创建conda环境 2.激活环境 3.安装tensorflow ...
- vue better-scroll用法
滚动位置固定:在vue中通过路由切换页面时组件会自动滚动到顶部,需要监听滚动行为才能让滚动位置固定,better-scroll解决了这个问题. 常用效果:移动端很常见的效果,当滑动右边部分的时候,左边 ...
- 【fetch跨域请求】cors
当使用fetch 发起跨域请求时,CORS(跨域资源共享Cross-origin resource sharing) 请求fetch const body = {name:"Good boy ...
- Python_生成器函数进阶_39
def generator(): print(123) content = yield 1 #content接收的是send传的值 print('=======',content) print(456 ...