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…

香港公司如何开户 香港公司开户流程 香港公司开户注意事项

香港公司成为越来越多企业的优选注册地&#xff0c;由于其更加开 放的经济政策和国际化的金融市场&#xff0c;吸引了大量的投资者。然而&#xff0c;对于众多企业来说&#xff0c;香港公司的开户过程可能会有一些复杂和繁琐的环节。 香港公司开户流程 开立香港公司账户通常需…

es为什么这么快

es为什么这么快的方式 es的基于Lucene开源搜索引擎&#xff0c;负责文件存储和搜索&#xff0c;支持http请求&#xff0c;以json形式展示 这样介绍你有可能有点迷糊我们详细解释 es 使用的倒排索引的方式&#xff0c;进行数据存储方式&#xff0c;给每一个字段创建索引&…

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

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 …

力扣labuladong——一刷day43

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、力扣257. 二叉树的所有路径二、力扣129. 求根节点到叶节点数字之和三、力扣199. 二叉树的右视图四、力扣662. 二叉树最大宽度 前言 一般来说&#xff0c;如…

「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 通…

Java之反射获取和赋值字段

在Java中&#xff0c;反射能够使得代码更加通用&#xff0c;往往用于工具类中。 但常常我们在获取或者赋值反射的属性时&#xff0c;会出现没有赋值成功的结果&#xff0c;往往是由于这个属性在父级中而导致的&#xff0c;这个时候我们就不能用getDeclaredField方法单独获取字段…

自定义类使用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…

【开题报告】基于微信小程序的滑雪用品库存管理系统的设计与实现

1.引言 滑雪是一项受欢迎的户外运动&#xff0c;在滑雪场和滑雪俱乐部中&#xff0c;需要管理大量的滑雪用品库存。传统的手动管理方式效率低下、容易出错&#xff0c;因此需要一个高效、准确的滑雪用品库存管理系统来提升管理效率和降低错误风险。本文将介绍一种基于微信小程…

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的核…