html河流效果,ECharts系列:主题河流图
在ECharts系列中,使用series[i]-themeRiver设置主题河流图,主题河流图是一种特殊的流图,它主要用来表示事件或主题等在一段时间内的变化。
示例:
主题河流图可视编码
主题河流中不同颜色的条带状河流分支编码了不同的事件或主题,河流分支的宽度编码了原数据集中的value值。
此外,原数据集中的时间属性,映射到单个时间轴上。
主题河流图属性type
在ECharts中主题河流图的type属性值为'themeRiver'。zlevel
所有图形的 zlevel 值,默认为 0。
zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。z
组件的所有图形的z值,默认为 2。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
z相比zlevel优先级更低,而且不会创建新的 Canvas。left
thmemRiver组件离容器左侧的距离,默认为 5%(下述的top、right、bottom属性的默认值也为 5%)。
left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'。
如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。top
thmemRiver组件离容器上侧的距离。
top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'。
如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。right
thmemRiver组件离容器右侧的距离。
right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。bottom
thmemRiver组件离容器下侧的距离。
bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。width
thmemRiver组件的宽度。height
thmemRiver组件的高度。
注意: 整个主题河流view的位置信息复用了单个时间轴的位置信息,即left,top,right,bottom。coordinateSystem
坐标系统,主题河流用的是单个的时间轴。默认为single。boundaryGap
图中与坐标轴正交的方向的边界间隙,设置该值是为了调整图的位置,使其尽量处于屏幕的正中间,避免处于屏幕的上方或下方。默认值为["10%", "10%"]。singleAxisIndex
单个时间轴的index,默认值为0,因为只有单个轴。label
label 描述了主题河流中每个带状河流分支对应的文本标签的样式。itemStyle
主题河流中每个带状河流分支的样式。data[i]
系列中的数据内容数组。数组项通常为具体的数据项。
通常来说,数据用一个二维数组表示。如下,每一列被称为一个『维度』。series: [{
data: [
// 维度X 维度Y 其他维度 ...
[ 3.4, 4.5, 15, 43],
[ 4.2, 2.3, 20, 91],
[ 10.8, 9.5, 30, 18],
[ 7.2, 8.8, 18, 57]
]
}]
在 直角坐标系 (grid) 中『维度X』和『维度Y』会默认对应于 xAxis 和 yAxis。
在 极坐标系 (polar) 中『维度X』和『维度Y』会默认对应于 radiusAxis 和 angleAxis。
后面的其他维度是可选的,可以在别处被使用,例如:
在 visualMap 中可以将一个或多个维度映射到颜色,大小等多个图形属性上。
在 series.symbolSize 中可以使用回调函数,基于某个维度得到 symbolSize 值。
使用 tooltip.formatter 或 series.label.normal.formatter 可以把其他维度的值展示出来。
特别地,当只有一个轴为类目轴(axis.type 为 'category')的时候,数据可以简化用一个一维数组表示。例如:xAxis: {
data: ['a', 'b', 'm', 'n']
},
series: [{
// 与 xAxis.data 一一对应。
data: [23, 44, 55, 19]
// 它其实是下面这种形式的简化:
// data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]
『值』与 轴类型 的关系:
当某维度对应于数值轴(axis.type 为 'value' 或者 'log')的时候:
其值可以为 number(例如 12)。(也可以兼容 string 形式的 number,例如 '12')
当某维度对应于类目轴(axis.type 为 'category')的时候:
其值须为类目的『序数』(从 0 开始)或者类目的『字符串值』。例如: xAxis: {
type: 'category',
data: ['星期一', '星期二', '星期三', '星期四']
},
yAxis: {
type: 'category',
data: ['a', 'b', 'm', 'n', 'p', 'q']
},
series: [{
data: [
// xAxis yAxis
[ 0, 0, 2 ], // 意思是此点位于 xAxis: '星期一', yAxis: 'a'。
[ '星期四', 2, 1 ], // 意思是此点位于 xAxis: '星期四', yAxis: 'm'。
[ 2, 'p', 2 ], // 意思是此点位于 xAxis: '星期三', yAxis: 'p'。
[ 3, 3, 5 ]
]
}]双类目轴的示例可以参考 Github Punchcard 示例。
当某维度对应于时间轴(type 为 'time')的时候,值可以为:
一个时间戳,如 1484141700832,表示 UTC 时间。
或者字符串形式的时间描述:
ISO 8601 的子集,只包含这些形式(这几种格式,除非指明时区,否则均表示本地时间,与 moment 一致):
部分年月日时间: '2012-03', '2012-03-01', '2012-03-01 05', '2012-03-01 05:06'.
使用 'T' 或空格分割: '2012-03-01T12:22:33.123', '2012-03-01 12:22:33.123'.
时区设定: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00'.
其他的时间字符串,包括(均表示本地时间): '2012', '2012-3-1', '2012/3/1', '2012/03/01', '2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/12 2:05:08.123'
或者用户自行初始化的 Date 实例:
注意,用户自行初始化 Date 实例的时候,浏览器的行为有差异,不同字符串的表示也不同。
例如:在 chrome 中,new Date('2012-01-01') 表示 UTC 时间的 2012 年 1 月 1 日,而 new Date('2012-1-1') 和 new Date('2012/01/01') 表示本地时间的 2012 年 1 月 1 日。在 safari 中,不支持 new Date('2012-1-1')这种表示方法。
所以,使用 new Date(dataString) 时,可使用第三方库解析(如 moment),或者使用 echarts.number.parseDate,或者参见 这里。
当需要对个别数据进行个性化定义时:
数组项可用对象,其中的 value 像表示具体的数值,如:[
12,
34,
{
value : 56,
//自定义标签样式,仅对该数据项有效
label: {},
//自定义特殊 itemStyle,仅对该数据项有效
itemStyle:{}
},
10
]
// 或
[
[12, 33],
[34, 313],
{
value: [56, 44],
label: {},
itemStyle:{}
},
[10, 33]
]
空值:
当某数据不存在时(ps:不存在不代表值为 0),可以用 '-' 或者 null 或者 undefined 或者 NaN 表示。
例如,无数据在折线图中可表现为该点是断开的,在其它图中可表示为图形不存在。tooltip
本系列特定的 tooltip 设定。
html河流效果,ECharts系列:主题河流图相关推荐
- python画河流图_《Python数据可视化之Matplotlib与Pyecharts》之主题河流图
11.7.2 不同类型商品销售情况分析 为了分析该企业不同类型商品的销售额情况,绘制了不同商品销售额的主题河流图,Python代码如下: # -*- coding: utf-8 -*- # -*- ...
- pyecharts丨将主题的演变嵌入时间长河中——主题河流图
主题河流图 终于是好像比较高级的图了hhhh但其实早在2008年都有比较出色的运用了, 2008年2月,<纽约时报>发布了一个最典型.最著名的河流图的例子<电影的衰退和流动:过去20 ...
- Python数据可视化 Pyecharts 制作 ThemeRiver 主题河流图
大家好,我是Mr数据杨.设想一下,基本设置就像各个国家的基础设施,将三个国家的总况一览无遗,这为了解三国整体情况做好铺垫.而坐标轴设置,就如同时间线,沿着时间轴展现出三国历史的进程,决定了整个图表的时 ...
- python绘制主题河流图
主题河流图一般在文本中用到的不多,但通过这种时间序列关系,我们能够分析一些特定的词在全文中的分布规律,这样有助于我们理解全文内容. import re import jieba import pand ...
- 178Echarts - 主题河流图(ThemeRiver)
效果图 源代码 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
- D3 二维图表的绘制系列(二十)河流图
上一篇: 封闭图 https://blog.csdn.net/zjw_python/article/details/98591118 下一篇: 仪表盘图 https://blog.csdn.net/z ...
- 三维地图前端arcgis_【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制...
概述 前面两篇文章通过扩展EchartsLayer.js这个图层类,实现了使用ArcGIS JS API和eCharts,在二维和三维场景下绘制迁徙图和散点图.这篇文章继续通过绘制网络路径图的例子,再 ...
- ECharts系列 - 柱状图(条形图)实例一
ECharts主页: http://echarts.baidu.com/index.html ECharts-2.1.8下载地址: http://echarts.baidu.com/build/e ...
- 【ECharts系列|04可视化大屏】ECharts可视化经典案例总结
收集整理一些ECharts实现可视化大屏效果的一些经典案例,方便在工作的时候及时的响应客户,及修改展示,根据业务需求在此基础修改即可. 第一篇为Echarts入门文档,如果没有Echarts基础,理解 ...
最新文章
- 导师:顶会论文3天都复现不出来?你退学吧!
- 如何用#define宏定义多行函数
- 使用VS2008进行WEB负载测试
- 【Flink】Flink1.11.2 on YARN滚动日志配置
- 科大讯飞语音识别demo
- Vue的父子组件通信(转载)
- android系统证书管理,抓包Android 7.0+将ca证书导入到系统(设置为系统证书)
- 百度html的json解析,百度调用API返回json数据解析
- 制作 maxdos 启动盘 Linux 安装盘
- (二)动态白盒测试(含逻辑覆盖例子)
- NYOJ 17 (最长单调递增子序列) O (n*n) + O(n*lgn)
- matlab显示串联矩阵的维度不一致,串联的矩阵的维度不一致。
- 多玩网总裁李学凌:在腾讯阴影下
- 软件工程师职业规划_我如何在11个月内转变职业以成为软件工程师(以及如何也可以)...
- 了解车辆驾驶行为、成功验证C-V2X技术
- 4.5 路径MTU发现
- Android平台交叉编译流程
- HTML是一种标识语音,HTML实现网页端语音输入(语音识别,语义理解,olami)
- ZLG震撼发布开源GUI引擎AWTK
- Python中最全的窗口操作,如窗口最大化、最小化、窗口置顶、获取缩放比例等