vue3之echarts区域折线图

vue3之echarts区域折线图

效果:
在这里插入图片描述
核心代码:

<template><div class="abnormal"><div class="per">单位:{{ obj.data?.unit }}</div><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: [ 0, 0, 0, 1354, 0, 254, 0, 468, 0, 16, 498, 0],unit: '次'},op: {tooltip: {},grid: {top: '5%',left: '0%',right: '2%',bottom: '0%',containLabel: true,},xAxis: null,yAxis: [{type: 'value',nameLocation: 'end',axisTick: {show: false,},axisLine: {show: false,},axisLabel: {textStyle: {fontSize: 13,color: '#ffffff',fontFamily: 'DINPro-Regular',},padding: [0, 0, 0, -10],},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.tooltip = {};obj.op.tooltip = {trigger: 'axis',axisPointer: {type: 'shadow',lineStyle: {color: 'rgba(135, 140, 147, 0.6)',},},formatter(params) {return `${params[0].name}月 : ${params[1].value}`;},backgroundColor: 'rgba(45, 105, 133, 0.8)',borderWidth: 0,textStyle: {color: '#DAE3E7',fontFamily: 'DINPro-Regular',},};obj.op.xAxis = {type: 'category',boundaryGap: false, // 坐标轴两边留白data: obj.data.xdata,axisLabel: {margin: 10,textStyle: {color: '#ffffff',fontSize: 13,fontFamily: 'DINPro-Regular',},},axisLine: {lineStyle: {color: 'rgba(160, 169, 192, 0.6)',},},axisTick: {show: true,},};obj.op.series.push({name: 'bg',type: 'bar',data: [...Array(obj.data.ydata.length).fill(Math.max(...obj.data.ydata) === 0 ? 10 : Math.max(...obj.data.ydata))],barWidth: '50%',itemStyle: {color: 'rgba(255, 255, 255, 0.02)',},},);obj.op.series.push({type: 'line',symbol: 'none',itemStyle: {normal: {color: '#68A4FF',lineStyle: {color: '#68A4FF',width: 3,},areaStyle: {// 区域填充样式color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: 'rgba(104,164,255,0)',}, {offset: 0.5,color: 'rgba(104,164,255,0.6)',},{offset: 1,color: 'rgba(104,164,255,1)',},]),},},},toolbox: {show: false,},data: obj.data.ydata,},);myCharts.setOption(obj.op);
}const initChart = () => {myCharts = echarts.init(chartsRef.value);flushChart();
} onMounted(() => {initChart();
})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;.per {font-size: 12px;color: rgba(255, 255, 255, 0.5);margin-bottom: 19px;}.chart {display: inline-block;width: 100%;height: 185px;zoom: 1;}
}
</style>

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

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

相关文章

CSDN每日一题学习训练——Python版(N皇后 II、买卖股票的最佳时机 II、编程通过键盘输入每一位运动员)

版本说明 当前版本号[20231120]。 版本修改说明20231120初版 目录 文章目录 版本说明目录N皇后 II题目解题思路代码思路参考代码 买卖股票的最佳时机 II题目解题思路代码思路参考代码 编程通过键盘输入每一位运动员题目解题思路代码思路参考代码 N皇后 II 题目 n 皇后问题…

达索系统3DEXPERIENCE云端设计新体验

云是现代生活中必不可少的工具&#xff0c;在云端进行数据传输避免了传统的文件传输方式&#xff0c;更加方便快捷&#xff0c;节约了工作时间。 01 云端平台升级 在日常工作中有什么独特优势 在我们的生活工作中&#xff0c;云越来越多被提起&#xff0c;比如云计算、云服务…

卷积神经网络(CNN)多种图片分类的实现

文章目录 前期工作1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#xff09;我的环境&#xff1a; 2. 导入数据3.归一化4.可视化 二、构建CNN网络模型三、编译模型四、训练模型五、预测六、模型评估 前期工作 1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#…

从多表连接视图对比人大金仓和Oracle

KING BASE 信息时代&#xff0c;数据是驱动业务决策和创新的核心资源。然而&#xff0c;随着数据量的不断增加&#xff0c;有效地处理和整合数据的过程变得愈发复杂。这时&#xff0c;多表连接视图悄然走进数据库世界&#xff0c;不仅能够将多个表中的数据整合在一起&#xff0…

管家婆订货易在线商城任意文件上传漏洞复现

0x01 产品简介 管家婆订货易&#xff0c;帮助传统企业构建专属的订货平台&#xff0c;PC微信APP小程序h5商城5网合一&#xff0c;无缝对接线下的管家婆ERP系统&#xff0c;让用户订货更高效。支持业务员代客下单&#xff0c;支持多级推客分销&#xff0c;以客带客&#xff0c;拓…

【C/C++】递归算法

信封 某人写了n封信和n个信封&#xff0c;如果所有的信都装错了信封。求所有的信都装错信封共有多少种不同情况 #include <iostream> using namespace std; const int N 30; int n; long f[N];int main() {scanf("%d", &n);f[1] 0, f[2] 1;for (int …

「Verilog学习笔记」ROM的简单实现

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 分析 要实现ROM&#xff0c;首先要声明数据的存储空间&#xff0c;例如&#xff1a;[3:0] rom [7:0]&#xff1b;变量名称rom之前的[3:0]表示每个数据具有多少位&#xff0…

HLS基础issue

hls 是一个用C/c 来开发PL &#xff0c;产生rtl的工具 hls是按照rtl code来运行的 &#xff0c; 但是rtl会在不同器件调用不同的源语&#xff1b; 可能产生的ip使用在vivado另外一个器件的话 会存在问题&#xff1b; Hls &#xff1a; vivado ip &#xff0c; vitis kernel 是…

认识前端包常用包管理工具(npm、cnpm、pnpm、nvm、yarn)

随着前端的快速发展,前端的框架越来越趋向于工程化,所以对于包的使用也越来越多,为了优化性能和后期的维护更新,对于前端包的管理也尤为重要,本文主要阐述对node中包管理工具的理解和简单的使用方法。也欢迎各位大佬和同行们多多指教。😁😁😁 👉1. npm 安装npm 通…

自定义类使用ArrayList中的remove

Java中ArrayList对基础类型和字符串类型的删除操作&#xff0c;直接用remove方法即可。但是对于自定义的类来说&#xff0c;用remove方法删除不了&#xff0c;因为没有办法确定是否是要删除的对象。 ArrayList中remove源码是&#xff1a; public boolean remove(Object o) {if…

【linux】补充:高效处理文本的命令学习(tr、uniq、sort、cut)

目录 一、tr——转换、压缩、删除 1、tr -s “分隔符” &#xff08;指定压缩连续的内容&#xff09; 2、tr -d 想要删除的东西 ​编辑 3、tr -t 内容1 内容2 将内容1全部转换为内容2&#xff08;字符数需要一一对应&#xff09; 二、cut——快速剪裁命令 三、uniq——去…

git撤销未git commit的文件

目录 一、问题描述 二、方式1&#xff1a;git命令撤销&#xff08;更专业&#xff09; 1、文件已git add&#xff0c;未git commit 2、本地修改&#xff0c;未git add &#xff08;1&#xff09;撤销处于unstage的文件&#xff0c;即删除已有变动 &#xff08;2&#xff…

Vue3 动态设置 ref

介绍 在一些场景&#xff0c;ref设置是未知的需要根据动态数据来决定&#xff0c;如表格中的input框需要我们主动聚焦&#xff0c;就需要给每一个input设置一个ref&#xff0c;进而进行聚焦操作。 Demo 点击下面截图中的编辑按钮&#xff0c;自动聚焦到相应的输入框中。 &…

【算法基础】动态规划

背包问题 01背包 每个物品只能放一次 2. 01背包问题 - AcWing题库 二维dp #include<bits/stdc.h> const int N1010; int f[N][N]; int v[N],w[N]; signed main() {int n,m;std::cin>>n>>m; for(int i1;i<n;i) std::cin>>v[i]>>w[i];for…

Nginx的核心配置文件

Nginx的核心配置文件 学习Nginx首先需要对它的核心配置文件有一定的认识&#xff0c;这个文件位于Nginx的安装目录/usr/local/nginx/conf目录下&#xff0c;名字为nginx.conf 详细配置&#xff0c;可以参考resources目录下的<<nginx配置中文详解.conf>> Nginx的核…

warning C4251

c - Warning C4251 when building a DLL that exports a class containing an ATL::CString member - Stack Overflow

python中sklearn库在数据预处理中的详细用法,及5个常用的Scikit-learn(通常简称为 sklearn)程序代码示例

文章目录 前言1. 数据清洗&#xff1a;使用 sklearn.preprocessing 中的 StandardScaler 和 MinMaxScaler 进行数据规范化。2. 缺失值处理&#xff1a;使用 sklearn.impute 中的 SimpleImputer 来填充缺失值。3. 数据编码&#xff1a;使用 sklearn.preprocessing 中的 OneHotEn…

Nosql之redis概述及基本操作

关系数据库与非关系型数据库概述 关系型数据库 关系型数据库是一个结构化的数据库&#xff0c;创建在关系模型&#xff08;二维表格模型&#xff09;基础上&#xff0c;一般面向于记录。SQL语句(标准数据查询语言)就是一种基于关系型数据库的语言&#xff0c;用于执行对关系型…

常见负载均衡算法/策略(概念)

目录 1.1. 轮循均衡&#xff08;Round Robin&#xff09; 1.2. 权重轮循均衡&#xff08;Weighted Round Robin&#xff09; 1.3. 随机均衡&#xff08;Random&#xff09; 1.4. 权重随机均衡&#xff08;Weighted Random&#xff09; 1.5. 响应速度均衡&#xff08;R…

聊一聊go的单元测试(goconvey、gomonkey、gomock)

文章目录 概要一、测试框架1.1、testing1.2、stretchr/testify1.3、smartystreets/goconvey1.4、cweill/gotests 二、打桩和mock2.1、打桩2.2、mock2.2.1、mockgen2.2.1、示例 三、基准测试和模糊测试3.1、基准测试3.2、模糊测试 四、总结4.1、小结4.2、其他4.3、参考资料 概要…