Echarts 環形圖配置 環形半徑(radius) 修改文本位置(label) 南丁格爾圖(roseType)

數據

  const data = [{ name: '華為', value: 404 },{ name: '小米', value: 800 }, { name: '紅米', value: 540 }, { name: '蘋果', value: 157 }]

設置南丁格爾圖

  roseType: 'area'

在這里插入圖片描述

設置標簽位置

 		 label: {show: true,position: 'center'  // center 中間展示  outside 外側展示  inside 內側展示 },

中間展示
在這里插入圖片描述
外側展示
在這里插入圖片描述
內測展示
在這里插入圖片描述

設置半徑 內徑

//第一個為內徑 第二個為外徑

   radius: ['30%', '70%']

在這里插入圖片描述

完整代碼

  const myCharts = this.$echarts.init(this.$refs.myCharts)myCharts.setOption({series: [{name: 'Access From',type: 'pie',radius: ['30%', '70%'], //第一個為內徑 第二個為外徑label: {show: true,position: 'inside' //outside 外側展示  inside 內側展示 },data,roseType: 'area' //設置為南丁格爾圖}]})

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/212787.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/212787.shtml
英文地址,請注明出處:http://en.pswp.cn/news/212787.shtml

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

相關文章

C語言動態內存經典筆試題分析

C語言動態內存經典筆試題分析 文章目錄 C語言動態內存經典筆試題分析1. 題目一2. 題目二3. 題目三4. 題目四 1. 題目一 void GetMemory(char *p){p (char *)malloc(100);} void Test(void){char *str NULL;GetMemory(str);strcpy(str, "hello world");printf(str)…

Qt設置類似于qq登錄頁面

頭文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QWindow> #include <QIcon> #include <QLabel> #include <QMovie> #include <QLineEdit> #include <QPushButton>QT_BEGIN_NAMESPACE namespace Ui { class…

中國移動公網IP申請過程

一、動機 由于從事互聯網行業10年&#xff0c;一直從事移動端&#xff08;前端&#xff09;開發工作&#xff0c;未曾深入了解過后端技術&#xff0c;以至于工作10年也不算進入互聯網的門。 所以準備在自己家用設備上搭建各種場景的服務器&#xff08;云服務對個人來說成本偏…

數據分析基礎之《numpy(2)—ndarray屬性》

一、ndarray的屬性 1、屬性方法 屬性名字屬性解釋ndarray.shape數組維度的元組&#xff08;形狀&#xff09;ndarray.ndim數組維數ndarray.size數組中的元素數量ndarray.itemsize一個數組元素的長度&#xff08;字節&#xff09;ndarray.dtype數組元素的類型使用方法 數組名.…

大數據技術8:StarRocks極速全場景MPP數據庫

前言&#xff1a;StarRocks原名DorisDB&#xff0c;是新一代極速全場景MPP數據庫。StarRocks 是 Apache Doris 的 Fork 版本。StarRocks 連接的多種源。一是通過這個 CDC 或者說通過這個 ETL 的方式去灌到這個 StarRocks 里面&#xff1b;二是還可以去直接的和這些老的 kafka 或…

阿里云服務器跨域問題解決方案

首先看一下原始代碼&#xff1a; Bean public CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration new CorsConfiguration();corsConfiguration.addAllowedOrigin("http://…

spark rdd和dataframe的區別,結合底層邏輯

在 Apache Spark 中&#xff0c;RDD&#xff08;Resilient Distributed Dataset&#xff09;和 DataFrame 是處理數據的兩種不同的抽象。 RDD (Resilient Distributed Dataset) 底層實現&#xff1a; RDD 是 Spark 最初的數據抽象&#xff0c;表示一個分布式的、不可變的數據集…

03-詳解Nacos注冊中心的配置步驟和功能

Nacos注冊中心 服務注冊到Nacos Nacos是SpringCloudAlibaba的組件也遵循SpringCloud中定義的服務注冊和服務發現規范,因此使用Nacos與使用Eureka對于微服務來說并沒有太大區別 主要差異就是依賴不同,服務地址不同 第一步: 在父工程cloud-demo模塊的pom.xml文件中引入Spring…

nlkt中BigramAssocMeasures.pmi()方法的傳參和使用

這個問題找遍全網沒看到詳細的介紹&#xff0c;最后用讀代碼數學公式的方法才理解怎么用。 BigramAssocMeasures.pmi 作用&#xff1a;計算x和y的互信息&#xff08;互信息是什么我就不科普啦&#xff09; 這里有個誤區剛開始我以為是計算兩個詞之間的依賴程度&#xff0c;但…

flstudio21.3.2304高級版水果編曲音樂軟件

flstudio高級版是一款適用于廣泛領域的音頻編輯軟件。它支持多通道混音器和VST插件&#xff0c;包括數百種樂器和效果插件。它還為您提供了一個樂譜編輯器&#xff0c;需要對不同樂器的節奏進行必要的編輯。Flstudio具有許多內置電子合成聲音&#xff0c;可提供更廣泛的電子聲音…

自動駕駛的汽車構造

1、傳動系統 連接發動機和驅動車輪之間的動力傳動裝置&#xff0c;分為傳統動力傳動、純電動力傳動、混合動力傳動 傳動系統中幾個重要的部件 1&#xff09;離合器 直接與發動機相連的部件&#xff0c;通過摩擦、液體介質、磁力傳遞扭矩 作用&#xff1a; 保證平穩起步&a…

【Spring教程25】Spring框架實戰:從零開始學習SpringMVC 之 SpringMVC入門案例總結與SpringMVC工作流程分析

目錄 1.入門案例總結2. 入門案例工作流程分析2.1 啟動服務器初始化過程2.2 單次請求過程 歡迎大家回到《Java教程之Spring30天快速入門》&#xff0c;本教程所有示例均基于Maven實現&#xff0c;如果您對Maven還很陌生&#xff0c;請移步本人的博文《如何在windows11下安裝Mave…

Spring 面向切面編程(AOP)

一、aop介紹 &#xff08;一&#xff09;前言 一般的后端開發流程是縱向開發&#xff0c;就是controller&#xff08;控制層&#xff09;->service&#xff08;業務層&#xff09;->mapper&#xff08;數據持久層&#xff09;&#xff0c;Spring采用動態代理技術可以在…

Wireshark添加自定義協議解析

最終效果如下&#xff1a; 參考文檔&#xff1a;https://mika-s.github.io/topics/ 此參考文檔中7個例子教我們如何編寫lua腳本去識別我們自定義的協議 安裝Wireshark https://www.wireshark.org/上下載安裝包安裝即可。我的安裝路徑是D:\Install\Wireshark&#xff0c;在W…

Leetcode—389.找不同【簡單】

2023每日刷題&#xff08;五十五&#xff09; Leetcode—389.找不同 實現代碼 char findTheDifference(char* s, char* t) {int len strlen(s);int len2 len 1;int a[26] {0};int b[26] {0};if(len 0) {return t[0];}for(int i 0; i < len; i) {int idx s[i] - a;…

HTML的img常見應用屬性

1、src&#xff1a;指定圖像的URL&#xff0c;即圖像的路徑。 2、alt&#xff1a;指定圖像的替代文本&#xff0c;當圖像無法顯示時&#xff0c;會顯示替代文本。 3、width&#xff1a;指定圖像的寬度&#xff0c;可以使用像素值或百分比。 4、height&#xff1a;指定圖像的…

【設計模式--創建型--建造者模式】

建造者模式 建造者模式概述結構結果優缺點使用場景 將上述案例改為鏈式調用結果 建造者模式 概述 將一個復雜對象的構建與表示分離&#xff0c;使得同樣的構建過程可以創建不同的表示。 分離了部件的構建&#xff08;由Builder來負責&#xff09;和裝配&#xff08;由Direct…

辦公word-從不是第一頁添加頁碼

總結 實際需要注意的是&#xff0c;分隔符、分節符和分頁符并不是一個含義 分隔符包含其他兩個&#xff1b;分頁符&#xff1a;是增加一頁&#xff1b;分節符&#xff1a;指將文檔分為幾部分。 從不是第一頁插入頁碼1步驟 1&#xff0c;插入默認頁碼 自己可以測試時通過**…

win11 powershell conda 激活環境后不顯示環境名稱

win11 powershell conda 激活環境后不顯示環境名稱 問題現象解決方法 問題現象 安裝 Anaconda 后在 powershell 中激活環境后&#xff0c;命令行前面不顯示環境名稱 解決方法 在 powershell 中執行 conda init 重新打開 poweshell 出現以下問題&#xff0c;請參考 win11 p…

華為OD機試真題-5G網絡建設-2023年OD統一考試(C卷)

題目描述: 現需要在某城市進行5G網絡建設,已經選取N個地點設置5G基站,編號固定為1到N,接下來需要各個基站之間使用光纖進行連接以確保基站能互聯互通,不同基站之間架設光纖的成本各不相同,且有些節點之間已經存在光纖相連,請你設計算法,計算出能聯通這些基站的最小成本…