echarts 通用线性渐变堆叠面积图

news2024/10/6 2:26:41

echarts 通用线性渐变堆叠面积图

在这里插入图片描述

		getLineData2() {
			const myChart = echarts.init(this.$refs.chartDom);
			const option = {
				tooltip: {
					trigger: 'axis',
				},
				legend: {
					show: false,
					textStyle: {
						fontSize: 14, //字体大小
						color: '#ffffff', //字体颜色
					},
					data: ['AAA', 'BBB'],
				},
				grid: {
					show: true,
					left: '10%',
					top: '15%',
					right: '10%',
					bottom: '13%',
				},
				xAxis: {
					data: ['项目1', '项目2', '项目3', '项目4', '项目5', '项目6'],
					axisLabel: {
						//y轴文字的配置
						textStyle: {
							color: '#ffffff',
						},
					},
					axisLine: {
						show: true,
						// 坐标轴轴线样式设置
						lineStyle: {
							color: '#335B7E',
						},
					},
				},
				yAxis: [
					{
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#335B7E',
							},
						},

						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: '#ffffff',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#335B7E',
							},
						},
					},
					{
						type: 'value',
						splitLine: {
							show: false,
						},
						axisLabel: {
							formatter: '{value} %',
							//y轴文字的配置
							textStyle: {
								color: '#ffffff',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#335B7E',
							},
						},
					},
				],
				series: [
					{
						name: 'AAA',
						type: 'line',
						smooth: true,
						stack: 'Total',
						lineStyle: {
							width: 1,
							color: '#39BFFA',
						},
						areaStyle: {
							opacity: 0.8,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: 'rgb(128, 255, 165)',
								},
								{
									offset: 1,
									color: 'rgb(1, 191, 236)',
								},
							]),
						},
						emphasis: {
							focus: 'series',
						},
						data: [20, 12, 20, 34, 90, 30],
					},
					{
						name: 'BBB',
						type: 'line',
						stack: 'Total',
						lineStyle: {
							width: 1,
							color: '#39BFFA',
						},
						smooth: true,
						areaStyle: {
							opacity: 0.8,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: 'rgb(0, 221, 255)',
								},
								{
									offset: 1,
									color: 'rgb(77, 119, 255)',
								},
							]),
						},
						emphasis: {
							focus: 'series',
						},

						data: [10, 52, 200, 334, 390, 330],
					},
				],
			};

			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1258112.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

注意力机制(Q,K,V)基本概念

文章目录 一、注意力提示1.1概念1.2生活中的注意力提示1.3注意力机制基本框架小结 二、注意力汇聚2.1概念2.2非参注意力汇聚2.2.1平均汇聚2.2.2Nadaraya-Waston核回归 2.3通用注意力汇聚公式2.4带参数注意力汇聚小结 三、注意力评分函数3.1概念3.2例子 四、遮蔽softmax三四小结…

echarts 自定义提示样式

