2. 程式人生 > >echarts環形餅圖

echarts環形餅圖

阿新 • • 發佈：2019-01-25

圖表效果如下：

具體程式碼如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>關係圖案例</title>
  6. <!-- 引入 ECharts 檔案 -->
  7. <script src="js/echarts4.0.js" type="text/javascript" charset="utf-8"></script>
  8. </head>
  9. <body>
  10. <!-- 為 ECharts 準備一個具備大小（寬高）的 容器 -->
  11. <div id="chart1" style="width: 80%;height: 400px;top: 50px;left: 10%;border: 3px solid #000;"></div>
  12. </body>
  13. </html>
  14. <script type="text/javascript">
  15. // 基於準備好的容器(這裡的容器是id為chart1的div)，初始化echarts例項
  16. var chart1 = echarts.init(document.getElementById("chart1"));
  17. // 指定圖表的配置項和資料
  18. var option = {
  19. title: {
  20. text: '男女所佔比例',
  21. left : '3%', // 標題距離左側邊距
  22. top : '3%', // 標題距頂部邊距
  23. textStyle: {
  24. color: '#000'
  25. }
  26. },
  27. series: [{
  28. type: "pie", // 系列1型別: 餅圖
  29. center: ["25%","50%"], // 餅圖的中心(圓心)座標，陣列的第一項是橫座標，第二項是縱座標。[ default: ['50%', '50%'] ]
  30. radius: ["49%","50%"], // 餅圖的半徑，陣列的第一項是內半徑，第二項是外半徑。[ default: [0, '75%'] ]
  31. // 可以將內半徑設大顯示成圓環圖（Donut chart）。
  32. clockWise: false, // 餅圖的扇區是否是順時針排布。[ default: true ]
  33. startAngle: 90, // 起始角度，支援範圍[0, 360]。 [ default: 90 ]
  34. hoverAnimation: true, // 是否開啟 hover 在扇區上的放大動畫效果。[ default: true ]
  35. itemStyle: { // 圖形樣式
  36. normal: {
  37. color: "#5886f0", // 圖形的顏色
  38. borderColor: "#5886f0", // 圖形的描邊顏色
  39. borderWidth: 20, // 描邊線寬。為 0 時無描邊。[ default: 0 ]
  40. borderType: 'solid', // 柱條的描邊型別，預設為實線，支援 'solid', 'dashed', 'dotted'。
  41. label: { // 圖形內部標籤
  42. show: true, // 是否顯示標籤
  43. textStyle: { // 標籤文字樣式
  44. fontSize: 15,
  45. fontWeight: "bold" // 標籤字型加粗,'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
  46. },
  47. position: "center" // 標籤的位置,'outside'(餅圖扇區外側，通過視覺引導線連到相應的扇區)
  48. // 'inside'(餅圖扇區內部); 'inner' 同 'inside'。
  49. // 'center'(在餅圖中心位置。)
  50. },
  51. labelLine: { // 標籤的視覺引導線樣式，在 label 位置 設定為'outside'的時候會顯示視覺引導線。
  52. show: false
  53. }
  54. },
  55. emphasis: { // 高亮的扇區和標籤樣式(起強調作用)
  56. color: "#5886f0",
  57. borderColor: "#5886f0",
  58. borderWidth: 20,
  59. borderType: 'solid',
  60. label: {
  61. textStyle: {
  62. fontSize: 15,
  63. fontWeight: "bold"
  64. }
  65. }
  66. }
  67. },
  68. data: [{value: 52.7,name: "男(480人) 比率52.7%"},
  69. {name: " ",value: 47.3,
  70. itemStyle: {
  71. normal: {
  72. color: "#5886f0",
  73. borderColor: "#5886f0",
  74. borderWidth: 0,
  75. label: {
  76. show: false
  77. },
  78. labelLine: {
  79. show: false
  80. }
  81. },
  82. emphasis: {
  83. color: "#5886f0",
  84. borderColor: "#5886f0",
  85. borderWidth: 0
  86. }
  87. }
  88. }
  89. ]
  90. }, {
  91. type: "pie", // 系列2型別: 餅圖
  92. center: [
  93. "75.0%",
  94. "50%"
  95. ],
  96. radius: [
  97. "49%",
  98. "50%"
  99. ],
  100. clockWise: false,
  101. hoverAnimation: true,
  102. itemStyle: {
  103. normal: {
  104. label: {
  105. show: true,
  106. textStyle: {
  107. fontSize: 15,
  108. fontWeight: "bold"
  109. },
  110. position: "center"
  111. },
  112. labelLine: {
  113. show: false
  114. },
  115. color: "#ee3a3a",
  116. borderColor: "#ee3a3a",
  117. borderWidth: 20
  118. },
  119. emphasis: {
  120. label: {
  121. textStyle: {
  122. fontSize: 15,
  123. fontWeight: "bold"
  124. }
  125. },
  126. color: "#ee3a3a",
  127. borderColor: "#ee3a3a",
  128. borderWidth: 20
  129. }
  130. },
  131. data: [{
  132. value: 47.3,
  133. name: "女(421人) 佔率47.3%"
  134. },
  135. {
  136. name: " ",
  137. value: 52.7,
  138. itemStyle: {
  139. normal: {
  140. label: {
  141. show: false
  142. },
  143. labelLine: {
  144. show: false
  145. },
  146. color: "#ee3a3a",
  147. borderColor: "#ee3a3a",
  148. borderWidth: 0
  149. },
  150. emphasis: {
  151. color: "#ee3a3a",
  152. borderColor: "#ee3a3a",
  153. borderWidth: 0
  154. }
  155. }
  156. }
  157. ]
  158. }
  159. ]
  160. };
  161. // 使用剛指定的配置項和資料顯示圖表
  162. chart1.setOption(option);
  163. </script>

