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

VUE echarts 柱状图、折线图 双Y轴 显示

news 2026/5/16 19:42:05

在这里插入图片描述
weekData: [“1周”,“2周”,“3周”,“4周”,“5周”,“6周”,“7周”,“8周”,“9周”,“10周”], //柱状图横轴
jdslData: [150, 220, 430, 360, 450, 680, 100, 450, 680, 200], // 折线图的数据
cyslData: [100, 200, 400, 300, 500, 500, 500, 450, 480, 400], // 柱状图1的数据
plgtData: [200, 200, 430, 360, 500, 500, 500, 450, 580, 500], // 柱状图2的数据
jdgtData: [300, 200, 100, 400, 100, 200, 100, 350, 380, 300], // 柱状图3的数据
cygtData: [150, 220, 430, 360, 450, 680, 100, 450, 680, 200], // 折线图的数据

  //千分位格式stateFormat(num,n=2,symbol) {// 保证为number类型num = Number(num)if(typeof num!=='number')throw new TypeError('num参数应该是一个number类型');if(n<0)throw new Error('参数n不应该小于0');var hasDot=parseInt(num)!=num;//这里检测num是否为小数，true表示小数var m=(n!=undefined&&n!=null)?n:1;num=m==0?num.toFixed(m)+'.':hasDot?(n?num.toFixed(n):num):num.toFixed(m);symbol=symbol||',';num=num.toString().replace(/(\d)(?=(\d{3})+\.)/g,function(match, p1,p2) {return p1 + symbol;});if(n==0||(!hasDot&&!n)){//如果n为0或者传入的num是整数并且没有指定整数的保留位数，则去掉前面操作中的小数位num=num.substring(0,num.indexOf('.'));}return num;},// xAxisData:x轴的值, lineData1：已接单数量, lineData2：差异数量, barData1:工厂产能工天, barData2：已接单工天 ,lineData3 差异工天drawLine(xAxisData, lineData1, lineData2, barData1, barData2 , barData3){var that = this;let eChart = echarts.init(document.getElementById("echart")); // 基于准备好的dom，初始化echarts实例that.eChart = eChart;eChart.setOption({// 绘制图表title: {text: ""},//悬浮标tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},// formatter: '{a}: {c}', //官方formatter(params) {  //自定义var relVal = params[0].name;for (var i = 0, l = params.length; i < l; i

相关文章：

VUE echarts 柱状图、折线图 双Y轴 显示

weekData: [“1周”,“2周”,“3周”,“4周”,“5周”,“6周”,“7周”,“8周”,“9周”,“10周”], //柱状图横轴 jdslData: [150, 220, 430, 360, 450, 680, 100, 450, 680, 200], // 折线图的数据 cyslData: [100, 200, 400, 300, 500, 500, 500, 450, 480, 400], // 柱状图…...

编程日记 2023/10/13 2:43:18

Django开发之基础篇

Django基础篇 一、Django学习之路由二、Django学习之视图三、Django学习之静态资源 一、Django学习之路由 在 Django 中&#xff0c;路由&#xff08;URL 映射&#xff09;是将请求与视图函数关联起来的关键部分。路由定义了如何将特定的 URL 请求映射到 Django 应用程序中的视…...

编程日记 2023/10/13 2:42:15

在 centos7 上安装Docker

1、检查linux内核 Docker 运行在 CentOS 7 上&#xff0c;要求系统为64位、系统内核版本为 3.10 以上。 Docker 运行在 CentOS-6.5 或更高的版本的 CentOS 上&#xff0c;要求系统为64位、系统内核版本为 2.6.32-431 或者更高版本。 uname -r 2、使用 root 权限登录 Centos…...

编程日记 2023/10/13 2:41:12

基于SpringBoot的大学城水电管理系统

