当前位置: 首页 > news >正文

Echarts 设置面积区域图(areaStyle核心)

在这里插入图片描述

第011个

点击查看专栏目录



Echarts折线区域面积图的视觉效果更加饱满丰富,在系列不多的场景下尤其适用。区域面积图将折线到坐标轴的空间设置背景色,用区域面积表达数据。通过 areaStyle 设置折线图的填充区域样式,将其设为为 {} 表示使用默认样式,即使用系列的颜色以半透明的方式填充区域

文章目录

    • 示例效果
    • 示例源代码(共142行)
    • 相关资料参考
    • 专栏介绍

示例效果

在这里插入图片描述

示例源代码(共142行)

/*
* @Author: 还是大剑师兰特(CSDN)
* @下面源代码版权归还是大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @First published in CSDN
* @First published time: 2023-02-13
*/
<template><div class="container"><h3>vue+echarts:设置面积区域图</h3><p>大剑师兰特,还是大剑师兰特</p><div id="vue-echarts" ref="refEcharts"> </div></div>
</template><script>import * as echarts from 'echarts'; //局部引用,如果采用全局模式,这里不写export default {name: 'cuclife',data() {return {}},methods: {initCharts() {let myChart = echarts.init(this.$refs.refEcharts);myChart.setOption({title: {text: '标题:ECharts示例'},xAxis: {type: 'category',data: ['cuclife', 'openlayers', 'cesium', 'echarts', 'leaflet']},yAxis: {type: 'value',name: '技术技能值', //坐标轴名称nameLocation: 'middle', //坐标轴的位置nameTextStyle: {color: '#ff00ff',//align:'left',},nameGap: 50, //坐标轴名称与轴线之间的距离nameRotate: 90, //坐标轴名字旋转角度值,axisLine: {lineStyle: {color: '#ff00ff'},symbol: ['none', 'arrow'], //轴线两边的箭头symbolSize: [8, 12]},axisTick: {inside: false, //标轴刻度是否朝内,默认朝外},axisLabel: {show: true,inside: false,formatter: '{value}'},splitArea: {show: true,color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],}},grid: {x:50, y:55, x2:25, y2:20, containLabel: true },series: [{type: 'line',data: [15, 36, 10, 10, 20],areaStyle: {color: '#00f',opacity: 0.2},itemStyle: {//静态时显示状态color: new echarts.graphic.LinearGradient(// (x1,y1) 点到点 (x2,y2) 之间进行渐变0, 0, 1, 0,[{offset: 0,color: '#ff00ff'}, // 0 起始颜色{offset: 0.5,color: '#00ffff'}, // 0 起始颜色{offset: 1,color: '#ff0000'} // 1 结束颜色]),},}]});}},mounted() {this.initCharts();}}
</script>
<style scoped>.container {width: 840px;height: 580px;margin: 50px auto 0;border: 1px solid rgb(228, 57, 97);}#vue-echarts {width: 800px;height: 460px;border: 1px solid #d8d;margin: 0 auto;}
</style>

相关资料参考

https://echarts.apache.org/zh/option.html#series-line.areaStyle

专栏介绍

在vue和echarts联合技术栈的操控下,本专栏提供行之有效的源代码示例。这里既包括样式的修改,又包括常用bug的解决。
(1)提供title示例:展示控制标题的颜色、位置、子标题,连接等
(2)提供legend示例:展示控制图例的类型、宽度、高度、位置、间隙,边框、阴影、透明度、偏移,字体、颜色,提示语等
(3)提供grid示例:展示控制绘图网格的位置、宽度、高度、边框、阴影等
(4)提供xAxis示例:展示控制x 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等
(5)提供yAxis示例:展示控制y 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等
(6)提供dataZoom示例:展示控制区域缩放的类型、位置、filterMode等
(7)提供tooltip示例:展示控制提示框组件的触发方式、位置、样式,标签、动画、内容格式器等
(8)提供地理坐标系示例:展示控制地理坐标的经纬度、放缩、位置,距离、字体、边框等
(9)提供animation示例:展示控制动画的持续时间、延迟时间、动画方式,连接等
(10)提供其他示例:展示series等组件的信息内容。

相关文章:

Echarts 设置面积区域图(areaStyle核心)

第011个点击查看专栏目录Echarts折线区域面积图的视觉效果更加饱满丰富&#xff0c;在系列不多的场景下尤其适用。区域面积图将折线到坐标轴的空间设置背景色&#xff0c;用区域面积表达数据。通过 areaStyle 设置折线图的填充区域样式&#xff0c;将其设为为 {} 表示使用默认…...

pandas——字符串处理【建议收藏】

