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

vue柱状图+折线图组合

在这里插入图片描述

<template><div id="main" style="width: 100%;height: 500px; padding-top: .6rem"></div>
</template>
     data() {return {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: [100, 200, 430, 360, 500, 500, 500, 450, 580, 500],  // 柱状图2的数据jdgtData: [300, 200, 100, 400, 100, 200, 100, 350, 380, 300],  // 柱状图3的数据}},drawLine(xAxisData, lineData1, lineData2, barData1, barData2){let eChart = echarts.init(document.getElementById("main")); // 基于准备好的dom,初始化echarts实例this.eChart = eChart;eChart.setOption({// 绘制图表title: {text: ""},tooltip: {formatter: '{a}: {c}'},grid: {left: '3%',right: '3%',bottom: '3%',containLabel: true},legend: {//图例名show: true,data: ['工厂产能工天', '已接单工天', '已接单数量', '差异数量'],x: 'center',        //图例在中间center 左边left 右边righttextStyle: {        //图例字体的颜色color: "#000"   //图例文字}},xAxis: [// x轴 10周{type: "category",axisTick: {show: false, // 坐标轴刻度。},axisLine: {show: true, // 坐标轴轴线。lineStyle: {color: "#eeeeee",},},axisLabel: {// 坐标轴刻度标签的相关设置。inside: false,textStyle: {color: "#999",fontWeight: "normal",fontSize: "12",},},splitLine: {show: false}, // 去除网格线data: xAxisData,},{type: "category",axisLine: {show: false}, // 是否显示坐标轴轴线。axisTick: {show: false}, // 是否显示坐标轴刻度。axisLabel: {show: false}, // 是否显示刻度标签。 柱状图上的标签splitArea: {show: false}, // 是否显示分隔区域。  背景遮罩splitLine: {show: false}, // 是否显示分隔线。},],yAxis: [// y轴{type: "value",axisTick: {show: false,},axisLine: {show: true,lineStyle: {color: "#eeeeee",},},axisLabel: {textStyle: {color: "#bac0c0",fontWeight: "normal",fontSize: "12",},formatter: "{value}",},splitLine: {show: true, // 去除网格线lineStyle: {color: '#f8f8f8'}},}],series: [{ // 柱状图1 工厂产能工天type: "bar",name: '工厂产能工天',itemStyle: {show: true,//color: "#7ca6f8",  // 柱状图的颜色color: "#5470C6",  // 柱状图的颜色borderWidth: 0,borderType: "solid",emphasis: {shadowBlur: 15,shadowColor: "rgba(105,123, 214, 0.7)",},},zlevel: 1,barWidth: 40,data: barData1,},{ // 柱状图2  已接单工天type: "bar",name: '已接单工天',itemStyle: {show: true,// color: "#6ebbb8",color: "#91CC75",borderWidth: 0,borderType: "solid",emphasis: {shadowBlur: 15,shadowColor: "rgba(105,123, 214, 0.7)",},},zlevel: 2,barWidth: 40,data: barData2,},{ // 折线1  已接单数量zlevel: 3,type: "line",name: '已接单数量',color: ["#8d83f7"],  // 拐点颜色symbolSize: 8,   // 拐点的大小symbol: "circle",  // 拐点样式label: {show: true,position: 'top'},data: lineData1,itemStyle: {normal: {lineStyle: {color: "#8d83f7", // 折线的颜色type: "solid" // 折线的类型}}},tooltip: {formatter: '{b}<br/>已接单数量:{c}<br/>'}},{ // 折线2  差异数量zlevel: 4,type: "line",name: '差异数量',color: ["#ef836f"],  // 拐点颜色symbolSize: 8,   // 拐点的大小symbol: "circle",  // 拐点样式label: {show: true,position: 'top'},data: lineData2,itemStyle: {normal: {lineStyle: {color: "#ef836f", // 折线的颜色type: "solid" // 折线的类型}}},tooltip: {formatter: '{b}<br/>差异数量:{c}<br/>'}}],});},that.drawLine(that.weekData,that.jdslData,that.cyslData,that.plgtData,that.jdgtData);

相关文章:

vue柱状图+折线图组合

<template><div id"main" style"width: 100%;height: 500px; padding-top: .6rem"></div> </template>data() {return {weekData: ["1周","2周","3周","4周","5周","6周&…...

js中如何实现一个简单的防抖函数?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 防抖函数⭐ 使用示例⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏…...

mysq 主从同步错误之 Error_code 1032 handler error HA_ERR_KEY_NOT_FOUND

错误说明&#xff1a; MySQL主从同步的1032错误&#xff0c;一般是指要更改的数据不存在&#xff0c;SQL_THREAD提取的日志无法应用故报错&#xff0c;造成同步失败 &#xff08;Update、Delete、Insert一条已经delete的数据&#xff09;。 1032的错误本身对数据一致性没什么影…...

蓝桥杯 题库 简单 每日十题 day4

01 津津上初中了。妈妈认为津津应该更加用功学习&#xff0c;所以津津除了上学之外&#xff0c;还要参加妈妈为她报名的各科复习班。另外每周妈妈还会送她去学习朗诵、舞蹈和钢琴。但是津津如果一天上课超过八个小时就会不高兴&#xff0c;而且上得越久就会越不高兴。假设津津…...

l8-d21 域名解析与http服务器实现原理

一、域名解析gethostbyname函数 主机结构在 <netdb.h> 中定义如下&#xff1a; struct hostent { char *h_name; /* 官方域名 */ char **h_aliases; /* 别名*/ int h_addrtype; /* 地址族&#xff08;地址类型&#xff09; */ int h_l…...

网络安全(黑客技术)自学规划

一、什么是网络安全 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 无论网络、Web、移动、桌面、云等哪个领域&#xff0c;都有攻与防两面性…...

阻止用邮件不停注册wordpress账户的方法

您可以使用多种不同的策略来阻止垃圾邮件注册。以下是一些策略供您参考&#xff1a;第1个最好用 1.完全禁用WordPress注册&#xff1a;如果您不需要在您的WordPress网站上公开注册&#xff0c;最好完全禁用注册&#xff0c;而不是试图打击垃圾邮件注册。要完全禁用WordPress上…...

低代码工具大比拼:哪个最适合你?

低代码开发平台正日益流行&#xff0c;成为企业和开发者们的首选。但是&#xff0c;面对市场上众多的低代码工具&#xff0c;你是否感到困惑呢&#xff1f;今天&#xff0c;就和数聚股份一起探讨一下&#xff0c;究竟应该选择哪个低代码工具才能最好地满足你的需求。 首先&…...

用Python实现链式调用

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 我们在使用Django的models查询数据库时&#xff0c;可以看到有这种写法&#xff1a; form app.models import XXX query XXX.objects.all() query query.filter(name123, age456).filter(salary999)在这种写法里面&#xf…...

基于SSM的汽车租赁后台管理系统

基于SSM的汽车租赁后台管理系统 介绍 包括登录、首页、客户管理、车辆管理、汽车出租、出租单管理、汽车入库、检查单管理、系统管理等功能&#xff0c;适合二次开发课程设计、毕业设计等 软件架构 SSM 运行环境 数据库 mysql 安装教程输入链接说明 端口&#xff1a;3306…...

Word 文档转换 PDF、图片

工作有需要 Word 文档转换 PDF、图片 的场景&#xff0c;我们来看看 Java 开发中怎么解决这个问题的。 Word 转 PDF Word 转 PDF 分为商用 Aspose 方案和开源 Apache POIiText 方案。 Aspose 方案 这种方式在目前来看应该是最好的&#xff0c;无论是转换的速度还是成功的概…...

解决Permission is not allowed后基于Ubuntu23.04安装配置docker与docker-compose

参考&#xff1a;Docker官网-Install Docker Engine on Ubuntu 一、 Install using the Apt repository 1.1 Set up Docker’s Apt repository 1.1.1 Add Docker’s official GPG key # Add Dockers official GPG key: sudo apt-get updatesudo apt-get install ca-certifi…...

[ABC118D] Match Matching

题目传送门 引 题目的描述很形象&#xff0c;梦回童年&#xff0c;注意一下火柴全部都用完 解法 显然 DP , 设计状态&#xff1a; f i : 用完 i 根木棒凑出的最大数 f_i:用完i根木棒凑出的最大数 fi​:用完i根木棒凑出的最大数 状态转移&#xff1a; f i → f i c n t …...

程序员必须掌握哪些算法?

目录 简介1. 冒泡排序&#xff08;Bubble Sort&#xff09;思想 2. 快速排序&#xff08;Quick Sort&#xff09;思想 3. 二分查找&#xff08;Binary Search&#xff09;思想 4. 归并排序&#xff08;Merge Sort&#xff09;思想 5. 插入排序&#xff08;Insertion Sort&#…...

Java高级之File类、节点流、缓冲流、转换流、标准I/O流、打印流、数据流

第13章 IO流 文章目录 一、File类的使用1.1、如何创建File类的实例1.2、常用方法1.2.1、File类的获取功能1.2.2、File类的重命名功能1.2.3、File类的判断功能1.2.4、File类的创建功能1.2.5、File类的删除功能 二、IO流原理及流的分类2.1、Java IO原理2.2、流的分类/体系结构 三…...

解决WSL2占用内存过多问题(Docker on WSL2: VmmemWSL)

解决WSL2占用内存过多问题&#xff08;Docker on WSL2: VmmemWSL&#xff09; 一、问题描述二、问题解决2.1 创建.wslconfig文件2.2 重启wsl2 一、问题描述 安装完WSL2后&#xff0c;又安装了Docker&#xff0c;使用了一段时间&#xff0c;发现电脑变卡&#xff0c;进一步查看…...

华为云云耀云服务器L实例评测|了解配置和管理L型云服务器

华为云云耀云服务器L实例配置和管理教程 华为云云耀云服务器L实例的介绍概述特点优势与弹性云服务器&#xff08;ECS&#xff09;的对比 注册和创建L型云服务器注册华为云账号创建L型云服务器实例配置实例参数配置其他参数尝试登录 远程登录 L实例查看公网ip通过本地shell远程连…...

【面试题】——Java基础篇(33题)

文章目录 1. 八大基本数据类型分类2. 重写和重载的区别3. int和integer区别4. Java的关键字5. 什么是自动装箱和拆箱&#xff1f;6. 什么是Java的多态性&#xff1f;7. 接口和抽象类的区别&#xff1f;8. Java中如何处理异常&#xff1f;9. Java中的final关键字有什么作用&…...

记一次 .NET 某电力系统 内存暴涨分析

一&#xff1a;背景 1. 讲故事 前些天有位朋友找到我&#xff0c;说他生产上的程序有内存暴涨情况&#xff0c;让我帮忙看下怎么回事&#xff0c;最简单粗暴的方法就是让朋友在内存暴涨的时候抓一个dump下来&#xff0c;看一看大概就知道咋回事了。 二&#xff1a;Windbg 分…...

1.SpringEL初始

SpringEL初始 文章目录 SpringEL初始什么是SpringELSpring BeansSpring EL以XML形式Spring EL以注解形式启用自动组件扫描 执行输出 什么是SpringEL Spring EL与OGNL和JSF EL相似&#xff0c;计算评估或在bean创建时执行。此外&#xff0c;所有的Spring表达式都可以通过XML或注…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...