目录 前言 一、技术栈 二、系统功能介绍 管理员模块的实现 领用设备管理 消耗设备管理 设备申请管理 状态汇报管理 用户模块的实现 设备申请 状态汇报 用户反馈 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息技术在管理上越来越深入而广泛…...

编程日记 2023/10/13 2:40:10

微信小程序 movable-view 控制长按才触发拖动 轻轻滑动页面正常滚动效果

今天写 movable-areamovable-view遇到了个头疼的问题 那就是 movable-view 监听了用户拖拽自己 但 我们小程序 上下滚动页面靠的也是拖拽 也就是说 如果放在这里 用户拖动 movable-view部分 就会永远触发不了滚动 那么 我们先可以 加一个 bindlongpress"longpressHandler…...

编程日记 2023/10/13 2:39:08

mysql面试题27：数据库中间件了解过吗？什么是sharding jdbc、mycat，并且讲讲怎么使用？

该文章专注于面试，面试只要回答关键点即可，不需要对框架有非常深入的回答，如果你想应付面试，是足够了，抓住关键点 面试官：数据库中间件了解过吗，比如sharding jdbc、mycat？ 我知道的数据库中间件有以下这些： MySQL Proxy：MySQL Proxy是一个开源的数据库中间件，它位…...

编程日记 2023/10/13 2:36:03

DBCO Sata650，二苯并环辛烷Sata650，Seta-650-DBCO

产品简介&#xff1a; CAS号&#xff1a;N/A 中文名&#xff1a;二苯并环辛烷Sata650 英文名&#xff1a;DBCO Sata650,Seta-650-DBCO 化学式&#xff1a;N/A 分子量&#xff1a;1431.85 纯度标准&#xff1a;95% 供应商&#xff1a;陕西新研博美生物科技有限公司 存储…...

编程日记 2023/10/13 2:35:01

JFLASH基本使用总结

注意&#xff0c;不同版本的操作略有不同&#xff0c;本教程以J-Flash V5.12f为例。 烧录文件 如果是刚打开J-Flash&#xff0c;会弹出这样的一个工程选择界面&#xff0c;可以选择已有工程&#xff0c;或者创建新的工程&#xff0c;我们这里选择创建新工程。 注意&#xff0…...

编程日记 2023/10/13 2:34:00

具身智能（Embodied AI）

前言 图灵奖得主、上海期智研究院院长姚期智认为&#xff0c;人工智能领域下一个挑战将是实现“具身通用人工智能”&#xff0c;即如何构建能够通过自我学习掌握各种技能并执行现实生活中的种种通用任务的高端机器人。清华大学计算机系教授张钹院士&#xff0c;也在某产业智能论…...

编程日记 2023/10/13 2:32:59

C语言的文件写入、读取

目标1&#xff1a;使用C语言的文件操作来实现一次性将输入的数据转换为字符串写入文件&#xff0c;然后逐行读取并进行操作。 模板 #include <stdio.h>int main() {// 打开文件以写入数据FILE *file fopen("data.txt", "w");if (file NULL) {pri…...

编程日记 2023/10/13 2:30:58

CART 算法——决策树

目录 1.CART的生成&#xff1a; &#xff08;1&#xff09;回归树的生成 &#xff08;2&#xff09;分类树的生成 ①基尼指数 ②算法步骤 2.CART剪枝&#xff1a; &#xff08;1&#xff09;损失函数 &#xff08;2&#xff09;算法步骤&#xff1a; CART是英文“class…...

编程日记 2023/10/13 2:29:57

CF1877A Goals of Victory

题目是说&#xff0c;有n个队伍进行足球赛&#xff0c;两两之间进行一场足球赛&#xff0c;会有一个积分&#xff0c;a:b&#xff0c;题目所说的efficiency表示的是一个队伍的得分减去对手队伍的得分 #include<bits/stdc.h> using namespace std;int num[110];int main(…...

编程日记 2023/10/13 2:28:55

018-第三代软件开发-整体介绍

