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.hqwc.cn/news/133337.html

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

相关文章

pytorch学习第二篇:张量

tensor与numpy import torch import numpy as npnumpy数组 到 张量tensor n np.ones(5) t torch.from_numpy(n)NumPy 数组中的变化反映在张量中 np.add(n, 1, outn) print(f"t: {t}") print(f"n: {n}")张量到 NumPy 数 t torch.ones(5) print(f&quo…

消除springboot+thymeleaf时页面的红色波浪线告警

setting->Editor->Inspections取消掉Thymeleaf的√ 效果&#xff1a;

敏捷开发流程图Scrum

敏捷开发中的Scrum流程通常可以用一个简单的流程图来表示&#xff0c;以便更清晰地展示Scrum框架的各个阶段和活动。以下是一个常见的Scrum流程图示例&#xff1a; 转自&#xff1a;Leangoo.com 免费敏捷工具 这个流程图涵盖了Scrum框架的主要阶段和活动&#xff0c;其中包括&…

基于Springboot实现商务安全邮箱邮件收发系统项目【项目源码+论文说明】计算机毕业设计

基于Springboot实现商务安全邮箱邮件收发系统演示 摘要 随着社会的发展&#xff0c;社会的方方面面都在利用信息化时代的优势。计算机的优势和普及使得商务安全邮箱的开发成为必需。 本文以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&#xff0c;采用jsp技术…

基于小波变换的分形信号r指数求解算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ................................................................... %通过功率谱密度曲线…

Python高效实现网站数据挖掘

在当今互联网时代&#xff0c;SEO对于网站的成功至关重要。而Python爬虫作为一种强大的工具&#xff0c;为网站SEO带来了革命性的改变。通过利用Python爬虫&#xff0c;我们可以高效地实现网站数据挖掘和关键词分析&#xff0c;从而优化网站的SEO策略。本文将为您详细介绍如何利…

uniapp 微信小程序 vue3.0+TS手写自定义封装步骤条(setup)

uniapp手写自定义步骤条&#xff08;setup&#xff09; 话不多说 先上效果图&#xff1a; setup.vue组件代码&#xff1a; <template><view class"stepBox"><viewclass"stepitem"v-for"(item, index) in stepList":key"i…

华为云云耀云服务器L实例评测 | 实例评测使用之硬件参数评测:华为云云耀云服务器下的 Linux 网络监控神器 bmon

华为云云耀云服务器L实例评测 &#xff5c; 实例评测使用之硬件参数评测&#xff1a;华为云云耀云服务器下的 Linux 网络监控神器 bmon 介绍华为云云耀云服务器 华为云云耀云服务器 &#xff08;目前已经全新升级为 华为云云耀云服务器L实例&#xff09; 华为云云耀云服务器是什…

cocos2d-x C++与Lua交互

Cocos版本&#xff1a; 3.10 Lua版本&#xff1a; 5.1.4 环境&#xff1a; window Visual Studio 2013 Lua Lua作为一种脚本语言&#xff0c; 它的运行需要有宿主的存在&#xff0c;通过Lua虚拟栈进行数据交互。 它的底层实现是C语言&#xff0c;C语言封装了很多的API接口&a…

pycharm连接gitlab

1、下载安装gitlab 下载地址&#xff1a;Git - Downloading Package 下载后傻瓜式安装&#xff0c;注意勾选配置环境变量 未配置自己配置&#xff0c;电脑-属性-高级系统配置-环境变量 系统变量path&#xff1a;添加git安装目录下bin目录 2、检验安装完成 桌面右键git-open…

XXE漏洞复现实操

文章目录 一、漏洞原理二、验证payload三、没有回显时的验证四、漏洞特征五、读取文件六、Base64加密读取七、端口检测八、使用php检测端口九、dtd外部实体读取文件十、Xxe漏洞防御 一、漏洞原理 (1)XXE漏洞全称XML External Entity Injection&#xff0c;即xmI外部实体注入漏…

webpack 解决:Cannot use import statement outside a module 的问题

1、问题描述&#xff1a; 其一、报错为&#xff1a; Uncaught SyntaxError: Cannot use import statement outside a module; 中文为&#xff1a; 未捕获的语法错误&#xff1a;无法在模块外部使用 import 语句; 其二、问题描述为&#xff1a; 在项目打包的时候 npm run …