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], // 柱状图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++) {//relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value).toFixed(0)relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + that.stateFormat(params[i].value,0)}return relVal;},},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",color: '#cccccc'}},axisLabel: {// 坐标轴刻度标签的相关设置inside: false,textStyle: {color: "#999",fontWeight: "normal",fontSize: "12",},},splitLine: {show: false}, // 去除网格线axisPointer: {type: 'shadow',},data: xAxisData,},{type: "category",axisLine: {show: false}, // 是否显示坐标轴轴线axisTick: {show: false}, // 是否显示坐标轴刻度axisLabel: {show: false}, // 是否显示刻度标签 柱状图上的标签splitArea: {show: false}, // 是否显示分隔区域 背景遮罩splitLine: {show: false}, // 是否显示分隔线},],yAxis: [// y轴{type: "value",max: value => {const { max, min } = value;const absMax = Math.max(Math.abs(max), Math.abs(min));return Math.floor(absMax * 1.2);} ,min: value => {const { max, min } = value;const absMax = Math.max(Math.abs(max), Math.abs(min));return Math.floor(-absMax * 1.2);},axisTick: {show: false,},axisLine: {show: true,lineStyle: {//color: "#eeeeee",color: '#cccccc'},},axisLabel: {textStyle: {color: "#bac0c0",fontWeight: "normal",fontSize: "12",},formatter: "{value}",},splitLine: {show: true, // 去除网格线lineStyle: {color: '#f8f8f8',}},},{type: "value",max: value => {const { max, min } = value;const absMax = Math.max(Math.abs(max), Math.abs(min));return Math.floor(absMax * 1.2);} ,min: value => {const { max, min } = value;const absMax = Math.max(Math.abs(max), Math.abs(min));return Math.floor(-absMax * 1.2);},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: '已接单工天',yAxisIndex: 1 ,itemStyle: {show: true,// color: "#6ebbb8",color: "#91CC75",borderWidth: 0,borderType: "solid",emphasis: {shadowBlur: 15,shadowColor: "rgba(105,123, 214, 0.7)",},},label: {show: true,position: 'insideRight',// formatter: '{c}'// formatter(params) {  //自定义//     relVal = that.stateFormat(params.value,0);//     return relVal;// },},zlevel: 2,barWidth: 40,data: barData2,},{ // 柱状图1 工厂差异工天type: "bar",name: '差异工天',yAxisIndex: 1 ,itemStyle: {show: true,//color: "#7ca6f8",  // 柱状图的颜色color: "#5470C6",  // 柱状图的颜色borderWidth: 0,borderType: "solid",emphasis: {shadowBlur: 15,shadowColor: "rgba(105,123, 214, 0.7)",},},label: {show: true,position: 'insideRight',// formatter: '{c}'// formatter(params) {  //自定义//     relVal = that.stateFormat(params.value,0);//     return relVal;// },},zlevel: 1,barWidth: 40,data: barData3,},{ // 折线1  已接单数量zlevel: 3,type: "line",name: '已接单数量',color: ["#8d83f7"],  // 拐点颜色symbolSize: 8,   // 拐点的大小symbol: "circle",  // 拐点样式label: {show: true,position: 'top',// formatter: '{c}'// formatter(params) {  //自定义//     relVal = that.stateFormat(params.value,0);//     return relVal;// },},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',// formatter: '{c}'// formatter(params) {  //自定义//     relVal = that.stateFormat(params.value,0);//     return relVal;// },},data: lineData2,itemStyle: {normal: {lineStyle: {color: "#ef836f", // 折线的颜色type: "solid" ,   // 折线的类型}}},// tooltip: {//     formatter: '{b}<br/>差异数量：{c}<br/>',// }}],});},

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

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

相关文章

python flask接口字段存在性校验函数（http接口字段校验）（返回提示缺少的字段信息）validate_fields()

python flask接口字段存在性校验函数（http接口字段校验）（返回提示缺少的字段信息）validate_fields()

文章目录 字段存在性校验示例 字段存在性校验 from flask import Flask, request, jsonifyapp Flask(__name__)def validate_fields(data, fields):missing_fields [field for field in fields if field not in data]if missing_fields:return False, f"缺少以下字段: …
阅读更多...
算法解析：LeetCode——机器人碰撞和最低票价

算法解析：LeetCode——机器人碰撞和最低票价