在setOption中添加自定义样式 tooltip: {trigger: axis,formatter: (params)> {// console.log(params);var result if(params[0] && params[1]){result 发电量对比<div style"background:#F4F7FC;padding:5px;margin:5px 0px;border-radius:6px"&…

《微信小程序开发从入门到实战》学习三十二

3.5 开发我的投票页面与使用tab栏切换页面 实现很简单&#xff0c;简单的列表页面&#xff0c;但是需要加在tabBar那里&#xff0c;加油。 3.5.1 开发我的投票页面 在app.js里的pages的数组里加上"pages/myVote/myVote"&#xff0c;保存了后出现了myVote文件夹。 …

如何快速检测硬盘健康程度?

当我们使用Windows11/10/8/7计算机时&#xff0c;可能会遇到各种各样的问题&#xff0c;比如蓝屏报错、系统崩溃或其他运行不正常的状况。很多时候都是因为硬盘错误或故障导致的。那么&#xff0c;我们该如何快速检测硬盘健康程度呢&#xff1f; 在驱动器属性中执行硬盘查错 硬…

英语语法:连词or, and, if, unless怎么用?

连词or, and, if, unless怎么用&#xff1f;1. or conj. 或者&#xff0c;还是&#xff0c; 和&#xff0c; 否则用法&#xff1a;并列连词①当“或者&#xff0c;还是”讲时&#xff0c;用在选择疑问句中&#xff0c;是选择疑问句的标志例&#xff1a;Are you a teacher or a …

GNSS接收机 高精度GNSS接收机 4GGNSS接收机

GNSS接收机TN521 ★多频多系统个高精度定位&#xff0c;支持GPS L1/L2&#xff0c;BD B1/B2&#xff0c;支持北斗三代 ★外置GNSS、4G天线 ★平面精度2.5mm 1ppm RMS&#xff0c;高程精度511ppm RMS ★监测终端内嵌工业级智能平台 ★支持4G全网通、全面支持移动/联通/电信…

数据库应用:MongoDB 数据备份与恢复

目录 一、实验 1.MongoDB 数据库备份与恢复 2.MongoDB 数据表备份与恢复 二、问题 1.MongoDB有哪些命令行工具实现数据备份与恢复 一、实验 1.MongoDB 数据库备份与恢复 &#xff08;1&#xff09;查看版本 rootnode1:~# mongo --version&#xff08;2&#xff09;准备…

NX二次开发UF_CURVE_create_arc_center_tangent 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CURVE_create_arc_center_tangent Defined in: uf_curve.h int UF_CURVE_create_arc_center_tangent(tag_t center, tag_t tangent, UF_CURVE_help_data_p_t help_data_p, UF_CUR…

Python语言创建爬虫代理IP池详细步骤和代码示例

目录 一、引言 二、代理IP的选择 三、使用代理IP的代码示例 四、创建代理IP池的代码示例 五、总结 一、引言 在爬虫程序中&#xff0c;代理IP的使用是避免IP被封禁、提高爬取效率的重要手段。本文将详细介绍如何使用Python语言创建一个爬虫代理IP池&#xff0c;包括代理I…

每日一练2023.11.27———连续因子【PTA】

题目要求&#xff1a; 一个正整数 N 的因子中可能存在若干连续的数字。例如 630 可以分解为 3567&#xff0c;其中 5、6、7 就是 3 个连续的数字。给定任一正整数 N&#xff0c;要求编写程序求出最长连续因子的个数&#xff0c;并输出最小的连续因子序列。 输入格式&#xff…

3D模型材质编辑器

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 材质贴图&#xff08;Texture Mapping&#xff09;&#xff1a;是在物体着色方面最引人注目、…

MySQL中的存储过程(详细篇)

文章目录 概述优点缺点 MySQL存储过程的定义存储过程的基本语句格式存储过程的使用定义一个存储过程定义一个有参数的存储过程定义一个流程控制语句 IF ELSE定义一个条件控制语句 CASE定义一个循环语句 WHILE定义一个循环语句 REPEAT UNTLL定义一个循环语句 LOOP使用存储过程插…

Go 内置运算符

一、算数运算符 1、算数运算符使用 package mainimport ("fmt" )func main(){fmt.PrintIn("103",103) //10313fmt.PrintIn("10-3",10-3) //10-37fmt.PrintIn("10*3",10*3) //10*330//除法注意&#xff1a;如果运算的数都是…

工信部:1—10月我国软件业务收入98191亿元 同比增长13.7%

2023年1—10月份软件业经济运行情况 1—10月份&#xff0c;我国软件和信息技术服务业&#xff08;以下简称“软件业”&#xff09;运行态势平稳&#xff0c;软件业务收入较快增长&#xff0c;利润总额两位数增长&#xff0c;软件业务出口降幅持续收窄。 一总体运行情况 软件…

Python编写的爬虫:为什么受到如此的欢迎?

目录 一、引言 二、Python爬虫受欢迎的原因 1、语言简洁易读 2、强大的数据处理能力 3、丰富的网络爬虫库 4、跨平台性 5、社区支持与资源丰富 三、Python爬虫应用案例 四、总结 一、引言 在当今的大数据时代&#xff0c;信息获取和数据处理能力对于企业和个人来说至…

网络篇---第三篇

系列文章目录 文章目录 系列文章目录前言一、说一下HTTP的长连接与短连接的区别二、TCP 为什么要三次握手,两次不行吗?为什么?三、说一下 TCP 粘包是怎么产生的?怎么解决粘包问题的?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大…

类 —— 封装、四类特殊成员函数、this指针、匿名对象、深浅拷贝问题

类 将同一类对象的所有属性都封装起来。 类中最基础的内容包括两部分&#xff0c;一个是属性、一个是行为。 ● 属性&#xff1a;表示一些特征项的数值&#xff0c;比如说&#xff1a;身高、体重、性别、肤色。这些属性都是名词。属性一般都以名词存在。属性的数值&#xff0c…

Linux(CentOS7.5):硬盘分区纪实

一、服务器概述 1、既有一块系统硬盘&#xff0c;新增一块100G硬盘。 2、要求&#xff0c;将新插入硬盘分为&#xff1a;20G、30G、50G。 二、操作步骤 1、确认新硬盘是否插入成功&#xff1a; fdisk -l# 红色框出来的&#xff0c;为识别出来的新硬盘信息 # 黄色框出来的&#…

BGP路由的选路综合实验

题目要求 1.使用PreVal策略&#xff0c;确保R1通过R3到达192.168.10.0/24 2.使用AS_Path策略&#xff0c;确保R1通过R3到达192.168.11.0/24 3.配置MED策略&#xff0c;确保R1通过R3到达192.168.12.0/24 4.使用Local Preference策略&#xff0c;确保R4通过R2到达192.168.1.0/24…

联邦学习Federated Learning(FL)

联邦学习Federated Learning 序言FL流程细节FL代码实现&#xff08;Pytorch&#xff09;Reference 序言 手机的数据涉及到个人隐私和安全&#xff0c;如果将客户端的数据上传到服务端&#xff0c;终究是很容易泄漏出用户的信息&#xff0c;何况 用户也不愿意把自己的数据交给服…