想要使用該圖表,只需要  複製以上程式碼  ,再下載    echarts.js  在頁面檔案中引入即可. 

注：本文的一個關鍵點就是環形圖內部標籤位置的設定，相關的配置項是 position，其取值分別為：

    'outside'(餅圖扇區外側，通過視覺引導線連到相應的扇區)；

    'inside'(餅圖扇區內部);      

    'inner' 同 'inside'； 

    'center'(在餅圖中心位置)；

相關推薦

ECharts 環形餅圖 動態獲取json資料

ECharts  環形餅圖 動態獲取json資料 效果圖如下： 一.html部分   <div id="secondPieChart" style="width:100%; height:400px;"></div> 二.js部分 <scri

echarts環形餅圖

圖表效果如下：具體程式碼如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>關係圖案例</title> <!-- 引入

ECharts之餅圖和柱形圖demo

www. 操作 orm 成功 rest dom jquer oos mat <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loos

ECharts 標準餅圖 動態獲取json資料

ECharts  標準餅圖 動態獲取json資料 效果圖如下： 一.html部分 <div id="firstPieChart" style="width:100%; height:400px;"></div> 二.js部分 <script

ajax動態賦值echarts（餅圖和柱形圖）

本文以柱形圖和餅形圖ajax動態賦值為例 一、餅形圖賦值步驟 （1）jsp頁面 <!-- 引入echarts官方js --> <script src="js/echarts.js"></script> <body> <!

我又把HTMLTestRunner改了一下，支援Python3，新增echarts統計餅圖

之前用Bootstrap把HTMLTestRunner改的美觀了一點，同時改成了中文的報告，但那個是基於Python2的，見這篇博文 selenium之 輸出報告，對HTMLTestRunner進行樣式調整後的示例。 這次呢，博主又給它改成了Python3的

【視覺化】pandas與matplotlib繪製環形餅圖

匯入相關庫 import pandas as pd import matplotlib.pyplot as plt % matplotlib inline 生產測試資料 data = pd.D

echarts的餅圖輪播

//載入主體 var data1 = resultsData.data; // 列表 var self = this; // 獲取data元件

python可視化---內嵌環形餅圖

auto plt 圖片 san http param ner plot fonts import matplotlib.pyplot as plt import matplotlib as mpl mpl.rcParams["font.sans-serif"]

echarts繪製巢狀環形圖/ 雙餅圖

裝置型別在裡 裝置品牌在外      後臺返回資料如下格式： device_brand_distribution = [{'equipment_type': '智慧手機', 'equipment_brand': 'xiaomi',

ECHARTS柱形圖和餅圖數值顯示

echartsECHARTS柱形圖和餅圖數值顯示，官方文檔寫的很不錯，這裏自己單獨梳理一下，以後可能會用的到。1、柱形圖數值顯示 在option添加： label:{ normal:{ show: true, position: ‘to

Echarts餅圖更改顏色、顯示數據且換行

gen val tex png es2017 trigge nbsp charts 代碼 var option = { title : { text: ‘數據來源‘, x:‘center‘ }, tooltip : { tri

利用echarts highcharts 實現自定義地圖 關系圖效果 側邊3D柱形圖餅圖散點圖

技術 ges 散點圖 chart blog 餅圖 git 分享 charts github 地址： https://https://github.com/Gengshaoxuan/medataMap github 地址： https://https://github.c

【Echarts】Pie 餅圖legend selected 默認是否選中的處理

緩存 select sele echart .cn png str nbsp 2-2 網上找了好多例子 還是自己總結下 legend: { orient: ‘horizontal‘, // ‘vertical‘

解決echarts餅圖顯示百分比，和顯示內容字體及大小

fonts mat 好的 pan har tle title log option // 基於準備好的dom，初始化echarts實例 var pieEchart = echarts.init(document.getElementById(‘pi

Echarts 環形圖 默認高亮展示某個數據

進入 圖標 $scope label 需求 官方文檔 span log mage 項目中有個圖標類的需求,環形圖高亮第一條數據.要求第一條數據圖塊默認展示: 分析:想要獲得上圖效果需要一下條件 1,進入頁面可以觸發第1條數據的選中action

echarts環形圖配置

ntb etop ase trigger 圖形 HA 圖例 居中對齊 seam itemMoneys(){ let myChart = echarts.init(document.getElementById("money")) window.addEventListe

echarts的簡單應用之（二）餅圖

數據 rest 官網 獲取 這也 ucc 保存 折線圖 alt 　　接上一篇文章： echarts的簡單應用之（一）柱形圖：https://www.cnblogs.com/jylee/p/9359363.html 本篇文章講述餅圖，撇過折線圖不說，是因為折線圖與柱形圖的數據

echarts - 特殊需求實現代碼匯總之【餅圖】篇

targe div mage 餅圖 trigger 一個數 一個 format asc 2018-07-24 15:36:43 起 - 餅圖單項不同顏色的設置 效果圖： 實現： 說明： 其實很簡單，就是設置全局的color屬性即可。color屬性可以是一套數組，裏邊的

使用Echarts幾分鐘制作出折線圖、餅圖、柱狀圖等

tel 趨勢 nag 情況下 java row data 距離 主題 ECharts，縮寫來自Enterprise Charts。 ECharts，不僅是國內關註度最高的開源項目，還是中國第一個也是目前唯一一個入選了Github Explorer Data Visualiz