pandas——字符串处理 作者&#xff1a;AOAIYI 创作不易&#xff0c;如果觉得文章不错或能帮助到你学习&#xff0c;记得点赞收藏评论一下哦 文章目录pandas——字符串处理一、实验目的二、实验原理三、实验环境四、实验内容五、实验步骤1.cat() 拼接字符串2.split()切片字符串…...

反射,枚举,lambda表达式

目录 1、反射 1.1 基本概念 1.2 反射相关的类 1.3 创建 Class 对象 1.4 反射的使用 1.4.1 通过反射创建对象&#xff1a; 1.4.2 获取私有的构造方法 1.4.3 获取私有的成员变量 1.4.4 获取私有的方法 1.5 总结 2、枚举 2.1 认识枚举 2.2 使用枚举 2.3 枚举与反射…...

.Net Core对于RabbitMQ封装分布式事件总线

首先我们需要了解到分布式事件总线是什么&#xff1b; 分布式事件总线是一种在分布式系统中提供事件通知、订阅和发布机制的技术。它允许多个组件或微服务之间的协作和通信&#xff0c;而无需直接耦合或了解彼此的实现细节。通过事件总线&#xff0c;组件或微服务可以通过发布…...

GPIO功能描述

GPIO 文章目录 GPIO1. 功能描述1.1 OSCI/OSCO 引脚1.3 HSEIN/HSEOUT引脚1.2 Bit-Band1.4 VRTCAFx引脚1.5 EWKUPx引脚1.6 QSPI0 引脚1.7 LVDIN引脚1.8 SARADC引脚1.9 ADCIN引脚2. 测试项描述2.1 PAD Location2.2 LBOR和BOR复位2.3 驱动能力2.4 模拟态\高阻态2.5 SWD\JTAG2.6 输出…...

指派问题与匈牙利法讲解

指派问题概述&#xff1a;实际中&#xff0c;会遇到这样的问题&#xff0c;有n项不同的任务&#xff0c;需要n个人分别完成其中的1项&#xff0c;每个人完成任务的时间不一样。于是就有一个问题&#xff0c;如何分配任务使得花费时间最少。通俗来讲&#xff0c;就是n*n矩阵中&a…...

day5——冒泡排序,选择排序和插入排序的学习

选择排序冒泡排序插入排序 选择排序 选择排序的基本思路就是&#xff1a; 首先假定第一个的下表为所有元素中最小的一个&#xff0c; 然后用后面的每一个元素跟这个元素进行比较&#xff0c; 如果后面的元素比这个元素更小一点&#xff0c; 那么就将找到的最小的元素的下标和…...

Windows 数据类型 (Windows Data Types)

参考&#xff1a;https://learn.microsoft.com/en-us/windows/win32/winprog/windows-data-types 要求 要求值最低受支持的客户端Windows XP [仅限桌面应用]最低受支持的服务器Windows Server 2003 [仅限桌面应用]HeaderBaseTsd.h;WinDef.h;WinNT.hAPIENTRY 系统函数的调用约…...

九龙证券|本周5只新股申购,特斯拉、蔚来、理想的供应商来A股了!

据现在组织&#xff0c;2月13日到17日共有5只新股申购&#xff0c;其间上证主板2只&#xff0c;深证主板1只&#xff0c;北交所2只。 2月14日发动打新的深证主板新股多利科技成立于2010年&#xff0c;是一家专心于轿车冲压零部件及相关模具的开发、出产与出售的企业。从2020年…...

设计模式(持续更新)

本文主要是记录java的设计模式在实际工作中的应用案例&#xff0c;或者是对设计模式的个人理解及备忘 一、单例模式Singleton 工作场景&#xff08;静态类&#xff09;&#xff1a; 在外部系统对接中&#xff0c;需要调用外部系统A的接口&#xff0c;但是接口是有身份校验的…...

Prometheus 告警规则

Prometheus 告警规则 Prometheus官方内置的第三方报警通知包括&#xff1a;邮件、 即时通讯软件&#xff08;如Slack、Hipchat&#xff09;、移动应用消息推送(如Pushover)和自动化运维工具&#xff08;例如&#xff1a;Pagerduty、Opsgenie、Victorops&#xff09; Promethe…...

mulesoft MCIA 破釜沉舟备考 2023.02.13.02

mulesoft MCIA 破釜沉舟备考 2023.02.13.03 1. According to MuleSoft, which deployment charcateristic applies to a microservices application architecture?2. A mule application designed to fulfil two requirements3. A mule application must periodically process…...

获取DLL运行时路径的方法

之前项目中发现的问题&#xff0c;记录下解决方案1. 问题背景OVVRNTool项目中&#xff0c;底层图像基本操作功能由DLL库函数提供&#xff0c;上层基于DLL封装了两个应用CMD和GUI&#xff0c;然后通过Qt打包分发&#xff1b;发布是直接采用绿色免安装的方式打包&#xff0c;具体…...

