vue3之echarts渐变柱状图
vue3之echarts渐变柱状图
效果:

核心代码:
<template><div class="abnormal"><div class="chart" ref="chartsRef"></div></div>
</template><script setup>
import * as echarts from 'echarts';
import { reactive, onMounted } from 'vue';
const obj = reactive({data: {xdata: ['1','2','3','4','5','6','7','8','9','10','11','12',],ydata: [350, 320, 310, 450, 150, 300, 250, 250, 310, 280, 200, 180],},op: {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',lineStyle: {color: 'rgba(135, 140, 147, 0.6)',width: 10,},}, // 鼠标移上的阴影,默认是线},grid: {top: '5%',right: '1%',left: '0%',bottom: '0%',containLabel: true,},xAxis: [],yAxis: [{type: 'value',name: '装载量(万吨)',position: 'left',axisLabel: {formatter: '{value}',color: '#FFFFFF',textStyle: {fontSize: 13,fontFamily: 'DINPro-Regular',},interval: 0,},axisLine: {show: false,lineStyle: {color: 'rgba(255,255,255,1)',},},axisTick: {// x轴刻度相关设置alignWithLabel: true,},splitLine: {lineStyle: {type: 'dashed',color: 'rgba(255,255,255,0.12)',},},},{type: 'value',name: '装载车次(千辆)',nameLocation: 'end',position: 'right',axisTick: {show: false,},axisLine: {show: false,},axisLabel: {formatter: '{value}',textStyle: {fontSize: 13,color: '#ffffff',fontFamily: 'DINPro-Regular',},},axisTick: {// x轴刻度相关设置alignWithLabel: true,},splitLine: {lineStyle: {type: 'dashed',color: 'rgba(160, 169, 192, 0.8)',},},},],series: [],}
})
let myCharts = null;
let chartsRef = ref(null)const flushChart = () => {obj.op.xAxis = [];obj.op.series = [];obj.op.xAxis.push({type: 'category',data: obj.data.xdata,axisLine: {lineStyle: {color: 'rgba(255,255,255,0.12)',},},axisLabel: {margin: 11,color: '#FFFFFF',textStyle: {fontSize: 13,fontFamily: 'DINPro-Regular',},},});obj.op.series.push({type: 'bar',data: obj.data.ydata,name: '装载量',stack: 'Ad',barWidth: '5px',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: '#77FB9F', // 0% 处的颜色},{offset: 1,color: 'rgba(255,255,255,0)', // 100% 处的颜色},],false,),},},},);myCharts.setOption(obj.op);
}const initChart = () => {myCharts = echarts.init(chartsRef.value);
}onMounted(() => {initChart();flushChart();
})const destroyChart = () => {if (!myCharts) {return;}myCharts.dispose();myCharts = null;
}onBeforeMount(() => {destroyChart();
})
</script><style lang="scss" scoped>
.abnormal {position: relative;width: 100%;height: 276px;margin-top: 19px;display: inline-block;.chart {display: inline-block;width: 100%;height: 185px;zoom: 1;}
}
</style>相关文章:
vue3之echarts渐变柱状图
vue3之echarts渐变柱状图 效果: 核心代码: <template><div class"abnormal"><div class"chart" ref"chartsRef"></div></div> </template><script setup> import * as echa…...
有一种浪漫,叫接触Linux
大家好,我是五月。 嵌入式开发 嵌入式开发产品必须依赖硬件和软件。 硬件一般使用51单片机,STM32、ARM,做成的产品以平板,手机,智能机器人,智能小车居多。 软件用的当然是以linux系统为蓝本,…...
构建 App 的方法
目录 构建 App 使用 App 设计工具以交互方式构建 App 使用 MATLAB 函数以编程方式构建 App 构建实时编辑器任务 可以使用 MATLAB 来构建可以集成到各种环境中的交互式用户界面。可以构建两种类型的用户界面: App - 基于用户交互执行操作的自包含界面 实时编辑器…...
laravel实现发送邮件功能
Laravel提供了简单易用的邮件发送功能,使用SMTP、Mailgun、Sendmail等多种驱动程序,以及模板引擎将邮件内容进行渲染。 1.在项目目录.env配置email信息 MAIL_MAILERsmtp MAIL_HOSTsmtp.qq.com MAIL_PORT465 MAIL_FROM_ADDRESSuserqq.com MAIL_USERNAME…...
概要设计检查单、需求规格说明检查单
1、概要设计检查表 2、需求规格说明书检查表 概要(结构)设计检查表 工程名称 业主单位 承建单位 检查依据 1、设计方案、投标文件;2、合同;3、信息系统相关技术标准及安全规范; 检查类目 检查内容 检查…...
达梦列式存储和clickhouse基准测试
要验证达梦BigTable和ClickHouse的性能差异,您需要进行一系列基准测试。基准测试通常包括多个步骤,如准备测试环境、设计测试案例、执行测试、收集数据和分析结果。以下是您可以遵循的一般步骤: 准备测试环境: 确保两个数据库系统…...
【Web】NewStarCtf Week2 个人复现
目录 ①游戏高手 ②include 0。0 ③ez_sql ④Unserialize? ⑤Upload again! ⑥ R!!C!!E!! ①游戏高手 经典前端js小游戏 检索与分数相关的变量 控制台直接修改分数拿到flag ②include 0。0 禁了base64和rot13 尝试过包含/var/log/apache/access.log,ph…...
Python实现Windows服务自启动、禁用、启动、停止、删除
如果一个程序被服务监管,那么仅仅kill程序是无用的,还要把服务关掉 import win32service import win32serviceutildef EnableService(service_name):try:# 获取服务管理器scm win32service.OpenSCManager(None, None, win32service.SC_MANAGER_ALL_ACC…...
【华为OD题库-043】二维伞的雨滴效应-java
题目 普通的伞在二维平面世界中,左右两侧均有一条边,而两侧伞边最下面各有一个伞坠子,雨滴落到伞面,逐步流到伞坠处,会将伞坠的信息携带并落到地面,随着日积月累,地面会呈现伞坠的信息。 1、为了…...
百度手机浏览器关键词排名优化——提升关键词排名 开源百度小程序源码系统 附带完整的搭建教程
百度作为国内领先的搜索引擎,一直致力于为用户提供最优质的信息服务。在移动互联网时代,手机浏览器成为了用户获取信息的主要渠道。而小程序作为轻量级的应用程序,具有即用即走、无需下载等优势,越来越受到用户的青睐。然而&#…...
Git 的基本概念和使用方式。
Git 是一个开源的分布式版本控制系统,它可以记录代码的修改历史,跟踪文件的版本变化,并支持多人协同开发。Git 的基本概念包括: 1. 仓库(Repository):存放代码和版本历史记录的地方。 2. 分支…...
MarkDown学习
MarkDown学习 标题 三级标题 四级标题 字体 加粗(两侧加两个星号):Hello,World! 斜体(两侧加一个星号):Hello,World! 加粗加斜体(两侧加三个星号):…...
案例:某电子产品电商平台借助监控易保障网络正常运行
一、背景介绍 某电子产品电商平台是一家专注于电子产品销售的电商平台,拥有庞大的用户群体和丰富的产品线。随着业务规模的不断扩大,网络设备的数量和复杂性也不断增加,网络故障和性能问题时有发生,给平台的稳定运行带来了很大的挑…...
IntelliJ IDEA 中有什么让你相见恨晚的技巧
一、条件断点 循环中经常用到这个技巧,比如:遍历1个大List的过程中,想让断点停在某个特定值。 参考上图,在断点的位置,右击断点旁边的小红点,会出来一个界面,在Condition这里填入断点条件即可&…...
游戏被攻击了怎么办
随着网络技术和网络应用的发展,网络安全问题显得越来越重要,在创造一个和谐共赢的互联网生态环境的路途中总是会遇到各种各样的问题。最常见的当属于DDOS攻击(Distributed Denial of Service)即分布式阻断服务。由于容易实施、难以…...
MySQL 索引类型
什么是索引? 索引是一种用于提高数据库查询性能的数据结构。它是在表中一个或多个列上创建的,可以加快对这些列的数据检索速度。 索引的作用是通过创建一个额外的数据结构,使得数据库可以更快地定位和访问数据。当执行查询语句时,…...
哈希表——闭散列表
该哈希表实现是闭散列实现法。 闭散列表: 闭散列:也叫开放定址法,当发生哈希冲突时,如果哈希表未被装满,说明在哈希表中必然还有空位置,那么可以把key存放到冲突位置中的“下一个” 空位置中去。 那如何寻…...
【ArcGIS Pro微课1000例】0036:栅格影像裁剪与提取(矢量范围裁剪dem高程数据)
本实验讲解在ArcGIS Pro中进行栅格影像裁剪与提取(矢量范围裁剪dem高程数据)的方法。DEM、DOM、DSM等栅格数据方法也可以实现。 文章目录 一、加载实验数据二、裁剪工具的使用1. 裁剪栅格2. 按掩膜提取一、加载实验数据 加载配套实验数据包中的0036.rar中的dem数据和矢量裁剪…...
Doris-Routine Load(二十七)
例行导入(Routine Load)功能为用户提供了一种自动从指定数据源进行数据导入的功能。 适用场景 当前仅支持从 Kafka 系统进行例行导入,使用限制: (1)支持无认证的 Kafka 访问,以及通过 SSL 方…...
linux驱动.之 网络udp应用层测试工具demon(一)
绑定vlan,网卡的demon,如果有多个网卡,多个vlan,网卡的ip设置成一致,那就不能只简单绑定ip来创建socket, 需要绑定网卡设备 客户端udp_client.c #include <stdio.h> #include <string.h> #inc…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版,柱状图PPT模版,线状图PPT模版,折线图PPT模版,饼状图PPT模版,雷达图PPT模版,树状图PPT模版 图表类系列各种样式PPT模版分享:图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
大数据学习(132)-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏: 👑哲学语录: 用力所能及,改变世界。 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言Ǵ…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
AI病理诊断七剑下天山,医疗未来触手可及
一、病理诊断困局:刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断",医生需通过显微镜观察组织切片,在细胞迷宫中捕捉癌变信号。某省病理质控报告显示,基层医院误诊率达12%-15%,专家会诊…...
C++.OpenGL (14/64)多光源(Multiple Lights)
多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
【UE5 C++】通过文件对话框获取选择文件的路径
目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 ,这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器,右键点击 .uproject 文件,选择 "Generate Visual Studio project files",重…...
CppCon 2015 学习:Time Programming Fundamentals
Civil Time 公历时间 特点: 共 6 个字段: Year(年)Month(月)Day(日)Hour(小时)Minute(分钟)Second(秒) 表示…...
比较数据迁移后MySQL数据库和ClickHouse数据仓库中的表
设计一个MySQL数据库和Clickhouse数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...
Excel 怎么让透视表以正常Excel表格形式显示
目录 1、创建数据透视表 2、设计 》报表布局 》以表格形式显示 3、设计 》分类汇总 》不显示分类汇总 1、创建数据透视表 2、设计 》报表布局 》以表格形式显示 3、设计 》分类汇总 》不显示分类汇总...
