uniapp 多轴图,双轴图,指定哪几个数据在哪个轴上显示
这里使用的在这里导入,
秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场
这里我封装成一个组件,自适应的,可以直接复制到自己的项目中
<template><qiun-data-charts type="mix":opts="opts":chartData="chartData"/>
</template><script>
export default {data() {return {chartData: {},//您可以通过修改 config-ucharts.js 文件中下标为 ['mix'] 的节点来配置全局默认参数,如都是默认参数,此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式,达到页面简洁的需求。opts: {color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],// padding: [15,15,15,15],enableScroll: false,legend: {},xAxis: {disableGrid: true,// title: "单位:年"},yAxis: {disabled: false,disableGrid: false,splitNumber: 5,gridType: "dash",dashLength: 4,gridColor: "#CCCCCC",padding: 10,showTitle: true,data: [{position: "left",title: "折线1"},{position: "right",title: "折线2",// min: 0,// max: 200,},]},extra: {mix: {column: {width: 20}}}}};},methods: {getServerData() {//模拟从服务器获取数据时的延时setTimeout(() => {//模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接let res = {categories: ["2018","2019","2020","2021","2022","2023"],series: [{index: 0,name: "折线1",type: "line",style: "curve",color: "#1890ff",disableLegend: true,data: [70,50,85,130,64,88]},{index: 1,name: "折线2",type: "line",style: "curve",color: "#2fc25b",disableLegend: true,data: [120,140,105,170,95,160]},]};this.chartData = JSON.parse(JSON.stringify(res));}, 500);},},mounted(){this.getServerData();}
};
</script><style scoped>/* 请根据实际需求修改父元素尺寸,组件自动识别宽高 */.charts-box {width: 100%;height: 100%;}
</style>
这里是配置有几个轴
yAxis: {disabled: false,disableGrid: false,splitNumber: 5,gridType: "dash",dashLength: 4,gridColor: "#CCCCCC",padding: 10,showTitle: true,data: [
//配置有几个轴{position: "left",title: "折线1"},{position: "right",title: "折线2",// min: 0,// max: 200,},]},
配置在哪个轴上面,index 0是第一个 index:1 指的是第二个,依次类推
series: [{index: 0, // 配置第几个轴name: "折线1",type: "line",style: "curve",color: "#1890ff",disableLegend: true,//是否在legend中显示,默认不显示data: [70,50,85,130,64,88]},{index: 1,name: "折线2",type: "line",style: "curve",color: "#2fc25b",disableLegend: true,data: [120,140,105,170,95,160]},]
相关文章:
uniapp 多轴图,双轴图,指定哪几个数据在哪个轴上显示
这里使用的在这里导入, 秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场 这里我封装成一个组件,自适应的,可以直接复制到自己的项目中 <template><qiun-data-charts type"mix":opts"opts":cha…...
Kotlin 协程 supervisorScope {} 运行崩溃解决
前言 简单介绍supervisorScope函数,它用于创建一个使用了 SupervisorJob 的 coroutineScope, 该作用域的特点:抛出的异常,不会 连锁取消 同级协程和父协程。 看过很多 supervisorScope {} 文档的使用,我照抄一摸一样…...
【Spring 篇】JdbcTemplate:轻松驾驭数据库的魔法工具
欢迎来到数据库的奇妙世界,在这里,我们将一同揭开Spring框架中JdbcTemplate的神秘面纱。JdbcTemplate是Spring提供的一个简化数据库操作的工具,它为我们提供了一种轻松驾驭数据库的魔法。本篇博客将详细解释JdbcTemplate的基本使用࿰…...
Web开发SpringBoot SpringMVC Spring的学习笔记(包含开发常用工具类)
开发框架学习笔记 一.Spring SpringMVC SpringBoot三者的联系SpringMVC工作原理 二.SpringBoot的学习2.1 注解2.1.1 SpringBoot的核心注解2.1.2 配置导入注解(简化Spring配置写XML的痛苦)Configuration和Bean(人为注册Spring 的 Bean)Import(补)ImportResource(补)AutowiredQua…...
微服务下的SpringSecurity认证端
从三板斧开始微服务下的SpringSecurity开始 一、引入组件包 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-oauth2</artifactId> </dependency> 二、创建适配器 AuthorizationServerConfig…...
苹果电脑菜单栏应用管理软件Bartender 4 mac软件特点
Bartender mac是一款可以帮助用户更好地管理和组织菜单栏图标的 macOS 软件。它允许用户隐藏和重新排列菜单栏图标,从而减少混乱和杂乱。 Bartender mac软件特点 菜单栏图标隐藏:Bartender 允许用户隐藏菜单栏图标,只在需要时显示。这样可以…...
笙默考试管理系统-MyExamTest----codemirror(65)
笙默考试管理系统-MyExamTest----codemirror(65) 目录 一、 笙默考试管理系统-MyExamTest----codemirror 二、 笙默考试管理系统-MyExamTest----codemirror 三、 笙默考试管理系统-MyExamTest----codemirror 四、 笙默考试管理系统-MyExamTest---…...
git在本地创建dev分支并和远程的dev分支关联起来
文章目录 git在本地创建dev分支并和远程的dev分支关联起来1. 使用git命令2. 使用idea2.1 先删除上面建的本地分支dev2.2 通过idea建dev分支并和远程dev分支关联 3. 查看本地分支和远程分支的关系 git在本地创建dev分支并和远程的dev分支关联起来 1. 使用git命令 git checkout…...
【C++】深入了解构造函数之初始化列表
目录 一、再谈构造函数 1、引入 1)构造函数体赋值 2)不同成员变量赋值 2、初始化列表 一、再谈构造函数 1、引入 1)构造函数体赋值 在创建对象时,编译器通过调用构造函数,给对象中各个成员变量一个合适的初始值…...
差分--差分数组快速计算L到R值相加后的数组
目录 差分:思路代码: 原题链接 差分: 输入一个长度为 n 的整数序列。 接下来输入 m 个操作,每个操作包含三个整数 l,r,c ,表示将序列中 [l,r] 之间的每个数加上 c 。 请你输出进行完所有操作后的序列。 输入格式 第…...
《NLP入门到精通》栏目导读(01/2)
一、说明 栏目《NLP入门到精通》本着从简到难得台阶式学习过度。将自然语言处理得知识贯穿过来。本栏目得前导栏目是《深度学习》、《pytorch实践》,因此,读者需要一定得深度学习基础,才能过度到此栏目内容。 二、博客建设理念 本博客基地,将建成人工智能领域的参考资料库;…...
three.js实现电子围栏效果(纹理贴图)
three.js实现电子围栏效果(纹理贴图) 实现步骤 围栏的坐标坐标转换为几何体顶点,uv顶点坐标加载贴图,移动 图例 代码 <template><div class"app"><div ref"canvesRef" class"canvas-…...
DHSP和DNS
一、服务程序 1.1DHCP定义 DHCP(动态主机配置协议)是一个局域网的网络协议。指的是由服务器控制一段IP地址范围,客户机登录服务器时就可以自动获得服务器分配的IP地址和子网掩码。默认情况下,DHCP作为Windows Server的一个服务组…...
Python冒号的解释
1. “没什么首次没有为第二个,跳了三个”。它得到的切片序列的每一个第三个项目。 扩展片是你想要的。新在Python 2.3 2. Python的序列切片地址可以写成[开始:结束:一步]和任何启动,停止或结束可以被丢弃。a[::3]是每第三个序列。…...
uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -后端鉴权拦截器实现
锋哥原创的uniapp微信小程序投票系统实战: uniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )共计21条视频…...
固乔快递查询助手:批量、快速、全面的快递信息查询软件
在快递行业飞速发展的今天,如何高效、准确地掌握快递信息成为了很多人的需求。而固乔快递查询助手正是解决这一难题的利器。 固乔快递查询助手是一款专注于快递信息查询的软件,支持多家主流快递公司查询。用户只需输入单号,即可快速查询到实时…...
C#,归并排序算法(Merge Sort Algorithm)的源代码及数据可视化
归并排序 归并算法采用非常经典的分治策略,每次把序列分成n/2的长度,将问题分解成小问题,由复杂变简单。 因为使用了递归算法,不能用于大数据的排序。 核心代码: using System; using System.Text; using System.Co…...
Linux的网络服务DHCP
一.了解DHCP服务 1.1 DHCP定义 DHCP(动态主机配置协议)是一个局域网的网络协议。指的是由服务器控制一段IP地址范围,客户机登录服务器时就可以自动获得服务器分配的IP地址和子网掩码。默认情况下,DHCP作为Windows Server的一个服…...
【小沐学CAD】开源Assimp库导入三维模型(C++、Python)
文章目录 1、简介2、下载编译3、代码测试3.1 C3.2 pyassimp(Python) 结语 1、简介 https://github.com/assimp/assimp Open Asset Import Library 是一个库,用于将各种 3D 文件格式加载为共享的内存格式。它支持 40 多种用于导入的文件格式和…...
RT-Thread:SPI万能驱动 SFUD 驱动Flash W25Q64,通过 STM32CubeMX 配置 STM32 SPI 驱动
关键词:SFUD,FLASH,W25Q64,W25Q128,STM32F407 说明:RT-Thread 系统 使用 SPI万能驱动 SFUD 驱动 Flash W25Q64,通过 STM32CubeMX 配置 STM32 SPI 驱动。 提示:SFUD添加后的存储位置 1.打开RT-Thread Sett…...
Python学习笔记-使用Anaconda+VSCode配置开发环境
文章目录 概述一、安装Anaconda1.1 下载软件1.2 安装anaconda1.3 配置环境 二、配置虚拟环境2.1 使用conda创建一个新的虚拟环境2.1.1 使用search指令查看支持的python的版本:2.1.2 使用create创建指定版本的虚拟环境:2.1.3 使用env list查看虚拟环境列表…...
RabbitMQ的关键概念解析
RabbitMQ 是一个广泛使用的开源消息代理,它允许应用程序通过复杂的路由和存储机制来交换数据。理解 RabbitMQ 的核心概念对于有效地使用它至关重要。以下是 RabbitMQ 的一些关键概念及其工作流程: 关键概念 生产者(Producer) 生产…...
Python快速排序
快速排序是一种常用的排序算法,它通过递归地将数组分割成较小的子数组,然后对这些子数组进行排序,最终将它们合并成一个有序的数组。具体步骤如下: 1. 选择一个基准元素,通常是数组中的第一个元素。 2. 将数组分成两部…...
SpringBoot整合人大金仓数据库KingBase
1 去KingBase官网下载驱动jar包 2 将解压得到的所有jar包放置在libs目录下(没有就新建一个目录) 3 在pom文件添加相关依赖 <!--添加KingBase所需要的依赖--> <dependency><groupId>com.kingbase</groupId><artifactId>kin…...
Phoenix基本使用
1、Phoenix简介 1.1 Phoenix定义 Phoenix是HBase的开源SQL皮肤。可以使用标准JDBC API代替HBase客户端API来创建表,插入数据和查询HBase数据。 1.2 Phoenix特点 容易集成:如Spark,Hive,Pig,Flume和Map Reduce。性能…...
31-35.玩转Linux操作系统
玩转Linux操作系统 说明:本文中对Linux命令的讲解都是基于名为CentOS的Linux发行版本,我自己使用的是阿里云服务器,系统版本为CentOS Linux release 7.6.1810。不同的Linux发行版本在Shell命令和工具程序上会有一些差别,但是这些差…...
windows下载官方正版notepad++
一、前言 notepad是一款非常好用的编辑器,简洁、快速、高效。可是很多时候我们想去官网下载时,百度出来的都是一堆第三方下载地址,捆绑流氓软件,要么就是付费,作为一款优秀开源软件,我们必须要知道正确的下…...
Jmeter+ant+jenkins持续集成
一、环境准备 1、 jdk环境 要求JDK1.8以上,命令行输入:java -version,出现如下提示说明安装成功。 2、 Jmeter环境 下载Jmeter最新版本,解压即可,添加bin目录到环境变量。 3、 Ant环境 设置ant环境变量࿰…...
利用邮件发送附件来实现一键巡检,附件是通过调用zabbix api生成的word和Excel
HTML部分: <!DOCTYPE html> <html> <head><title>自动巡检</title><!-- 加入CSS样式 --> </head> <body><form id"inspectionForm"><label for"email">邮箱地址:</label>&…...
Linux 常用指令汇总
Linux 常用指令汇总 文章目录 Linux 常用指令汇总[toc]前言一、文件目录指令pwd 指令ls 指令cd 指令mkdir 指令rmdir 指令tree 指令cp 指令rm 指令mv 指令cat 指令more 指令less 指令head 指令tail 指令echo 指令> 指令>> 指令 二、时间日期指令date 指令cal 指令 三、…...
滨海企业做网站多少钱/武汉百度推广seo
Oracle10g中context类型的全文索引也可以自动同步了。10g中新引入了2种同步的方式,现在有3种1、ctx_ddl.sync_index2、sync(on commit)3、sync( every …) in parameter setting while creating indexsync(on commit) 是采用的子事务autonomous transaction ; sync(every ..)…...
华为云云速建站怎样/发软文的网站
一、Java中使用异常处理所带来的好处:1、统一异常处理方式。当问题出现的时候,你也许不清楚该如何处理,但你知道不应该置之不理,在同一个环境里对异常做出正确的决定。(相对于早期C等语言主动检查错误来说)2、降低错误处理代码的复…...
包头住房与城乡建设局网站/seo服务优化
C#概览 C#语言是微软于2000年发布,基于.NET Framewrok框架的、面向对象的高级语言。经过近十三年的发展,经历了5次大的升级,最新版本为C#5.0(对应于.NET Framework 4.5),下面是C#语言发展过程的简单性总结:C#版本.NET …...
有专门做最佳推荐的网站/做网站哪家公司比较好而且不贵
在处理一些高并发任务的接口时,选择FastAPI会相对更合适 [supervisord] minfds65536 minprocs32768[fcgi-program:uvicorn12001] # 定义临时变量通过os.getenv(JCSP_DEPLOY_ENV, local)可以获取 environmentJCSP_DEPLOY_ENV"beta" sockettcp://0.0.0.0:12001 command…...
安徽省住建厅网站官网/郑州疫情最新消息
首先 double mean[4]]{0.}; const double *& haha mean;//error 这种情况是非法的.原因是,这里的const限定的是double,也就是这是一个 “指向const double 的指针变量的引用“,所以,即使这个指针可以被改变,但是指…...
企业网站制作规划/app下载注册推广平台
一,摘要 圣殿骑士首先向大家说声对不起,由于最近身体不适,同时也因为这些天一直在研究微软的云计算平台Windows Azure(公司项目需要),所以暂停了更新WPF 基础到企业应用系列索引,不过经过这几天…...