摘要&#xff1a;本文由葡萄城技术团队原创并首发。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 机器人碰撞 问题&#xff1a; 现有 n 个机器人&#xff0c;编号从 1 开始&#xff0c;每个…
阅读更多...
ubuntu 安装jdk21开发环境

ubuntu 安装jdk21开发环境

下载 wget https://download.oracle.com/java/21/latest/jdk-21_linux-x64_bin.tar.gz 第二步&#xff1a;解压 tar -zxvf jdk-21_linux-x64_bin.tar.gz 第三步&#xff1a;移动 jdk-21 目录到 /usr/local/jdk21 第四步&#xff1a;配置环境变量 sudovim/etc/profile vim/etc/…
阅读更多...
Excel 的单元格内容和单元格格式

Excel 的单元格内容和单元格格式

文章目录 单元格内容单元格格式常规格式数字格式 单元格内容 文本&#xff1a;只要不是纯数字&#xff0c;Excel 都默认是文本格式。 在 Excel 中&#xff0c;逻辑值只有两个&#xff1a;True 和 False。 全选一片区域&#xff0c;按 Delet 键删除内容时&#xff0c;确实可以删…
阅读更多...
VTK编译解决CMake的“could not find any instance of Visual Studio”的问题

VTK编译解决CMake的“could not find any instance of Visual Studio”的问题

1、在配置VTK源码编译的过程中&#xff0c;遇到报错 “CMake的“could not find any instance of Visual Studio””,cmake在编程找不到vs2017路径或者配置不全。 解决方案&#xff1a; 安装“Visual Studio Installer”&#xff1b; 1.检查是否安装 “使用C的桌面开发” 2.检…
阅读更多...
ACP.复盘方法

ACP.复盘方法

复盘要怎么做的有水准&#xff0c;让领导满意&#xff0c;方式方法很重要。今天给你们安利5种复盘方法&#xff0c;保准你省事&#xff0c;领导还满意。 一、KPT复盘法 7月份年中一直在做和复盘相关的事&#xff0c;像公司的OKR复盘、年中战略规划&#xff0c;不过日常很多生…
阅读更多...
力扣刷题 day43：10-13

力扣刷题 day43：10-13

1.完全平方数 给你一个整数 n &#xff0c;返回 和为 n 的完全平方数的最少数量 。 完全平方数 是一个整数&#xff0c;其值等于另一个整数的平方&#xff1b;换句话说&#xff0c;其值等于一个整数自乘的积。例如&#xff0c;1、4、9 和 16 都是完全平方数&#xff0c;而 3 …
阅读更多...
SOLIDWORKS® 2024 新功能 - 3D CAD

SOLIDWORKS® 2024 新功能 - 3D CAD

1、 先前版本的兼容性 • 利用您订阅的 SOLIDWORKS&#xff0c;可将您的 SOLIDWORKS 设计作品保存为旧版本&#xff0c;与使用旧版本 SOLIDWORKS 的供应商无缝协作。 • 可将零件、装配体和工程图保存为新版本前两年之内的SOLIDWORKS 版本。 优点&#xff1a; 即使其他用户正…
阅读更多...
内存空间的分配与回收之连续分配管理方式

内存空间的分配与回收之连续分配管理方式

1.连续分配管理方式 连续分配:指为用户进程分配的必须是一个连续的内存空间。 1.单一连续分配 在单一连续分配方式中&#xff0c;内存被分为系统区和用户区。系统区通常位于内存的低地址部分&#xff0c;用于存放操作系统相关数据;用户区用于存放用户进程相关数据。内存中只…
阅读更多...
多服务器云探针源码(服务器云监控)/多服务器多节点_云监控程序python源码

多服务器云探针源码(服务器云监控)/多服务器多节点_云监控程序python源码

源码简介&#xff1a; 多服务器云探针源码(服务器云监控),支持python多服务器多节点&#xff0c;云监控程序源码。它是一款很实用的云探针和服务器云监控程序源码。使用它可以帮助管理员能够快速监控和管理各种服务器和节点&#xff0c;实用性强。 源码链接&#xff1a; 网盘…
阅读更多...
【机器学习】sklearn特征选择（feature selection）

【机器学习】sklearn特征选择（feature selection）

文章目录 特征工程过滤法&#xff08;Filter&#xff09;方差过滤相关性过滤卡方过滤F验表互信息法小结 嵌入法&#xff08;Embedded&#xff09;包装法&#xff08;Wrapper&#xff09; 特征工程 特征提取(feature extraction)特征创造(feature creation)特征选择(feature se…
阅读更多...
lv8 嵌入式开发-网络编程开发 17 套接字属性设置