第三代软件开发-整体介绍 文章目录 第三代软件开发-整体介绍项目介绍整体介绍Qt 属性系统QML 最新软件技术框架 关键字&#xff1a; Qt、 Qml、 属性、 Qml 软件架构 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QML&#xff08;Qt Meta-Object …...

编程日记 2023/10/13 2:27:54

储存数据文本json的读写

系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言一、json文本介绍二、json文本的应用三、json文本的操作1、环境配置2、写入文件3、读取文件4、文件格式解析注意的点参考链接前言 认知有限，望大家…...

编程日记 2023/10/13 2:26:53

Java之动态代理的详细解析

2. 动态代理 2.1 好处&#xff1a; 无侵入式的给方法增强功能 2.2 动态代理三要素&#xff1a; 1&#xff0c;真正干活的对象 2&#xff0c;代理对象 3&#xff0c;利用代理调用方法 切记一点&#xff1a;代理可以增强或者拦截的方法都在接口中&#xff0c;接口需要写在…...

编程日记 2023/10/13 2:23:49

github Release 下载加速，绿色合法，遥遥领先

你有没有这样一个困惑&#xff0c;当你寻找了很久终于找到一个解决问题的方案&#xff0c;发现这个工具在 GitHub 上&#xff0c;接下来等待我们的就是遥遥无期的龟速下载。 文章目录 前言下载测试加速下载操作 视频讲解 遥遥领先 前言 GitHub 作为程序员的知识宝库&#xff…...

编程日记 2023/10/13 2:22:49

RabbitMQ消息中间件概述

1.什么是RabbitMQ RabbitMQ是一个由erlang开发的AMQP&#xff08;Advanced Message Queue &#xff09;的开源实现。AMQP 的出现其实也是应了广大人民群众的需求&#xff0c;虽然在同步消息通讯的世界里有很多公开标准&#xff08;如 COBAR的 IIOP &#xff0c;或者是 SOAP 等&…...

编程日记 2023/10/13 2:21:48

12V手电钻保护板如何接线演示

爱做手工的小伙伴们肯定会用到手电钻&#xff0c;那么电池消耗完了&#xff0c;或要换的&#xff0c;或要自己动手做几个备用电源&#xff0c;关键点就是电路保护板的接线。废话不多说&#xff0c;直接上板子看实操。 文章目录 一、线路板图1、输入接线2、输出接线 二、接线方法…...

编程日记 2023/10/13 2:19:44

基于SpringBoot的教学辅助平台

目录 前言 一、技术栈 二、系统功能介绍 学生信息管理 教师信息管理 课程信息管理 科目分类管理 班级分类管理 课程作业管理 交流论坛管理 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理…...

编程日记 2023/10/13 2:18:43

Qt 读写数据流文件（转 CppGuiProgrammingWithQt4）

读取文件&#xff1a; update 20140525&#xff1a;添加线程处理&#xff0c;在读取大文件时优化&#xff0c;防止 app 出现 application 假死状态。 bool SpreadSheet::readFile(const QString &filePath){QFile file(filePath);if ( !file.open(QIODevice::ReadOnly)) …...

编程日记 2023/10/13 2:17:42

Cursor配置管理：使用符号链接与CLI实现多项目环境一键切换

1. 项目概述&#xff1a;为什么我们需要管理Cursor的配置&#xff1f;如果你和我一样&#xff0c;每天大部分时间都泡在Cursor这个AI驱动的代码编辑器里&#xff0c;那你肯定遇到过这样的场景&#xff1a;早上打开电脑&#xff0c;准备开始一个全新的前端项目&#xff0c;你熟练…...

编程新知 2026/5/16 18:55:35

EB Garamond 12：免费复古字体完整指南，如何优雅应用于网页和印刷设计

EB Garamond 12&#xff1a;免费复古字体完整指南&#xff0c;如何优雅应用于网页和印刷设计 【免费下载链接】EBGaramond12 项目地址: https://gitcode.com/gh_mirrors/eb/EBGaramond12 EB Garamond 12是一款基于16世纪经典设计的开源复古字体&#xff0c;为设计师和开…...

