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.pswp.cn/web/62458.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/62458.shtml
英文地址，請注明出處：http://en.pswp.cn/web/62458.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

【八股】HTTP

【八股】HTTP

瀏覽器輸入URL之后發生的過程 瀏覽器解析URL中的協議&#xff0c;主機&#xff0c;端口&#xff0c;路徑參數等DNS域名解析得到對應的IP地址通過IP和PORT對服務器發送TCP三次握手建立連接瀏覽器發送請求服務器接受請求&#xff0c;處理并響應瀏覽器得到HTTP響應&#xff0c;對…
閱讀更多...
torch.optim.lr_scheduler.ReduceLROnPlateau

torch.optim.lr_scheduler.ReduceLROnPlateau

torch.optim.lr_scheduler.ReduceLROnPlateau 是 PyTorch 中的一種學習率調度器&#xff0c;主要用于在模型訓練過程中根據某些指標&#xff08;如驗證損失&#xff09;動態調整學習率。它是一種基于性能指標動態調整學習率的策略&#xff0c;而不是預定義的固定時間調整。 主要…
閱讀更多...
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;我將會分享操作系統面試中常見的面試題給大家~ ??…
閱讀更多...
服務器加固

服務器加固

1.服務器密碼復雜度 密碼最小長度&#xff0c;密碼復雜度策略 vim /etc/pam.d/system-auth --------------- #密碼配置 #ucredit&#xff1a;大寫字母個數&#xff1b;lcredit&#xff1a;小寫字母個數&#xff1b;dcredit&#xff1a;數字個數&#xff1b;ocredit&#xff1a;…
閱讀更多...
spring boot 同一個redis 操作不同的庫

spring boot 同一個redis 操作不同的庫

1.下面是在Spring Boot中配置多個Redis數據庫的幾種方式&#xff1a; 1.1 配置如下# application.yml spring:redis:host: localhostport: 6379password: your_password# 連接池配置lettuce:pool:max-active: 8max-idle: 8min-idle: 0max-wait: -1mstimeout: 5000ms# 多個數據…
閱讀更多...
C語言面試題/筆試題/高頻面試題_2

C語言面試題/筆試題/高頻面試題_2

9. 全局變量和局部變量的區別 定義&#xff1a;全局變量是定義在函數外部的變量&#xff0c;局部變量是定義在 函數內部的變量 存儲位置&#xff1a;全局變量存儲在全局區&#xff0c;局部變量存儲在棧區 作用域&#xff1a;全局變量可以在程序任意位置使用&#xff0c;局部變量…
閱讀更多...
Brain.js（八）：RNNTimeStep 實戰教程 - 股票價格預測 - 實操需警慎

Brain.js（八）：RNNTimeStep 實戰教程 - 股票價格預測 - 實操需警慎

前置聲明&#xff0c;個人淺度炒股&#xff0c;但計劃將基金轉入股市。然后 股市有風險&#xff0c;不是技術可以完全預測的&#xff0c;但是在無頭緒的時候&#xff0c;用技術指標做個參考也不錯。 本文涉及到的股票預測&#xff0c;只是代碼簡單示例&#xff0c;實操需警慎&a…
閱讀更多...
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 提供商和應用…
閱讀更多...
目標跟蹤領域經典論文解析

目標跟蹤領域經典論文解析

親愛的小伙伴們&#x1f618;&#xff0c;在求知的漫漫旅途中&#xff0c;若你對深度學習的奧秘、JAVA 、PYTHON與SAP 的奇妙世界&#xff0c;亦或是讀研論文的撰寫攻略有所探尋&#x1f9d0;&#xff0c;那不妨給我一個小小的關注吧&#x1f970;。我會精心籌備&#xff0c;在…
閱讀更多...
如何解決 java.nio.charset.CoderMalfunctionError: 編碼器故障錯誤問題？親測有效的解決方法！

如何解決 java.nio.charset.CoderMalfunctionError: 編碼器故障錯誤問題？親測有效的解決方法！

java.nio.charset.CoderMalfunctionError 是一個在 Java 中相對較少遇到的異常&#xff0c;通常與字符編碼轉換過程中的錯誤有關。當 Java 程序在進行字符編碼轉換時&#xff0c;遇到無法處理的字符或編碼故障時&#xff0c;就會拋出該異常。 1. 問題描述 java.nio.charset.C…
閱讀更多...
低級爬蟲實現-記錄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服務器地址、端口號…
閱讀更多...
最新文章

Copyright @ 2022~2023