html河流效果,ECharts系列:主题河流图

本文介绍了ECharts中如何设置主题河流图,一种用于展示事件或主题随时间变化的图表。通过series[type='themeRiver']配置,利用颜色、宽度来表示不同事件和价值,时间映射到单一时间轴。此外,讨论了组件的zlevel、z、left、top等属性,以及数据格式和坐标系统的使用。
摘要由CSDN通过智能技术生成

在ECharts系列中,使用series[i]-themeRiver设置主题河流图,主题河流图是一种特殊的流图,它主要用来表示事件或主题等在一段时间内的变化。

示例:

d94d35c1a6f3920425289444b9dbb6f5.png

主题河流图可视编码

主题河流中不同颜色的条带状河流分支编码了不同的事件或主题,河流分支的宽度编码了原数据集中的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%)。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts中,要给地增加河流,可以通过Geo组件和自定义系列来实现。下面是一种实现方式: 1. 首先,需要在ECharts中引入Geo组件,该组件用于绘制地。可以通过以下代码引入Geo组件: ```javascript import echarts from 'echarts'; import 'echarts/extension/bmap/bmap'; import 'echarts/map/js/world'; import 'echarts/map/js/china'; import 'echarts/map/js/province/*'; // 引入需要的省份地 ``` 2. 接下来,需要定义一个自定义系列来绘制河流。可以通过以下代码定义一个自定义系列: ```javascript echarts.registerSeriesType('customRiver', echarts.extendSeriesModel({ type: 'series.customRiver', visualColorAccessPath: 'lineStyle.normal.color', optionUpdated: function () { // ... }, defaultOption: { // ... } })); ``` 3. 然后,在ECharts的配置项中,使用Geo组件绘制地,并在自定义系列中添加河流数据。可以通过以下代码实现: ```javascript option = { geo: { map: 'china', // 地类型 roam: true, // 是否开启鼠标缩放和平移漫游 itemStyle: { areaColor: '#f3f3f3', // 地区域的颜色 borderColor: '#999', // 地边界线的颜色 borderWidth: 0.5 // 地边界线的宽度 }, emphasis: { itemStyle: { areaColor: '#ccc' // 高亮时地区域的颜色 } } }, series: [ { type: 'customRiver', coordinateSystem: 'geo', // 使用Geo组件绘制 data: [ // 河流数据 // ... ], lineStyle: { normal: { color: '#00f', // 河流线的颜色 width: 1 // 河流线的宽度 } } } ] }; ``` 以上是一种在ECharts中给地增加河流的实现方式。你可以根据自己的需求和数据进行相应的调整和修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值