“华为杯”研究生数学建模竞赛2006年-【华为杯】D题:学生面试中教师安排的优化与算法(附获奖论文)

赛题描述 高校自主招生是高考改革中的一项新生事物,现在仍处于探索阶段。某高校拟在全面衡量考生的高中学习成绩及综合表现后再采用专家面试的方式决定录取与否。该校在今年自主招生中,经过初选合格进入面试的考生有N人,拟聘请老师M人。每位学生要分别接受4位老师(简称该学…...

【JavaScript】复习 【对象参数】【函数参数】

js不会检查任何参数类型&#xff0c;任何参数都可以作为参数传递 1、对象参数 改变量随便改&#xff0c;改对象要看这个对象是不是有多个变量同时指向这个对象 const 用来定义常量&#xff0c;只能赋值一次。 变量------->对象------->属性 被const修饰的对象 …...

如何批量提取文件名到excel表格?

批量提取文件名到excel表格&#xff1f;关于这个问题相信很多人都遇到过&#xff0c;大多数人在第一次碰到的时候都不知道如何下手&#xff0c;大家都会立即在百度里面搜索相关方法教程&#xff0c;小编也试着搜索了一下&#xff0c;发现找到的很多方法都大同小异&#xff0c;需…...

CUDA线程层次一文搞懂|参加CUDA线上训练营

设备术语 Host&#xff1a;CPU 和 内存 (host memory)Device&#xff1a;GPU 和显存 (device memory) CUDA 线程层次 CUDA 线程层次分为&#xff1a; Thread 所有线程执行相同的核函数并行执行 Thread Block 执行在一个 Streaming Multiprocessor &#xff08;SM&#xff09…...

Linux文件默认权限:umask

umask就是指定目前用户在建立文件或目录时候的权限默认值 查看方式有两种&#xff1a;一种可以直接输入umask&#xff0c;就可以看到数字类型的权限设置值&#xff0c;一种则是加入umask后加入-S&#xff08;Symbolic&#xff09;选项&#xff0c;就会以符号类型的方式来显示出…...

SonicWall:请立即修复SMA 1000 漏洞

近日&#xff0c;网络安全供应商SonicWall发布了关于安全移动访问 (SMA) 1000设备的三个安全漏洞的紧急报告&#xff0c;其中包括一个高威胁性的身份验证绕过漏洞。SonicWall指出&#xff0c;攻击者可以利用这些漏洞绕过授权&#xff0c;并可能破坏易受攻击的设备。 从报告中可…...

基于VS调试分析 + 堆栈观察问题代码段

文章目录问题代码段1 —— 阶乘之和问题代码段2 —— 越界的危害① 发现问题② 分析问题③ 思考问题【⭐堆栈原理⭐】④ 解决问题【DeBug与Release】&#x1f468;程序员与测试人员&#x1f469;✒总结与提炼问题代码段1 —— 阶乘之和 先来看一道C语言中比较基础的题目&#x…...

QFramework框架学习

主要学习内容TypeEventSystemActionKitTimer类1、TypeEventSystem-适用于一个条件触发&#xff0c;多个组件响应的情况例如&#xff1a;动物园系统中&#xff0c;点击肉食动物按钮&#xff0c;动物园中有肉食属性的动物都进行显示。步骤&#xff1a;1、动物自身脚本上进行判断是…...

移动OA系统,联动企业协作让办公高效无间断

移动oa系统&#xff0c;近年来随着企业办公节奏的变化及人们个性化办公需求的增加迎来了快速发展。一方面&#xff0c;它兼具OA系统诸多优势&#xff0c;既凝聚了企业基础管理工作&#xff0c;联动了企业协作、沟通交流&#xff0c;又进一步提高了企业的综合实力与市场竞争力。…...

结构体熟练掌握--实现通讯录

魔王的介绍&#xff1a;&#x1f636;‍&#x1f32b;️一名双非本科大一小白。魔王的目标&#xff1a;&#x1f92f;努力赶上周围卷王的脚步。魔王的主页&#xff1a;&#x1f525;&#x1f525;&#x1f525;大魔王.&#x1f525;&#x1f525;&#x1f525; ❤️‍&#x1…...

腾讯云CVM服务器购买流程手把手方法教程攻略

​购买腾讯云服务器有两种方式。一种是在官方活动中&#xff0c;简单方便&#xff0c;但ECS配置相对固定&#xff1b;另一种是在ECS页面定制购买。配置选项丰富&#xff0c;但地理可用性区域、计费模式、CPU内存实例规格、映像系统、存储系统磁盘、网络带宽和安全组的选择更为复…...

九龙证券|“春季躁动”行情要来?1月新增投资者数大增

新增投资者数量在上一年12月触及多年新低后&#xff0c;2023年1月份开端呈现反弹。 在新增投资者数量之外&#xff0c;近段时刻以来&#xff0c;包含A股商场股票成交额、北向资金净买入额、两融资金规划及成交额在内多个商场目标也呈现回暖的特征&#xff0c;目前A股商场交投氛…...

C语言(按位运算符和位移运算符)

目录 ​编辑 一.按位运算符 1.二进制反码或按位取反&#xff1a;~ 2.按位与&#xff1a;& 3.按位或&#xff1a;| 4.按位异或&#xff1a;^ 二.位移运算符 1.左移&#xff1a; << 2.右移&#xff1a; >> 一.按位运算符 C有四个按位逻辑运算符都用于整…...

删掉的照片怎么恢复?

每一张照片都是生活&#xff0c;留住每一个人的回忆。而这些有意义的照片&#xff0c;我们都会把它保存在我们的手机或电脑上&#xff0c;始终伴随着我们。但无论是手机还是电脑&#xff0c;都是需要时不时清理一下的。如果是清理垃圾图片时&#xff0c;不小心删除了需要的图片…...

【java】40 个 SpringBoot 常用注解(建议收藏)

本文目录一、Spring Web MVC 注解Spring Web MVC 注解RequestMappingRequestBodyGetMappingPostMappingPutMappingDeleteMappingPatchMappingControllerAdviceResponseBodyExceptionHandlerResponseStatusPathVariableRequestParamControllerRestControllerModelAttributeCross…...

【JMC】SMILES‑based deep generative scafold decorator for de‑novo drug design

SMILES-based deep generative scaffold decorator for de-novo drug design 基于SMILES的利用Fragment的分子生成模型 https://github.com/undeadpixel/reinvent-scaffold-decorator 1.背景 深度生成模型因其可以从有限的数量中生成新数据&#xff0c;目前已成功应用于生成…...

全链路异步,让你的 SpringCloud 性能优化10倍+

背景 随着业务的发展&#xff0c;微服务应用的流量越来越大&#xff0c;使用到的资源也越来越多。 在微服务架构下&#xff0c;大量的应用都是 SpringCloud 分布式架构&#xff0c;这种架构&#xff0c;总体是全链路同步模式。 同步编程模式不仅造成了资源的极大浪费&#x…...

聊城做网站建设的公司/软文例文 经典软文范例

1. 点击密码右边的刷新图片&#xff0c;然后点设置个人密码 2. 设置密码...

用dw怎么做网站/淘宝权重查询入口

背景 在上午探索了Windows下时间任务创建运行的可视化界面和Schtasks命令行工具且默默失败后&#xff0c;下午我决定不依不饶地去看一下Linux系统下是怎么创建时间任务的。其实我Linux接触得不多&#xff0c;而且今天也是新接触的crontab命令&#xff0c;所以不免会踩坑踩雷&am…...

海南海口做网站/深圳网站设计实力乐云seo

记录一个小知识点&#xff1a; 我们会看到这样利用循环的代码&#xff1a; for _ in range(n): _ 在这里是什么意思&#xff1f; _ 是占位符&#xff1a;表示不在意变量的值&#xff0c;只是用于循环遍历n次&#xff0c;和使用i没什么区别&#xff0c;只不过使用_就表示我不在…...

在哪些网站可以做企业名称预审/上海最新事件

氚云tERP 一、概述 氚云tERP是一套针对商贸类企业研制的一套信息化解决方案。产品覆盖从销售、库存、采购、财务、人事、流程管理一体化管理。帮助企业搭建一个简洁、高效的运营管理平台&#xff0c;实现人、财、物、供、销全面的管理。 二、优势 集成钉钉&#xff1a;全面集成…...

网站页面设计与制作实践/石家庄疫情最新情况

三元运算&#xff1a;if 11 2 :print (True)else:print (False)#等同于&#xff1a;print (True if 112 else False)函数的基本语法def XX():定义函数# return aa 返回值# 或 pass 什么也不返回# XX() 调用函数#函数的有三中不同的参数&#xff1a;#------普通参数------def f…...

南京做网站找哪家好/网址提交

前几天&#xff0c;eric已经发表了欧博旗舰RDS1电池数字界面转盘旗舰RDB1电池解码器开箱篇。开箱篇 | 试听欧博旗舰RDS1电池数字界面转盘旗舰RDB1电池解码器&#xff0c;支持roon、Tidal、MQA。本地播放评论篇。开盖照本地播放评论篇 | 试听欧博旗舰RDS1电池数字界面转盘旗舰RD…...