echarts 主题河流图themeRiver

2023-11-07 07:50

本文主要是介绍echarts 主题河流图themeRiver,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1、配置datadata: [["2015/11/09",10,"DQ"],["2015/11/10",10,"DQ"],[时间或主题的属性,事件或主题在某个时间点的值,事件或主题的名称]...]2、配置seriessingleAxis: {		axisTick: {},axisLabel: {show:true,formatter: '{yyyy}-{MM}-{dd}'},type: 'time',},series:[{type:'themeRiver',		主题河流图只能使用单坐标轴data,}]

效果图:
在这里插入图片描述

代码示例:

option = {tooltip: {trigger: 'axis',axisPointer: {type: 'line',lineStyle: {color: 'rgba(0,0,0,0.2)',width: 1,type: 'solid'}}},legend: {data: ['DQ', 'TY', 'SS', 'QG', 'SY', 'DD']},singleAxis: {top: 50,bottom: 50,axisTick: {},axisLabel: {show:true,formatter: '{yyyy}-{MM}-{dd}'},type: 'time',axisPointer: {animation: true,label: {show: true}},splitLine: {show: true,lineStyle: {type: 'dashed',opacity: 0.2}}},series: [{type: 'themeRiver',emphasis: {itemStyle: {shadowBlur: 20,shadowColor: 'rgba(0, 0, 0, 0.8)'}},data: [['2015/11/08',10,'DQ'],['2015/11/09',15,'DQ'],['2015/11/10',35,'DQ'],['2015/11/11',38,'DQ'],['2015/11/12',22,'DQ'],['2015/11/13',16,'DQ'],['2015/11/14',7,'DQ'],['2015/11/15',2,'DQ'],['2015/11/16',17,'DQ'],['2015/11/17',33,'DQ'],['2015/11/18',40,'DQ'],['2015/11/19',32,'DQ'],['2015/11/20',26,'DQ'],['2015/11/21',35,'DQ'],['2015/11/22',40,'DQ'],['2015/11/23',32,'DQ'],['2015/11/24',26,'DQ'],['2015/11/25',22,'DQ'],['2015/11/26',16,'DQ'],['2015/11/27',22,'DQ'],['2015/11/28',10,'DQ'],['2015/11/08',35,'TY'],['2015/11/09',36,'TY'],['2015/11/10',37,'TY'],['2015/11/11',22,'TY'],['2015/11/12',24,'TY'],['2015/11/13',26,'TY'],['2015/11/14',34,'TY'],['2015/11/15',21,'TY'],['2015/11/16',18,'TY'],['2015/11/17',45,'TY'],['2015/11/18',32,'TY'],['2015/11/19',35,'TY'],['2015/11/20',30,'TY'],['2015/11/21',28,'TY'],['2015/11/22',27,'TY'],['2015/11/23',26,'TY'],['2015/11/24',15,'TY'],['2015/11/25',30,'TY'],['2015/11/26',35,'TY'],['2015/11/27',42,'TY'],['2015/11/28',42,'TY'],['2015/11/08',21,'SS'],['2015/11/09',25,'SS'],['2015/11/10',27,'SS'],['2015/11/11',23,'SS'],['2015/11/12',24,'SS'],['2015/11/13',21,'SS'],['2015/11/14',35,'SS'],['2015/11/15',39,'SS'],['2015/11/16',40,'SS'],['2015/11/17',36,'SS'],['2015/11/18',33,'SS'],['2015/11/19',43,'SS'],['2015/11/20',40,'SS'],['2015/11/21',34,'SS'],['2015/11/22',28,'SS'],['2015/11/23',26,'SS'],['2015/11/24',37,'SS'],['2015/11/25',41,'SS'],['2015/11/26',46,'SS'],['2015/11/27',47,'SS'],['2015/11/28',41,'SS'],['2015/11/08',10,'QG'],['2015/11/09',15,'QG'],['2015/11/10',35,'QG'],['2015/11/11',38,'QG'],['2015/11/12',22,'QG'],['2015/11/13',16,'QG'],['2015/11/14',7,'QG'],['2015/11/15',2,'QG'],['2015/11/16',17,'QG'],['2015/11/17',33,'QG'],['2015/11/18',40,'QG'],['2015/11/19',32,'QG'],['2015/11/20',26,'QG'],['2015/11/21',35,'QG'],['2015/11/22',40,'QG'],['2015/11/23',32,'QG'],['2015/11/24',26,'QG'],['2015/11/25',22,'QG'],['2015/11/26',16,'QG'],['2015/11/27',22,'QG'],['2015/11/28',10,'QG'],['2015/11/08',10,'SY'],['2015/11/09',15,'SY'],['2015/11/10',35,'SY'],['2015/11/11',38,'SY'],['2015/11/12',22,'SY'],['2015/11/13',16,'SY'],['2015/11/14',7,'SY'],['2015/11/15',2,'SY'],['2015/11/16',17,'SY'],['2015/11/17',33,'SY'],['2015/11/18',40,'SY'],['2015/11/19',32,'SY'],['2015/11/20',26,'SY'],['2015/11/21',35,'SY'],['2015/11/22',4,'SY'],['2015/11/23',32,'SY'],['2015/11/24',26,'SY'],['2015/11/25',22,'SY'],['2015/11/26',16,'SY'],['2015/11/27',22,'SY'],['2015/11/28',10,'SY'],['2015/11/08',10,'DD'],['2015/11/09',15,'DD'],['2015/11/10',35,'DD'],['2015/11/11',38,'DD'],['2015/11/12',22,'DD'],['2015/11/13',16,'DD'],['2015/11/14',7,'DD'],['2015/11/15',2,'DD'],['2015/11/16',17,'DD'],['2015/11/17',33,'DD'],['2015/11/18',4,'DD'],['2015/11/19',32,'DD'],['2015/11/20',26,'DD'],['2015/11/21',35,'DD'],['2015/11/22',40,'DD'],['2015/11/23',32,'DD'],['2015/11/24',26,'DD'],['2015/11/25',22,'DD'],['2015/11/26',16,'DD'],['2015/11/27',22,'DD'],['2015/11/28',10,'DD']]}]
};

