Echart timeline 高级用法!!!!
一、前言
在使用 echart timeline 来着图形可视化时,我使用的和官网也不一样,因为我有使用映射关系。比如我将 no 映射到X轴,将 d4 映射到Y轴。
二、参考
echart官网:https://www.echartsjs.com/examples/zh/editor.html?c=mix-timeline-finance
三、实现
重点部分我已经在代码中标注,您可以复制代码到echart实例中查看。有不懂我们在沟通,相互学习。
option = {
baseOption: {
timeline: {
axisType: 'category',
show: true,
autoPlay: true,
playInterval: 1000,
data: ["2019年01月02日", "2019年01月03日", "2019年01月04日", "2019年01月05日"]
},
grid: {
containLabel: true
},
"xAxis": [{
"dataIndex": "No",
"map": "No",
"name": "测点",
"type": "category",
"showSplitLine": false,
"showSplitArea": false,
"axisTick": {
"alignWithLabel": true
},
"splitLine": {
"show": false
},
"splitArea": {
"show": false
},
"axisLine": {
"onZero": false
},
"axisLabel": {}
}],
"yAxis": [{
"showSplitLine": true,
"name": "温度",
"type": "value",
"position": "left",
"offset": 0,
"measure": "",
"showSplitArea": false,
"splitNumber": "5",
"splitNumbers": "10",
"splitLine": {
"show": true
},
"splitArea": {
"show": false
},
"axisLine": {
"lineStyle": {
"color": "#c23531"
}
},
"axisLabel": {
"formatter": "{value} "
}
}],
"legend": {
"type": "scroll",
"orient": "horizontal",
"left": 50,
"right": 50,
"y": 30,
"data": [{
"name": "温度"
}],
"icon": "roundRect"
},
series: [{
"name": "温度",
"no": "",
"type": "line",
"yAxisIndex": 0,
"xAxisIndex": 0,
"color": "#c23531",
"lineStyle": {
"width": 2
},
"dimensions": ["no", "d4"],
"encode": {
"x": "no",
"y": "d4"
},
"instrumentNo": "",
"x": 0,
"y": 0,
"typeShow": "线状图",
"dataIndex": "温度",
"map": "d4",
"xValue": "no",
"yValue": "d4",
"showMax": false,
"showMin": false,
"showAvg": false,
"showArea": false,
"smooth": true,
"connectNulls": true,
"width": 2,
"xShow": "测点",
"yShow": "温度"
},
],
tooltip: {}
},
//变量则写在options中
options: [{
"title": {
"text": "2019年01月02日分布图"
},
"dataset": {
"source": [{
"d4": 12.762600000000008,
"no": "ASX1",
"measureTime": "2019-01-02T00:00:00+08:00"
},
{
"d4": 13.355999999999986,
"no": "ASX3",
"measureTime": "2019-01-02T00:00:00+08:00"
},
{
"d4": 13.689899999999954,
"no": "ASX2",
"measureTime": "2019-01-02T00:00:00+08:00"
},
{
"d4": 13.40370000000001,
"no": "ASX4",
"measureTime": "2019-01-02T00:00:00+08:00"
}]
}
},
{
"title": {
"text": "2019年01月03日分布图"
},
"dataset": {
"source": [{
"d4": 13.30829999999996,
"no": "ASX4",
"measureTime": "2019-01-03T00:00:00+08:00"
},
{
"d4": 13.689899999999954,
"no": "ASX2",
"measureTime": "2019-01-03T00:00:00+08:00"
},
{
"d4": 13.260600000000004,
"no": "ASX3",
"measureTime": "2019-01-03T00:00:00+08:00"
},
{
"d4": 12.762600000000008,
"no": "ASX1",
"measureTime": "2019-01-03T00:00:00+08:00"
}]
}
},
{
"title": {
"text": "2019年01月04日分布图"
},
"dataset": {
"source": [{
"d4": 12.667000000000028,
"no": "ASX1",
"measureTime": "2019-01-04T00:00:00+08:00"
},
{
"d4": 13.260600000000004,
"no": "ASX3",
"measureTime": "2019-01-04T00:00:00+08:00"
},
{
"d4": 13.594499999999972,
"no": "ASX2",
"measureTime": "2019-01-04T00:00:00+08:00"
},
{
"d4": 13.30829999999996,
"no": "ASX4",
"measureTime": "2019-01-04T00:00:00+08:00"
}]
}
},
{
"title": {
"text": "2019年01月05日分布图"
},
"dataset": {
"source": [{
"d4": 13.21289999999998,
"no": "ASX4",
"measureTime": "2019-01-05T00:00:00+08:00"
},
{
"d4": 12.667000000000028,
"no": "ASX1",
"measureTime": "2019-01-05T00:00:00+08:00"
},
{
"d4": 13.594499999999972,
"no": "ASX2",
"measureTime": "2019-01-05T00:00:00+08:00"
},
{
"d4": 13.165200000000024,
"no": "ASX3",
"measureTime": "2019-01-05T00:00:00+08:00"
}]
}
}]
}
到此为止!
Echart timeline 高级用法!!!!的更多相关文章
- Python中第三方库Requests库的高级用法详解
Python中第三方库Requests库的高级用法详解 虽然Python的标准库中urllib2模块已经包含了平常我们使用的大多数功能,但是它的API使用起来让人实在感觉不好.它已经不适合现在的时代, ...
- Visual Studio 宏的高级用法
因为自 Visual Studio 2012 开始,微软已经取消了对宏的支持,所以本篇文章所述内容只适用于 Visual Studio 2010 或更早期版本的 VS. 在上一篇中,我已经介绍了如何编 ...
- SolrNet高级用法(分页、Facet查询、任意分组)
前言 如果你在系统中用到了Solr的话,那么肯定会碰到从Solr中反推数据的需求,基于数据库数据生产索引后,那么Solr索引的数据相对准确,在电商需求中经常会碰到菜单.导航分类(比如电脑.PC的话会有 ...
- sqlalchemy(二)高级用法
sqlalchemy(二)高级用法 本文将介绍sqlalchemy的高级用法. 外键以及relationship 首先创建数据库,在这里一个user对应多个address,因此需要在address上增 ...
- Solr学习总结(六)SolrNet的高级用法(复杂查询,分页,高亮,Facet查询)
上一篇,讲到了SolrNet的基本用法及CURD,这个算是SolrNet 的入门知识介绍吧,昨天写完之后,有朋友评论说,这些感觉都被写烂了.没错,这些基本的用法,在网上百度,资料肯定一大堆,有一些写的 ...
- 再谈Newtonsoft.Json高级用法
上一篇Newtonsoft.Json高级用法发布以后收到挺多回复的,本篇将分享几点挺有用的知识点和最近项目中用到的一个新点进行说明,做为对上篇文章的补充. 阅读目录 动态改变属性序列化名称 枚举值序列 ...
- Jquery remove 高级用法
Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...
- Newtonsoft.Json高级用法(转)
手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多次修改中,实体添加了很多字段用于中间计算或者存储,然后最终用Newtonsoft.Json进行序列化返回数 ...
- redis(二)高级用法
redis(二)高级用法 事务 redis的事务是一组命令的集合.事务同命令一样都是redis的最小执行单元,一个事务中的命令要么执行要么都不执行. 首先需要multi命令来开始事务,用exec命令来 ...
随机推荐
- js 常见数组算法
数组方法概述 1.不改变原数组,返回新数组 concat() 连接两个或多个数组,两边的原始数组都不会变化,返回被连接数组的一个副本. join() 把数组中所有元素放入一个字符串中,返回字符串. s ...
- 37、数据源之通用的load和save操作
一.通用的load和save操作 1.概述 对于Spark SQL的DataFrame来说,无论是从什么数据源创建出来的DataFrame,都有一些共同的load和save操作. load操作主要用于 ...
- Linux安装配置JDK与卸载
最近在Linux系统部署门户,安装Oracle,导入dmp,JDK等等,遇到一大堆问题,解决后特有一番小小成就感,哇哈哈!在这里记录一下遇到问题: 官网下载JDK压缩包( .tar.gz ):http ...
- Angular动态组件
一.主页面: app.component.html: <button (click)="load();">动态</button> 2<div #dom ...
- 【一起来烧脑】底层HTTP深入笔记
[外链图片转存失败(img-0GQ8QDNb-1563568792102)(https://upload-images.jianshu.io/upload_images/11158618-5bc7a2 ...
- Codeforces Round #383 D
传送门 Description Arpa has a rooted tree (connected acyclic graph) consisting of n vertices. The verti ...
- Cisco实验图
- Redis 3.2.100 配置注意
新装服务器外网连接报错 /Interactive, Initializing/NotStarted, last: NONE, origin: BeginConnectAsync, outstandin ...
- 【多线程与并发】Java中的12个原子操作类
从JDK1.5开始,Java提供了java.util.concurrent.atomic包,该包中的原子操作类提供了一种使用简单.性能高效(使用CAS操作,无需加锁).线程安全地更新一个变量的方式. ...
- Oracle语法 及 SQL题目(二)
目录 课例复制 思考题四 解题思路 思考题五 解题思路 课例复制 思考题四 最近,经过你的努力,你得到了一份工作,成为了百货公司的一位经理. 到位后,你发现你的销售数据库中有两张表,一个是商店促销时间 ...