echarts使用整理

4、条形分区统计

<div ref="chartsVal1" class="chartsline-div"></div>
const chartsVal1 = ref(null);
const chartsVal1Title = ref('运行时间统计');drewCharts2(chartsVal1, chartsVal1Title.value);function drewCharts2(id, title) {const mapChart = echarts.init(id.value);window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图// const lineData: number[][] = Array.from({ length: 4 }, () => Array(25).fill(0));const grid = {left: 100,right: 100,top: 50,bottom: 30};const series: echarts.BarSeriesOption[] = ['运行时间','待机时间','报警时间','离线时间',].map((name, sid) => {return {name,type: 'bar',stack: 'total',barWidth: '20%',label: {show: true,// formatter: (params: any) => Math.round(params.value * 1000) / 10 + '%'},data: lineData[sid].map((d, did) =>d),};});const option = {legend: {selectedMode: false},grid,color: ['rgb(21,184,120)', 'rgb(255,207,41)', 'rgb(252,85,62)', 'rgb(155,201,238)',],yAxis: {name: '时间(min)',type: 'value'},xAxis: {name: '日期时间',type: 'category',data: categoryTime.value},series,tooltip: {trigger: "item",// axisPointer: {//     type: "shadow"// },// formatter: function (params) {//     let name = params.name == 1 ? "设备报警" : "系统报警";//     return params.marker + name + "：" + params.value;// }},};// Generate data// let category = this.motorStatusCategory;// let lineData = data;// let option = this.getOptions1(id, title);// option// let option = {//     title: {//         text: title,//         // subtext: 'Example in MetricsGraphics.js',//         left: 'center'//     },//     tooltip: {//         trigger: "axis",//         axisPointer: {//             type: "shadow"//         }//     },//     grid: {//         left: 50,//         right: 20,//         bottom: 30,//         top: 10//     },//     legend: {//         data: ["line"],//         textStyle: {//             color: "#ccc"//         }//     },//     xAxis: {//         minInterval: 1,//         maxInterval: 2,//         data: category,//         axisLine: {//             lineStyle: {//                 color: "#ccc"//             }//         }//     },//     yAxis: {//         max: 100,//         min: minVal,//         splitLine: { show: false },//         axisLine: {//             lineStyle: {//                 color: "#ccc"//             }//         }//     },//     series: [//         {//             name: title,//             type: "line",//             smooth: true,//             showAllSymbol: true,//             symbol: "emptyCircle",//             symbolSize: 15,//             data: lineData//         },//     ]// };mapChart.setOption(option); //生成图表
};

3、饼图（展示百分比+分数）

