echarts 柱狀圖-折線圖-餅圖的基礎使用

?上圖示例圖表展示相關配置：

      var myChart = echarts.init(this.$refs.firstMain);myChart.setOption({legend: { // 圖例設置top: "15%",type: "scroll",orient: "vertical",//圖例列表的布局朝向。left: "right",pageIconColor: 'red', // 激活的分頁按鈕顏色pageIconInactiveColor: 'yellow', // 沒激活的分頁按鈕顏色selectedMode: false,pageIconSize: 12,  //當然就是按鈕的大小},title: {text: "縣區采集分布",left: "left",},tooltip: { // 提示框組件設置padding: [15, 15],enterable: true,// 鼠標是否可進入提示框浮層中，默認為false，如需詳情內交互，如添加鏈接，按鈕，可設置為 true。extraCssText: "max-width:60%;max-height:83%; overflow: auto; ",//額外附加到浮層的 css 樣式。show: true,trigger: "item",confine: true, // 是否將 tooltip 框限制在圖表的區域內。// dom: "overflow:hidden",formatter: function (params) {let htmlStr = `<span style="color:${params.color}">${params.data.value}</span>`;//圓點后面顯示的名稱'let res = params.marker +params.data.name +"&nbsp;&nbsp;" + htmlStr +"<br/>";for (var i = 0; i < params.data.list.length; i++) {let obj = params.data.list[i];res += `<div style="color:#999;text-indent:1em">${obj.label}&nbsp; &nbsp;<span style="color:#333333">${obj.total}</span></div>`;}return `${res}`; //最后返回拼接好的值},},grid: {left: "3%",top: "20%",right: "2%",bottom: "3%",containLabel: true,},dataset: {// 提供一份數據。dimensions: ["name", "value"],source: res.data.data,},graphic: { // 數據為空時展示為空提示type: "text", // 類型：文本left: "center",top: "middle",silent: true, // 不響應事件invisible: res.data.data.length > 0, // 有數據就隱藏style: {x: 0,y: 0,fill: "#9d9d9d",fontWeight: "bold",text: "暫無數據",fontFamily: "Microsoft YaHei",fontSize: "25px",},},series: [{name: this.emptyText,type: "pie",radius: ["35%", "45%"],roseType: "area",color: ["#4889FF", "#63C2FF", "#66E5E9", "#F478BB", "#AE8DFF"],itemStyle: {borderRadius: 8,},// 高亮樣式emphasis: {label: {show: true,fontSize: 20,fontWeight: "bold",},},//label 餅圖圖形上的文本標簽，可用于說明圖形的一些數據信息，比如值，名稱等。label: {position: "outer", //文本標簽的位置。alignTo: "labelLine", //標簽的對齊方式-折現的長短bleedMargin: 5,show: true,formatter: "{@name}" + "{d}%",},},],});

?上述示例圖表展示相關配置：

一般來說，餅圖數據要么內部展示要么外部展示，上面這個餅圖表，外部有折現展示，內部有百分比展示，這里series配置兩個數據對象才能達到這樣的效果，詳見配置

var myChart = echarts.init(this.$refs.fiveMain);myChart.setOption({legend: {bottom: 40,selectedMode: false,show: res.data.data.length > 0,},// 高亮樣式emphasis: {label: {show: true,fontSize: 20,fontWeight: "bold",},},tooltip: {padding: [15, 15],show: true,trigger: "item",formatter: function (params) {let htmlStr = `<span style="color:${params.color}">${params.data.value}</span>`;let res =params.marker +params.data.name +"&nbsp;&nbsp;" +htmlStr +"<br/>";return `${res}`; //最后返回拼接好的值},},label: {alignTo: "labelLine",formatter: function (data) {return `${data.percent}%\n\n${data.name}`;},minMargin: 5,edgeDistance: 10,lineHeight: 15,},dataset: {// 提供一份數據。dimensions: ["name", "value"],source: res.data.data,},series: [{name: "暫無數據",type: "pie",radius: "55%",color: ["#4889FF", "#63C2FF", "#66E5E9", "#8E8EFE"],// avoidLabelOverlap: false, //設置為true時，當數值為0時不重疊// roseType: "area",labelLayout: function (params) { //折現長短的效果const isLeft = params.labelRect.x < myChart.getWidth() / 2;const points = params.labelLinePoints;// Update the end point.points[2][0] = isLeft? params.labelRect.x: params.labelRect.x + params.labelRect.width;return {labelLinePoints: points,};},},{name: "暫無數據",type: "pie",radius: "55%",// avoidLabelOverlap: false, //設置為true時，當數值為0時不重疊center: ["50%", "50%"],// 高亮樣式emphasis: {label: {show: true,fontSize: 20,fontWeight: "bold",},},// roseType: "radius",color: ["#4889FF", "#63C2FF", "#66E5E9", "#F478BB", "#AE8DFF"],//label 餅圖圖形上的文本標簽，可用于說明圖形的一些數據信息，比如值，名稱等。label: {show: true,position: "inside",formatter: `{d}%`,// formatter: '{b}: {c} ({d}%)',},},],graphic: {type: "text", // 類型：文本left: "center",top: "middle",silent: true, // 不響應事件z: 5,invisible: res.data.data.length > 0, // 有數據就隱藏style: {x: 0,y: 0,fill: "#2d2c2c",fontWeight: "bold",text: "暫無數據",fontFamily: "Microsoft YaHei",fontSize: "25px",},},});

?上述示例圖表展示相關配置：

      var myChart = echarts.init(this.$refs.threeMain);myChart.setOption({title: {text: "采集時間分布",},grid: {left: "3%",top: "25%",right: "2%",bottom: "2%",containLabel: true,},legend: {top: "10%",selectedMode: false,},tooltip: {trigger: "axis",confine: true, // 是否將 tooltip 框限制在圖表的區域內。padding: [15, 15],enterable: true, // 鼠標是否可進入提示框浮層中，默認為false，如需詳情內交互，如添加鏈接，按鈕，可設置為 true。extraCssText: "max-width:60%;max-height:83%; overflow: auto; ", //額外附加到浮層的 css 樣式。},xAxis: {show: true,type: "category",data: res.data.data.abscissa,// boundaryGap: false,axisLabel: {interval: 0,rotate: 25,},splitLine: {//網格線show: true,},axisTick: {show: false, // 不顯示坐標軸刻度線},},yAxis: {show: true,type: "value",splitLine: {//網格線show: false,},// 坐標 軸線axisLine: {show: true,},},graphic: {type: "text", // 類型：文本left: "center",top: "middle",silent: true, // 不響應事件invisible: res.data.data.abscissa.length > 0, // 有數據就隱藏style: {x: 0,y: 0,fill: "#9d9d9d",fontWeight: "bold",text: "暫無數據",fontFamily: "Microsoft YaHei",fontSize: "25px",},},series: res.data.data.series,});

??上述示例圖表展示相關配置：

      var myChart = echarts.init(this.$refs.fourMain);myChart.setOption({// title: {//   text: "年齡分布",// },tooltip: {show: true,trigger: "axis",axisPointer: { type: "shadow" },shadowstyle: {color: "#65A3FF",opacity: 0.2,width: "auto",},},xAxis: {type: "value",axisLine: {show: true, //不顯示坐標軸線},axisTick: {show: false, // 不顯示坐標軸刻度線},axisLabel: {formatter: function (value, index) {if (value == 0 || (value > 0 && value < 10000)) {return value + "";} else {return value / 10000 + "萬";}},},},yAxis: {type: "category",// name: "單位（人）",data: res.data.data.ordinate,axisTick: {show: false, // 不顯示坐標軸刻度線},},series: [{color: "#247FFF", // 柱狀條顏色barWidth: 30, //柱子寬度data: res.data.data.abscissa,type: "bar",showBackground: true,//柱狀陰影backgroundStyle: { //柱狀陰影顏色color: "rgba(180, 180, 180, 0.2)",},label: {formatter: "{c}" + "",show: true,position: "right",fontWeight: "bolder",fontSize: "12",color: "#4889ff",},},],graphic: {type: "text", // 類型：文本left: "center",top: "middle",silent: true, // 不響應事件invisible: res.data.data.abscissa.length > 0, // 有數據就隱藏style: {x: 0,y: 0,fill: "#9d9d9d",fontWeight: "bold",text: "暫無數據",fontFamily: "Microsoft YaHei",fontSize: "25px",},},});

???上述示例圖表展示相關配置：

      var myChart = echarts.init(this.$refs.twoMain);myChart.setOption({title: {show: true,text: "學歷分布",left: "left",top: "top",},grid: {left: "4%",top: "25%",right: "2%",bottom: "3%",containLabel: true,},tooltip: {show: true,trigger: "axis",axisPointer: { type: "shadow" },shadowstyle: {color: "#65A3FF",opacity: 0.2,width: "auto",},},xAxis: {type: "category",data: res.data.data.abscissa,axisTick: {show: false, // 不顯示坐標軸刻度線},},yAxis: {show: true,type: "value",name: "數量（人）",// 坐標 軸線axisLine: {show: true,},// 坐標軸刻度線axisTick: {show: false,},//網格線splitLine: {show: true,},},graphic: {type: "text", // 類型：文本left: "center",top: "middle",silent: true, // 不響應事件invisible: res.data.data.ordinate.length > 0, // 有數據就隱藏style: {x: 0,y: 0,fill: "#9d9d9d",fontWeight: "bold",text: "暫無數據",fontFamily: "Microsoft YaHei",fontSize: "25px",},},series: [{data: res.data.data.ordinate,color: "#247FFF", // 柱狀條顏色barWidth: 30, //柱子寬度type: "bar",showBackground: true,backgroundStyle: {color: "rgba(180, 180, 180, 0.2)",},label: {formatter: "{@num}" + "人",show: true,position: "top",fontWeight: "bolder",fontSize: "12",color: "#4889ff",},},],});

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

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

相關文章

安全加密框架圖——Oracle安全開發者

安全加密框架圖——Oracle安全開發者

Oracle安全開發者 ACLs 設計 ACLs&#xff08;訪問控制列表&#xff09;時&#xff0c;可以根據以下思路進行設計&#xff1a; 所有者文件權限&#xff1a;確定文件的所有者能夠對文件執行哪些操作&#xff0c;如讀取、寫入、執行等。這可以根據文件的性質和擁有者的職責來決…
閱讀更多...
k8s集群部署vmalert和prometheusalert實現釘釘告警

k8s集群部署vmalert和prometheusalert實現釘釘告警

先決條件 安裝以下軟件包&#xff1a;git, kubectl, helm, helm-docs&#xff0c;請參閱本教程。 1、安裝 helm wget https://xxx-xx.oss-cn-xxx.aliyuncs.com/helm-v3.8.1-linux-amd64.tar.gz tar xvzf helm-v3.8.1-linux-amd64.tar.gz mv linux-amd64/helm /usr/local/bin…
閱讀更多...
12 注冊登錄

12 注冊登錄

12 注冊登錄 整體概述 使用數據庫連接池實現服務器訪問數據庫的功能&#xff0c;使用POST請求完成注冊和登錄的校驗工作。 本文內容 介紹同步實現注冊登錄功能&#xff0c;具體涉及到流程圖、載入數據庫表、提取用戶名和密碼、注冊登錄流程與頁面跳轉的代碼實現。 流程圖&a…
閱讀更多...
六、Linux系統下，文件操作命令都有哪些？

六、Linux系統下，文件操作命令都有哪些？

總括&#xff1a; 創建文件/文件夾&#xff1a;touch&#xff1b; 查看&#xff1a;cat/more&#xff1b; 復制&#xff1a;copy&#xff1b; 移動文件/文件夾&#xff1a;mv&#xff1b; 刪除&#xff1a;rm&#xff1b; 1、創建文件 &#xff08;1&#xff09;語法&#x…
閱讀更多...
docker私有倉庫

docker私有倉庫

# 有個遠程倉庫 &#xff0c;docker官方提供的 ---》我們可以把我們的鏡像傳上去 # 公司做的鏡像&#xff0c;一般不放在遠程倉庫&#xff0c;公司會自己搭建私有倉庫&#xff08;把公司制作的鏡像傳到私有倉庫&#xff09; 1.鏡像傳到官方倉庫 # 第0步&#xff1a;在遠端創建…
閱讀更多...
阿里云與中國中醫科學院合作，推動中醫藥行業數字化和智能化發展

阿里云與中國中醫科學院合作，推動中醫藥行業數字化和智能化發展

據相關媒體消息&#xff0c;阿里云與中國中醫科學院的合作旨在推動中醫藥行業的數字化和智能化發展。隨著互聯網的進步和相關政策的支持&#xff0c;中醫藥產業受到了國家的高度關注。這次合作將以“互聯網 中醫藥”為載體&#xff0c;致力于推進中醫藥文化的傳承和創新發展。…
閱讀更多...
AIGC繪畫：基于Stable Diffusion進行AI繪圖

AIGC繪畫：基于Stable Diffusion進行AI繪圖

文章目錄 AIGC深度學習模型繪畫系統stable diffusion簡介stable diffusion應用現狀在線網站云端部署本地部署Stable Diffusion AIGC深度學習模型繪畫系統 stable diffusion簡介 Stable Diffusion是2022年發布的深度學習文本到圖像生成模型&#xff0c;它主要用于根據文本的描述…
閱讀更多...
UG NX二次開發(C++)-UI Styler中選擇組件或者實體后設置為工作組件

UG NX二次開發(C++)-UI Styler中選擇組件或者實體后設置為工作組件

提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔 文章目錄 1、前言2、在NX2007中創建一個裝配體實例2.1 裝配體模型2.2 欲實現的功能3、創建對話框文件4、在VS2022中創建一個工程項目4.1 創建項目4.1 在hpp中添加頭文件4.2 在cpp中添加代碼4.3 生成dll5、測…
閱讀更多...
通俗講解-動量梯度下降法原理與代碼實例

通俗講解-動量梯度下降法原理與代碼實例

本站原創文章&#xff0c;轉載請說明來自《老餅講解-BP神經網絡》bp.bbbdata.com 目錄 一.動量梯度下降法介紹 1.1 動量梯度下降法簡介與思想 1.2 動量梯度下降法的算法流程 二.動量梯度下降法代碼實例 2.1 動量梯度下降法實例代碼 一.動量梯度下降法介紹…
閱讀更多...
2023年上半年數學建模競賽題目匯總與難度分析

2023年上半年數學建模競賽題目匯總與難度分析

2023年上半年數學建模競賽題目匯總與難度分析 ?由于近年來國賽ABC題出題方式漂浮不定&#xff0c;沒有太大的定性&#xff0c;目前總體的命題方向為&#xff0c;由之前的單一模型問題變為數據分析評價優化或者預測類題目是B、C題的主要命題方向。為了更好地把握今年命題的主方…
閱讀更多...
vue3-vuex

vue3-vuex

一、概念 &#xff08;1&#xff09;Vuex 是一個狀態和數據管理的框架&#xff0c;負責管理項目中多個組件和多個頁面共享的數據。 &#xff08;2&#xff09;在開發項目的時候&#xff0c;我們就會把數據分成兩個部分&#xff0c;一種數據是在某個組件內部使用&#xff0c;我…
閱讀更多...
【C++】STL案例1-評委打分

【C++】STL案例1-評委打分

0.前言 1.系統自動生成的評委評分代碼&#xff1a; #include <iostream> using namespace std; #include <deque> #include <vector> #include <algorithm> #include <string>//選手類 class Player { public:Player(string name, float score)…
閱讀更多...
機器學習深度學習——機器翻譯（序列生成策略）

機器學習深度學習——機器翻譯（序列生成策略）

&#x1f468;?&#x1f393;作者簡介&#xff1a;一位即將上大四&#xff0c;正專攻機器學習的保研er &#x1f30c;上期文章&#xff1a;機器學習&&深度學習——seq2seq實現機器翻譯&#xff08;詳細實現與原理推導&#xff09; &#x1f4da;訂閱專欄&#xff1a;機…
閱讀更多...
ClickHouse常見的DDL語句

ClickHouse常見的DDL語句

1.創建庫 CREATE DATABASE IF NOT EXISTS mytestdb; 2.創建表 CREATE TABLE user_info ( user_id UInt32 comment 用戶標識, name String comment 用戶名, create_date DateTime DEFAULT now() comment 創建時間, sex Enum8(男 1, 女 2) comment 性別, …
閱讀更多...
最新AI系統ChatGPT網站程序源碼+搭建教程/公眾號/H5端/安裝配置教程/完整知識庫

最新AI系統ChatGPT網站程序源碼+搭建教程/公眾號/H5端/安裝配置教程/完整知識庫

1、前言 SparkAi系統是基于國外很火的ChatGPT進行開發的Ai智能問答系統。本期針對源碼系統整體測試下來非常完美&#xff0c;可以說SparkAi是目前國內一款的ChatGPT對接OpenAI軟件系統。 那么如何搭建部署AI創作ChatGPT&#xff1f;小編這里寫一個詳細圖文教程吧&#xff01;…
閱讀更多...
基于IDE Eval Resetter延長IntelliJ IDEA等軟件試用期的方法（包含新版本軟件的操作方法）

基于IDE Eval Resetter延長IntelliJ IDEA等軟件試用期的方法（包含新版本軟件的操作方法）

本文介紹基于IDE Eval Resetter插件&#xff0c;對集成開發環境IntelliJ IDEA等JetBrains公司下屬的多個開發軟件&#xff0c;加以試用期延長的方法。 我們這里就以IntelliJ IDEA為例&#xff0c;來介紹這一插件發揮作用的具體方式。不過&#xff0c;需要說明使用IDE Eval Rese…
閱讀更多...
docker常用指令

docker常用指令

一、Docker指令 1、啟動Docker &#xff1a;systemctl start docker 2、查看Docker狀態:systemctl status docker 狀態為active表示正在運行中 3、停止運行Docker:systemctl stop docker 4、重啟Docker:systemctl restart docker 5、開機啟動Docker:systemctl enable docker 二…
閱讀更多...
Apache Hudi Timeline Server介紹

Apache Hudi Timeline Server介紹

文章目錄 Apache Hudi Timeline Server介紹1. 概述2 提供的服務3. 結論 Apache Hudi Timeline Server介紹 1. 概述 Hudi 有一個中央時間線服務器&#xff0c;在驅動程序節點中運行并作為 Rest 服務。它有多種好處&#xff0c;第一個用例是提供 FileSystemView api。Hudi 的核…
閱讀更多...
Hlang社區-社區主頁實現

Hlang社區-社區主頁實現

文章目錄 前言首頁結構固定導航欄左側導航itemitem標志頭部推薦文章展示ITEM實現ToolTip完整實現首頁完整實現前言 廢話不多說，直接看到效果，這里的話是我們社區主頁，不是產品宣傳主頁哈： 是的也許你已經發現了這個頁面和某個網站長得賊像。沒錯是這樣的，這個布局我確實…
閱讀更多...
vue3+vite+pinia

vue3+vite+pinia

目錄 一、項目準備 1.1、Vite搭建項目 1.2、vue_cli創建項目 二、組合式API(基于setup) 2.1、ref 2.2、reactive 2.3、toRefs 2.4、watch和watchEffect 2.5、computed 2.6、生命周期鉤子函數 2.7、setup(子組件)的第一個參數-props 2.8、setup(子組件)的第二個參數…
閱讀更多...
最新文章

Copyright @ 2022~2023