lv8 嵌入式开发-网络编程开发 17 套接字属性设置

1 基本概念 设置套接字的选项对套接字进行控制除了设置选项外&#xff0c;还可以获取选项选项的概念相当于属性&#xff0c;所以套接字选项也可说是套接字属性有些选项&#xff08;属性&#xff09;只可获取&#xff0c;不可设置&#xff1b;有些选项既可设置也可获取 2 选项…
阅读更多...
Ansible概述和模块解释

Ansible概述和模块解释

一、Ansible概述 Ansible介绍 Ansible是一个基于Python开发的配置管理和应用部署工具&#xff0c;现在也在自动化管理领域大放异彩。它融合了众多老牌运维工具的优点&#xff0c;Pubbet和Saltstack能实现的功能&#xff0c;Ansible基本上都可以实现。 Ansible能做什么 Ansi…
阅读更多...
呼吁社区共同维护Sui品牌和商标

呼吁社区共同维护Sui品牌和商标

Sui社区成员可以通过举报Sui商标和品牌资产的不当使用来帮助保护网络的信誉。Sui商标政策解释了logo和名称的可接受和不可接受的使用方式。这些展示代表Sui面向公众&#xff0c;而善意行为者的正确使用有助于维护Sui的声誉。 Sui网络在公众中享有良好声誉&#xff0c;Sui社区都…
阅读更多...
GEO生信数据挖掘（七）差异基因分析

GEO生信数据挖掘（七）差异基因分析

上节&#xff0c;我们使用结核病基因数据&#xff0c;做了一个数据预处理的实操案例。例子中结核类型&#xff0c;包括结核&#xff0c;潜隐进展&#xff0c;对照和潜隐&#xff0c;四个类别。本节延续上个数据&#xff0c;进行了差异分析。 差异分析 计算差异指标step12 加载…
阅读更多...
API攻防-接口安全SOAPOpenAPIRESTful分类特征导入项目联动检测

API攻防-接口安全SOAPOpenAPIRESTful分类特征导入项目联动检测

文章目录 概述什么是接口&#xff1f; 1、API分类特征SOAP - WSDLWeb services 三种基本元素&#xff1a; OpenApi - Swagger UISpringboot Actuator 2、API检测流程Method&#xff1a;请求方法URL&#xff1a;唯一资源定位符Params&#xff1a;请求参数Authorization&#xff…
阅读更多...
阿里云r7服务器内存型CPU采用

阿里云r7服务器内存型CPU采用

阿里云服务器ECS内存型r7实例是第七代内存型实例规格族&#xff0c;CPU采用第三代Intel Xeon可扩展处理器&#xff08;Ice Lake&#xff09;&#xff0c;基频2.7 GHz&#xff0c;全核睿频3.5 GHz&#xff0c;计算性能稳定&#xff0c;CPU内存比1:8&#xff0c;2核16G起步&#…
阅读更多...
NSIDC定义的海冰相关概念

NSIDC定义的海冰相关概念

文章目录 相关概念Matlab绘图结果展示 相关概念 NSIDC 表示 “National Snow and Ice Data Center”&#xff0c;即美国国家雪和冰数据中心。NSIDC 是一个位于美国科罗拉多大学波尔得分校的研究中心&#xff0c;致力于收集、管理和分发全球雪和冰的科学数据。 Matlab绘图 cl…
阅读更多...
2015架构真题（五十）

2015架构真题（五十）

供应链中信息流覆盖了供应商、制造商和分销商&#xff0c;信息流分为需求信息流和供应信息流&#xff0c;&#xff08;&#xff09;属于需求信息流&#xff0c;&#xff08;&#xff09;属于供应信息流。 库存记录生产计划商品入库单提货发运单 客户订单采购合同完工报告单销售…
阅读更多...
迅为RK3568开发板Scharr滤波器算子边缘检测

迅为RK3568开发板Scharr滤波器算子边缘检测

本小节代码在配套资料“iTOP-3568 开发板\03_【iTOP-RK3568 开发板】指南教程\04_OpenCV 开发配套资料\33”目录下&#xff0c;如下图所示&#xff1a; 在 Sobel 算子算法函数中&#xff0c;如果设置 ksize-1 就会使用 3x3 的 Scharr 滤波器。Scharr 算子是 Soble 算子在 ksize…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023