编程新知 2026/5/16 18:42:48

极简fastapi框架

# 自己手写一个极简版 FastAPI 框架 class MiniFastAPI:def __init__(self):# 路由表&#xff1a;存储 {("GET", "/url1"): 对应函数}self.router_map {}# 模仿 app.get("/path") 装饰器def get(self, path: str):def decorator(func):# 把 请求…...

编程新知 2026/5/16 17:48:30

3步完成Python界面设计：可视化拖拽工具完全指南

3步完成Python界面设计&#xff1a;可视化拖拽工具完全指南 【免费下载链接】tkinter-helper 为tkinter打造的可视化拖拽布局界面设计小工具 项目地址: https://gitcode.com/gh_mirrors/tk/tkinter-helper 还在为Python界面开发而烦恼吗&#xff1f;手动编写Tkinter代码…...

编程新知 2026/5/16 16:48:52

从零到一：我的CentOS私服游戏搭建实战与避坑指南

1. 环境准备&#xff1a;从零开始的CentOS系统部署 第一次接触游戏私服搭建时&#xff0c;我像大多数新手一样对Linux系统充满敬畏。但实际用CentOS搭建环境比想象中简单——只要避开几个关键雷区。推荐使用CentOS 7.9这个经典版本&#xff0c;它在稳定性和软件兼容性上表现最好…...

编程新知 2026/5/16 16:25:20

WinDirStat：3步快速上手Windows磁盘空间高效管理

WinDirStat&#xff1a;3步快速上手Windows磁盘空间高效管理 【免费下载链接】windirstat WinDirStat is a disk usage statistics viewer and cleanup tool for Microsoft Windows 项目地址: https://gitcode.com/gh_mirrors/wi/windirstat 你是否经常遇到Windows电脑磁…...

编程新知 2026/5/16 15:20:02

Visual C++运行库终极解决方案：一站式修复所有Windows程序依赖问题

Visual C运行库终极解决方案&#xff1a;一站式修复所有Windows程序依赖问题 【免费下载链接】vcredist AIO Repack for latest Microsoft Visual C Redistributable Runtimes 项目地址: https://gitcode.com/gh_mirrors/vc/vcredist 你是否经常遇到"缺少msvcp140.…...

编程新知 2026/5/16 14:16:10

Windows系统信息里藏了多少宝？教你用systeminfo和wmic命令挖出BIOS等硬件详情

Windows命令行高手课&#xff1a;用systeminfo和wmic打造硬件信息查询工具箱 每次打开第三方硬件检测工具时&#xff0c;那些闪烁的广告弹窗是否让你不胜其烦&#xff1f;其实Windows早已内置了一套堪比专业软件的硬件信息查询系统。本文将带你解锁systeminfo和wmic这对黄金组合…...

编程新知 2026/5/16 14:09:23

C++二叉树控制台可视化：从递归布局到层序遍历的图形化实现

1. 项目概述&#xff1a;为什么我们需要“看见”二叉树&#xff1f;在C的学习和数据结构实践中&#xff0c;二叉树是一个绕不开的核心概念。我们经常需要实现它的插入、删除、遍历等操作。然而&#xff0c;无论是调试一个复杂的平衡算法&#xff0c;还是向他人展示你的数据结构…...

编程新知 2026/5/16 13:54:11

Claude思维拟真度已达人类青少年水平？斯坦福HAI联合实测数据+5项认知心理学验证指标

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Claude思维拟真度已达人类青少年水平&#xff1f;斯坦福HAI联合实测数据5项认知心理学验证指标 实验设计与评估框架 斯坦福大学以人为本人工智能研究院&#xff08;HAI&#xff09;联合加州大学伯克利…...

编程新知 2026/5/16 13:41:31