这篇关于echarts 主题河流图themeRiver的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/362245

相关文章

基于stm32的河流检测系统-单片机毕业设计

文章目录 前言资料获取设计介绍功能介绍具体实现截图参考文献设计获取 前言 💗博主介绍:✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师,一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们电子相关专业的大学生,希望您们都共创辉煌!✌💗 👇🏻 精彩专栏 推荐订阅👇🏻 单片机设计精品

VitePress 自定义主题:打造专属文档网站

VitePress 是一个基于 Vite 和 Vue 3 的静态网站生成器,特别适用于撰写文档。它不仅提供了默认的主题,还允许开发者创建和使用自定义主题,以满足特定的设计和功能需求。本文将详细介绍如何创建、使用及分发 VitePress 自定义主题,并通过实例代码进行演示。 一、创建自定义主题 1. 主题文件结构 要启用自定义主题,你需要在项目根目录下的 .vitepress 文件夹中创建一

ExtJS之实现华丽的皮肤主题更换

extjs的默认皮肤很好看,但是我们还可以变换样式切换其他皮肤.   1.直接添加其他css文件换肤.好多皮肤上网就可以收到的   如皮肤文件:xtheme-olive.zip下载   把皮肤文件解压,把css文件(如xtheme-olive.css)拷贝到extjs的resources目录下css文件夹里面:      2. 解压皮肤文件,把里面的相应的 image文件夹下的目

Echarts使用笔记--饼图,柱状图

开始做前端了,感觉自己是要变成全栈工程师了。。。 今天使用了echart,用之前觉得好高大上好厉害,肯定很复杂。用了以后才发现,使用起来超简单,当然,精通很难,里面的各种配置太多了,本文记录一下自己用到的东西。 echart使用 现在直接引用js文件就可以了 <script src="echarts.min.js"></script> echart组件需要在一个宽高固定的DOM里才能显示

Kafka【十二】消费者拉取主题分区的分配策略

【1】消费者组、leader和follower 消费者想要拉取主题分区的数据,首先必须要加入到一个组中。 但是一个组中有多个消费者的话,那么每一个消费者该如何消费呢,是不是像图中一样的消费策略呢?如果是的话,那假设消费者组中只有2个消费者或有4个消费者,和分区的数量不匹配,怎么办? 所以这里,我们需要学习Kafka中基本的消费者组中的消费者和分区之间的分配规则: 同一个消费者组的消费者都订

【python web】Flask+Echarts 实现动图图表

flask 是python web开发的微框架,Echarts酷炫的功能主要是javascript起作用,将两者结合起来,发挥的作用更大。下面将Echarts嵌套进Flask的html模板中。 项目结构: 打开demo.py运行,点击console中的链接http://127.0.0.1:5000/ 就可以看到我们想要的动态图表。 demo.py #coding:utf-8fro

Android style(样式), theme(主题)资源

本文内容摘自《疯狂Android讲义 第三版-李刚著作》 样式和主题资源都用于对Android应用进行“美化”,只要充分利用Android应用的样式和主题资源,开发者就可以开发出各种风格的Android应用。 样式资源(style): 如果我们经常需要对某个类型的组件指定大致相似的格式,比如字体,颜色,背景色等,如果次都要为View组件重复指定这些属性,无疑会有大量的工作量,而且不利于项目后

零成本搞定静态博客——十分钟安装hugo与主题

文章目录 hugo介绍hugo安装与使用方式一:新建站点自建主题方式二:新建站点使用系统推荐的主题 hugo介绍 通过 Hugo 你可以快速搭建你的静态网站,比如博客系统、文档介绍、公司主页、产品介绍等等。相对于其他静态网站生成器来说,Hugo 具备如下特点: 1. 极快的页面编译生成速度。( ~1 ms 每页面) 2. 完全跨平台支持,可以运行在 Mac OS X, Linux

echarts 多个3D柱状图

图片样式: 代码实现: <template><div :class="className" :style="{height:height,width:width}" /></template><script>require("echarts/theme/sakura"); // echarts themeexport default {props: {className: {typ