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

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.mfbz.cn/a/192541.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

React 入门使用 (官方文档向 Part2)

文章目录 用 State 响应输入声明式地考虑 UI步骤 1:定位组件中不同的视图状态步骤 2:确定是什么触发了这些状态的改变步骤 3:通过 useState 表示内存中的 state步骤 4:删除任何不必要的 state 变量步骤 5:连接事件处理…

跨境电商崛起:揭秘全球化商机

随着科技的迅猛发展,跨境电商正崭露头角,成为商业新风口。这个数字化时代为全球商家带来了前所未有的机遇,同时也为消费者提供更广阔的购物选择。本文将深入探讨跨境电商的崛起,揭示其中隐藏的全球化商机,以及这一趋势…

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

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

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

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

【设计模式】模板方法模式

目录 一、定义二、使用场景三、使用方法四、结构五、代码示例六、优点七、缺点八、适用场景 一、定义 1.在父类定义一个操作中的算法骨架,将算法的一些步骤延迟到子类中,使得子类可以不改变该算法结构的情况下重定义该算法的某些特定步骤 二、使用场景 …

十八数字文化受邀参加版博会“区块链+版权”创新应用试点研讨会

2023年11月23日至25日,以“版权新时代 赋能新发展”为主题的第九届中国国际版权博览会在成都市中国西部国际博览城和天府国际会议中心举办。版博会是我国版权领域唯一的综合性、国际性、国家级版权专业博览会,本届版博会由国家版权局主办,四川…

GLM: 自回归空白填充的多任务预训练语言模型

当前,ChatGLM-6B 在自然语言处理领域日益流行。其卓越的技术特点和强大的语言建模能力使其成为对话语言模型中的佼佼者。让我们深入了解 ChatGLM-6B 的技术特点,探索它在对话模型中的创新之处。 GLM: 自回归空白填充的多任务预训练语言模型 ChatGLM-6B 技…

Cpython编译后再使用Pyinstaller打包

一、Cpython Python是一门解释型语言,当我们想让其他人运行我们的代码时,如果直接将.py源代码发送给他人,那么源代码将没有任何安全性可言,也就是任何一个人都可以打开源代码一看究竟,任何人都可以随意修改源代码。 …

单片机学习2——流水灯的实现

#include<reg52.h>sbit LED P1^0; unsigned char i;void main() {while(1){LED 0;for(i0;i<100;i);LED 1;for(i0;i<100;i);} } RST是复位按钮&#xff0c;单击一下之后&#xff0c;程序就会跑到最开始的位置运行。 右侧的按钮是RUN按钮&#xff0c;单击下&…

【版本管理 | Git 】Git最佳实践系列(一) —— LFS .gitignore 最佳实践,确定不来看看?

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…

动态规划学习——等差子序列问题

目录 一&#xff0c;最长等差子序列 1.题目 2.题目接口 3.解题思路及其代码 二&#xff0c;等差序列的划分——子序列 1.题目 2.题目接口 3.解题思路及其代码 一&#xff0c;最长等差子序列 1.题目 给你一个整数数组 nums&#xff0c;返回 nums 中最长等差子序列的长度…

功率整流器的作用是什么?SURS8340T3G车规级功率整流器的介绍

汽车级功率整流器是一种用于汽车电子系统的功率电子器件&#xff0c;用于将交流电转换为直流电以供电子设备使用。汽车级功率整流器需要具有高效率、高可靠性、高稳定性和高温度工作能力等特点。其中&#xff0c;SURS8340T3G 是一种常见的汽车级功率整流器。 SURS8340T3G 是一…

SparkDesk知识库 + ChuanhuChatGPT前端 = 实现轻量化知识库问答

上一篇 讯飞星火知识库文档问答Web API的使用&#xff08;二&#xff09; 把星火知识库搞明白了&#xff1b; 然后又花了时间学习了一下gradio的一些基础内容: 在Gradio实现两个下拉框进行联动案例解读&#xff1a;change/click/input实践&#xff08;三&#xff09; 在Gradio实…

快速了解软件工程学概述(5种软件过程模型)

目录 1 、什么是软件&#xff1f;特点有哪些 &#xff1f; 2 、 软件危机 定义&#xff1a; 软件危机产生的原因 消除软件危机的方法 3 、软件工程 1.软件工程的介绍 &#xff08;1&#xff09;概念 &#xff08;2&#xff09;本质特征 (3)软件工程方法学&#xff08;方…

优思学院|如何在企业中实施降本增效策略,实现财务突破

在当今竞争激烈的商业环境中&#xff0c;企业降低成本并提高效益变得至关重要。本文将深入探讨如何降本增效&#xff0c;以及实施这些策略的方法。 提到降本增效或提升生产效率&#xff0c;第一个被提出来检讨的一定是直接部门。但是如果无视于日渐臃肿的间接部门&#xff0c;…

全程云OA SQL注入漏洞复现

0x01 产品简介 全程云OA为企业提供日常办公管理、公文管理、工作请示、汇报、档案、知识体系、预算控制等26个功能&#xff0c;超过100多个子模块。为企业内部提供高效、畅通的信息渠道&#xff0c;同时也能大力推动公司信息系统发展&#xff0c;提高企业的办公自动化程度和综合…

SAS Planet软件介绍与使用教程

软件情况 SAS Planet是一位俄罗斯爱好者创建的的开源应用&#xff0c;该应用可以浏览与下载主流网络地图&#xff0c;包括Google地图、Google地球、Bing地图、Esri 地图、Yandex地图等。 该软件是基于Pascal开发的应用&#xff0c;目前已在github上开源&#xff0c;并使用了GP…

哈希表、哈希冲突解决办法

文章目录 一、什么是哈希表&#xff1f;二、什么是哈希冲突&#xff1f;怎样解决&#xff1f;三、哈希表的大小为什么是质数&#xff1f;四、链表法五、开放地址法线性探测法平方探测法双哈希(Double Hashing) 六、哈希表满了怎么办&#xff1f;七、完美哈希八、一些使用哈希解…

Java抽象类和接口(2)

&#x1f435;本篇文章继续对接口相关知识进行讲解 一、排序 1.1 给一个对象数组排序&#xff1a; class Student {public String name;public int age;public Student(String name, int age) {this.name name;this.age age;}public String toString() {return "name:…

爆肝整理! Python 网络爬虫 + 数据分析 + 机器学习教程来了

前段时间&#xff0c;有小伙伴多次在后台留言询问 Python 爬虫教程的问题。经过这两个多月以来的收集与整理&#xff0c;汇集了多个高校以及公开课视频教程&#xff0c;包括 python 爬虫的入门、进阶与实践&#xff0c;共 9G 左右。爬虫作为机器学习语料库构建的主要方式&#…
最新文章