<el-col class="charts-percentage-col" :span="12"><div ref="charts1" class="chartspie-div"></div><div class="charts-percentage-div">{{ chartsData.overduePercentage }}</div>
</el-col>
function getChartsData() {let data = {total: 99,overdue: 33,soon: 33,normal: 33,};data.overdueProportion = overdueFraction(data.overdue, data.total);data.soonProportion = overdueFraction(data.soon, data.total);data.normalProportion = overdueFraction(data.normal, data.total);data.overduePercentage = overduePercentage(data.overdue, data.total);data.soonPercentage = overduePercentage(data.soon, data.total);data.normalPercentage = overduePercentage(data.normal, data.total);console.log(data);chartsData.value = data;
};function overduePercentage(num, total) {if (!total || total === 0) {return '0.00%';}const percentage = (num / total) * 100;return percentage.toFixed(2) + '%';
};function overdueFraction(num, total) {function gcd(a, b) {return b ? gcd(b, a % b) : a;};if (!total || total === 0) {return '0/0';}const commonDivisor = gcd(Math.abs(num), Math.abs(total));// return (num /commonDivisor) + '/' (total / commonDivisor);// return num / total;return (num / commonDivisor) + ' / ' + (total / commonDivisor);};function initCharts() {drewCharts1(charts1, charts1Title.value);drewCharts1(charts2, charts2Title.value);drewCharts1(charts3, charts3Title.value);
};function drewCharts1(id, title) {const mapChart = echarts.init(id.value);window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图const options = {grid: {// left: 140,// right: 120,// bottom: -30,// top: 0},angleAxis: {startAngle: 90, // 开始位置clockwise: true,// 是否顺时针// max: 100,// 坐标轴最大值100axisLine: {show: false // 不显示坐标轴},splitNumber: 1,axisTick: {show: false,//是否展示刻度},axisTick: {show: false,//是否展示刻度// length: 2,// 刻度长度// splitNumber: 20},},radiusAxis: {type: 'category',axisLine: {show: false},axisTick: {show: false,//是否展示刻度length: 2,// 刻度长度splitNumber: 20},axisLabel: {inside: false}},polar: {center: ['50%', '60%'],radius: ['45%', '100%'],},series: [{type: 'bar',data: [{value: 20,itemStyle: {// color: '#f5a623',borderRadius: ['50%', '50%', '50%', '50%'],}},],coordinateSystem: 'polar',name: title,stack: 'a',barMaxWidth: '27%', // 柱状图的粗细},{type: 'bar',data: [{value: 100 - 20,itemStyle: {color: '#eceef0',borderRadius: ['50%', '50%', '50%', '50%'],}},],coordinateSystem: 'polar',name: '其他',stack: 'a',barMaxWidth: '27%', // 柱状图的粗细}],tooltip: {trigger: "item",// formatter: "{a} <br/>{b}: {c} ({d}%)"},};switch (id) {case charts1:options.series[0].data[0].value = chartsData.value.overdue;options.series[1].data[0].value = chartsData.value.total - chartsData.value.overdue;options.series[0].data[0].itemStyle.color = '#F2637B';break;case charts2:options.series[0].data[0].value = chartsData.value.soon;options.series[1].data[0].value = chartsData.value.total - chartsData.value.soon;options.series[0].data[0].itemStyle.color = '#36CBCB';break;case charts3:options.series[0].data[0].value = chartsData.value.normal;options.series[1].data[0].value = chartsData.value.total - chartsData.value.normal;options.series[0].data[0].itemStyle.color = '#3AA1FF';break;default:break;}mapChart.setOption(options); //生成图表
};

2、折线图（带平均值）

getSeries1(id, title) {const serie = {name: title,type: "line",smooth: true,showAllSymbol: true,symbol: "emptyCircle",symbolSize: 15,// data: lineData};const series = [];if (id == 'charts2') {for (let i = 0; i < 3; i++) {let serie = {name: title,type: "line",smooth: true,showAllSymbol: true,symbol: "emptyCircle",symbolSize: 15,// data: lineData};series.push(serie);}series[0].data = this.chartsData.map(item => item.disturbancePercentageCurrent);series[0].name = '当前';series[1].data = this.chartsData.map(item => item.disturbancePercentageMax);series[1].name = '最大';series[2].data = this.chartsData.map(item => item.disturbancePercentageMin);series[2].name = '最小';} else {if (id == 'charts3') {serie.data = this.chartsData.map(item => item.overheatPercentage);// series[0] = serie;} else if (id == 'charts1') {serie.data = this.chartsData.map(item => item.torquePercentage);// series[0] = serie;} else if (id == 'chartsVal1') {serie.data = this.chartsData.map(item => item.torqueMax);} else if (id == 'chartsVal2') {serie.data = this.chartsData.map(item => item.disturbanceTorqueMax);} else if (id == 'chartsVal3') {serie.data = this.chartsData.map(item => item.pulseDifferenceMax);}serie.markPoint = {data: [{ type: 'max', name: 'Max' },{ type: 'min', name: 'Min' }]};serie.markLine = {data: [{ type: 'average', name: 'Avg' }]};series[0] = serie;}return series;},getOptions1(id, title) {const minVal = id == 'charts2' ? -100 : 0;let category = this.motorStatusCategory;const options = {title: {text: title,// subtext: 'Example in MetricsGraphics.js',left: 'center',},tooltip: {trigger: "axis",axisPointer: {type: "shadow"},formatter: function (params) {let text = params[0].axisValueLabel + "</br>";for (var i = 0; i < params.length; i++) {text += params[i].marker + params[i].seriesName + "：" + parseFloat(params[i].value).toFixed(2);if (params[0].seriesName == '扭矩百分比' || `${id}` == '当前' || `${id}` == '过热率百分比') {text += "%</br>";} else {text += "</br>";}}return text;}},grid: {left: 50,right: 60,bottom: 30,top: '20%'},legend: {data: ["line"],textStyle: {color: "#ccc"}},xAxis: {name: '日期\n时间',minInterval: 1,maxInterval: 2,data: category,axisLine: {lineStyle: {color: "#ccc"}}},yAxis: {name: '%',// max: 100,min: minVal,splitLine: { show: false },axisLine: {lineStyle: {color: "#ccc"}}},// series: [//     {//         name: title,//         type: "line",//         smooth: true,//         showAllSymbol: true,//         symbol: "emptyCircle",//         symbolSize: 15,//         data: lineData//     },// ]};if (id == 'charts2') {options.yAxis.max = 100;}const series = this.getSeries1(id, title);options.series = series;return options;},

1、地图展示

//中国地图china_map() {let mapChart = this.$echarts.init(document.getElementById("china-map")); //图表初始化，china-map是绑定的元素window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图let series = [];series.push({type: "scatter",coordinateSystem: "geo",symbol: "pin",legendHoverLink: true,symbolSize: [60, 60],// 这里渲染标志里的内容以及样式label: {show: true,formatter(value) {return value.data.value[2].cityName;},color: "#fff"},// 标志的样式itemStyle: {normal: {color: "rgba(255,0,0,.7)",shadowBlur: 2,shadowColor: "D8BC37"}},// 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义// 至于如何展示，完全是靠上面的formatter来自己定义的// data: [// 	// { name: "西藏", value: [91.23, 29.5, 2333] },// 	// { name: "黑龙江", value: [128.03, 47.01, 1007] },// 	// { name: "新疆", value: [86.9023, 41.148, 507] },// 	// { name: "内蒙古", value: [110.5977, 41.3408, 407] },// 	// { name: "广西", value: [108.7813, 23.6426, 777] },// 	// { name: "陕西", value: [108.5996, 33.7396, 907] },// 	// { name: "四川", value: [102.9199, 30.1904, 207] },// 	{ name: "苏州市", value: [120.619585, 31.299379, { city: "苏州市" }] },// 	{ name: "南京市", value: [118.767413, 32.041544, { city: "南京市" }] }// ],data: this.mapData,showEffectOn: "render",rippleEffect: {brushType: "stroke"},hoverAnimation: true,zlevel: 1});// {//   type: "effectScatter",//   coordinateSystem: "geo",//   effectType: "ripple",//   showEffectOn: "render",//   rippleEffect: {//     period: 10,//     scale: 10,//     brushType: "fill",//   },//   hoverAnimation: true,//   itemStyle: {//     normal: {//       color: "rgba(255, 235, 59, .7)",//       shadowBlur: 10,//       shadowColor: "#333",//     },//   },//   zlevel: 1,//   data: [//     { name: "西藏", value: [91.23, 29.5, 2333] },//     { name: "黑龙江", value: [128.03, 47.01, 1007] },//   ],// },let option = {// 背景颜色// 提示浮窗样式tooltip: {show: true,trigger: "item",alwaysShowContent: false,backgroundColor: "#0C121C",borderColor: "#293171",hideDelay: 100,triggerOn: "mousemove",enterable: true,textStyle: {color: "#DADADA",fontSize: "12",width: 20,height: 30,overflow: "break"},showDelay: 100,formatter(params) {// return `地区：${params.name}`;//地区：${params.name}</br>装置：${params.value[2].city}return `名称：${params.value[2].name}</br>所在城市：${params.value[2].cityName}</br>`;}},// 地图配置geo: {map: "china",label: {// 通常状态下的样式normal: {show: true,textStyle: {color: "#fff"}},// 鼠标放上去的样式emphasis: {textStyle: {color: "#fff"}}},// 地图区域的样式设置itemStyle: {normal: {borderColor: "#293171", //地图边框颜色borderWidth: 2, //地图边框粗细areaColor: "#0A0F33" //地图背景色},//省份地图阴影emphasis: {areaColor: null,shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 1,shadowColor: "#fff"}}},series: series};mapChart.setOption(option); //生成图表//this.chinaMapHidden(mapChart);},

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

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

相关文章

ubuntu下的chattts 学习6：音色固定的学习

ubuntu下的chattts 学习6：音色固定的学习

魔搭社区 该区提供了随机种子级音乐的试听与下载。 spk torch.load(<PT-FILE-PATH>) params_infer_code {spk_emb: spk, } 略 测试过程&#xff1a; 1.先建一个文件夹&#xff1a;然后从上面的网站上下载了两个。放在里面测试 2 2.测试代码 import ChatTTS impo…
阅读更多...
数据集的重要性：如何构建AIGC训练集

数据集的重要性：如何构建AIGC训练集

文章目录 一、为什么数据集对AIGC如此重要&#xff1f;1. 数据决定模型的知识边界2. 数据质量直接影响生成效果3. 数据集多样性提升模型鲁棒性 二、构建AIGC训练集的关键步骤1. 明确目标任务和生成需求2. 数据源的选择3. 数据清洗与预处理4. 数据标注5. 数据增强 三、针对不同类…
阅读更多...
47 基于单片机的书库环境监测

47 基于单片机的书库环境监测

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于51单片机&#xff0c;采用DHT11湿度传感器检测湿度&#xff0c;DS18B20温度传感器检测温度&#xff0c; 采用滑动变阻器连接数模转换器模拟二氧化碳和氧气浓度检测&#xff0c;各项数值通过lc…
阅读更多...
【操作系统】每日 3 题（五十五）

【操作系统】每日 3 题（五十五）

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?typeblog &#x1f4e3;专栏地址&#xff1a;https://blog.csdn.net/newin2020/category_12820365.html &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享操作系统面试中常见的面试题给大家~ ❤️…
阅读更多...
MySQL | 尚硅谷 | 第13章_约束

MySQL | 尚硅谷 | 第13章_约束

MySQL笔记&#xff1a;第13章_约束 文章目录 MySQL笔记&#xff1a;第13章_约束第13章_约束 1. 约束(constraint)概述1.1 为什么需要约束1.2 什么是约束1.3 约束的分类演示代码 2. 非空约束2.1 作用2.2 关键字2.3 特点2.4 添加非空约束2.5 删除非空约束演示代码 3. 唯一性约束3…
阅读更多...
《计算机网络》（408大题）

《计算机网络》（408大题）

2009 路由转发和静态路由的计算 子网划分、路由聚合的计算 注&#xff1a;CIDR中的子网号可以全为0或1&#xff0c;但是其主机号不允许。 注&#xff1a; 这里其实是把到互联网的路由当做了一个默认路由&#xff08;当一个目的网络地址与路由表中其他都不匹配时&#xff0c;…
阅读更多...
NanoLog起步笔记-6-StaticLogInfo

NanoLog起步笔记-6-StaticLogInfo

nonolog起步笔记-6-StaticLogInfo StaticLogInfo文件名和行号文件名和行号的传入log参数 RuntimeLogger::registerInvocationSitelogid为什么只能被赋一次值 reserveAlloc加入消息头finishAlloc返回 StaticLogInfo 写C语言编译前端时&#xff0c;给我印象深刻的一部分是&#…
阅读更多...
软件工程 概述

软件工程 概述

软件 不仅仅是一个程序代码。程序是一个可执行的代码&#xff0c;它提供了一些计算的目的。 软件被认为是集合可执行的程序代码&#xff0c;相关库和文档的软件。当满足一个特定的要求&#xff0c;就被称为软件产品。 工程 是所有有关开发的产品&#xff0c;使用良好定义的&…
阅读更多...
Sui 集成 Phantom，生态迎来全新里程碑

Sui 集成 Phantom，生态迎来全新里程碑

作为领先的非托管多链加密&#x1f45b;&#xff0c;Phantom 宣布将支持 Sui 区块链。Sui 将加入 Solana、Bitcoin 和 Ethereum 队伍&#xff0c;成为该 wallet 支持的少数 L1 区块链之一。 此次集成也大幅提升了 Phantom 的互操作性&#xff0c;同时表明 wallet 提供商和应用…
阅读更多...
低级爬虫实现-记录HCIP云架构考试

低级爬虫实现-记录HCIP云架构考试

因工作需要考HCIP云架构&#xff08;HCIP-Cloud Service Solution Architect&#xff09;证书, 特意在淘宝上买了题库&#xff0c; 考过了。 事后得知自己被坑了&#xff0c; 多花了几十大洋。 所以想着在授权期内将题库“爬”下来&#xff0c; 共享给大家。 因为整个过程蛮有…
阅读更多...
QGroundControl之5-AppSettings.cc

QGroundControl之5-AppSettings.cc

介绍 应用程序设置 Application Settings &#xff0c;这里看下语言选择功能&#xff0c;它是怎么和json文件关联起来的&#xff0c;刚刚看的时候&#xff0c;很是奇怪这么多的json文件作用。 1.AppSettings.cc 文件怎么和App.SettingsGroup.json关联 在AppSettings.cc文件没…
阅读更多...
jenkins邮件的配置详解

jenkins邮件的配置详解

Jenkins邮件的配置涉及多个步骤和细节，以下是详细的配置指南： 一、前期准备 确定邮件服务：明确Jenkins将要使用的邮件服务，如QQ邮箱、163邮箱、公司邮箱（基于Microsoft 365或Exchange Server）等。获取SMTP配置信息：根据邮件服务类型，获取相应的SMTP服务器地址、端口号…
阅读更多...
【ArcGIS微课1000例】0134：ArcGIS Earth实现二维建筑物的三维完美显示

【ArcGIS微课1000例】0134：ArcGIS Earth实现二维建筑物的三维完美显示

文章目录 一、加载数据二、三维显示三、三维符号化一、加载数据 加载配套实验数据（0134.rar中的建筑物，2d或3d都可以），方法如下：点击添加按钮。 点击【Add Files】，在弹出的Open对话框中，选择建筑物，点击确定，完成添加。 默认二维显示： 二、三维显示 右键建筑物图层…
阅读更多...
jupyterlab 增加多个kernel，正确做法

jupyterlab 增加多个kernel，正确做法

1、背景 需要增加一个kernel然后相当于隔离一个环境 juypterlab Version 3.0.14 2、用conda 安装 例如&#xff0c;你在conda下有一个python 3.12 的环境 py312 ipython kernel install --user --namepy312 如果保持的话&#xff0c;用pip安装相应的包就好 3、检查是否配置好 …
阅读更多...
案例-商品列表（组件封装）

案例-商品列表（组件封装）

标签组件封装 1.双击显示&#xff0c;自动聚焦 2.失去焦点&#xff0c;隐藏输入框 标签一列&#xff0c;不同行的标签内容不同&#xff0c;但是除此之外其他基本一致&#xff0c;所以选择用 标签组件 将这一部分封装为一个组件&#xff0c;需要时组件标签展示。 首先标签处一进…
阅读更多...
Python 基础学习(一)

Python 基础学习(一)

一.基础语法 注释 Python中单行注释以 # 开头&#xff0c;如下&#xff1a; #!/usr/bin/python3# 第一个注释 print ("Hello, Python!") # 第二个注释多行注释可以用多个 # 号&#xff0c;还有 ‘’’ 和 “”"&#xff1a; #!/usr/bin/python3# 第一个注释…
阅读更多...
TIM输入捕获---STM

TIM输入捕获---STM

一、简介 IC输入捕获 输入捕获模式下&#xff0c;当通道输入引脚出现指定电平跳变时&#xff0c;当前CNT的值将被锁存在CCR中&#xff0c;可用于测量PWM波形的频率、占空比、脉冲间隔、电平持续时间等参数 每个高级定时器和通用定时器都拥有4个输入捕获通道 可配置为PWMI模…
阅读更多...
【Android Studio】学习——网络连接

【Android Studio】学习——网络连接

实验&#xff1a;Android网络连接 文章目录 实验&#xff1a;Android网络连接[toc]实验目标和实验内容&#xff1a;1、掌握Android联网的基本概念&#xff1b;2、能够使用URL connection实现网络连接&#xff1b;3、掌握第三方库的基本概念4、需实现的具体功能 实验结果功能说明…
阅读更多...
5G中什么是ATG网络？

5G中什么是ATG网络？

有人问Air to Ground Networks for NR是怎么回事&#xff1f;这个是R18 NR才引入的。 ATG很多部分和NTN类似中的内容类似。比较明显不同的是&#xff0c;NTN的RF内容有TS 38.101-5单独去讲&#xff0c;而ATG则会和地面网络共用某些band&#xff0c;ATG可以工作在N1/N3/N34/N39…
阅读更多...
基础算法--双指针

基础算法--双指针

两数之和 点击&#xff1a;题目链接 解法一&#xff1a;暴力解法 时间复杂度&#xff1a;O(N^2) 算法思路&#xff1a;两层for循环即可列出所有两个数字的组合&#xff0c;判断是否等于目标值 算法流程&#xff1a; 两层 for 循环&#xff1a; 外层 for 循环依次枚举第⼀个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023