ECharts餅圖--環形效果

本文轉載自查看原文 2021-11-27 17:16 960 ECharts

  1 <!DOCTYPE html>
  2 <html>
  3 
  4 <head>
  5   <meta charset="utf-8">
  6   <title>常用圖表-環形圖</title>
  7 </head>
  8 
  9 <body>
 10   <div id="echarts" style="width: 600px;height: 400px;"></div>
 11 
 12   <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
 13   <script type="text/javascript">
 14     /* 
 15        餅圖是沒有X軸，    Y軸的
 16        常見效果：
 17          1. 顯示數值
 18            label
 19              
 20          2. 圓環
 21            radius: ['50%', '75%']
 22              
 23          3. 南丁格爾圖
 24            roseType: 'radius'
 25            每個餅圖的半徑都是不同的，取決於你的數據大小，約大的半徑越大
 26            
 27          4. 選中效果
 28            選中模式：selectedMode: 'single' // 選中的效果 single,multiple
 29            選中偏移量： selectedOffset: 30
 30       
 31       */
 32     const echartsEl = document.querySelector('#echarts');
 33     const mCharts = echarts.init(echartsEl);
 34     const pieData1 = [
 35       {
 36 
 37         value: 11231
 38 
 39       },
 40     ];
 41     const pieData2 = [
 42       {
 43 
 44         value: 40,
 45         itemStyle: {
 46           color: 'rgb(255,159,127)'
 47         }
 48 
 49       },
 50       {
 51 
 52         value: 60,
 53         itemStyle: {
 54           color: 'transparent'
 55         }
 56 
 57       },
 58     ]
 59     const pieData_taobao = [
 60       {
 61         name: '淘寶',
 62         value: 11231,
 63         itemStyle: {
 64           color: 'rgb(255,159,127)'
 65         }
 66       },
 67       {
 68         value: 1231,
 69         itemStyle: {
 70           color: 'transparent'
 71         }
 72       },
 73     ];
 74     const pieData = [
 75       {
 76         name: '淘寶',
 77         value: 11231
 78       },
 79       {
 80         name: '京東',
 81         value: 22673
 82       },
 83       {
 84         name: '唯品會',
 85         value: 6123
 86       },
 87       {
 88         name: '1號店',
 89         value: 8989
 90       },
 91       {
 92         name: '聚美優品',
 93         value: 6700
 94       }
 95     ]
 96     const option = {
 97       series: [
 98         {
 99           type: 'pie',
100           data: pieData1,
101           label: {
102             show: false, // 顯示文字，默認顯示
103           },
104           // radius: 20, // 餅圖的半徑，單位是像素
105           // radius: '20%', // 先去高度或者寬度較小的一方，然后取其中的一半，再乘以20%
106           radius: ['0%', '10%'], // 第0個元素代表的是內圓的半徑，第2個元素是外圓的半徑
107         },
108         {
109           type: 'pie',
110           data: pieData2,
111           label: {
112             show: false, // 顯示文字，默認顯示
113           },
114           // radius: 20, // 餅圖的半徑，單位是像素
115           // radius: '20%', // 先去高度或者寬度較小的一方，然后取其中的一半，再乘以20%
116           radius: ['10%', '50%'], // 第0個元素代表的是內圓的半徑，第2個元素是外圓的半徑
117         },
118         {
119           type: 'pie',
120           data: pieData_taobao,
121           label: {
122             show: false, // 顯示文字，默認顯示
123           },
124           // radius: 20, // 餅圖的半徑，單位是像素
125           // radius: '20%', // 先去高度或者寬度較小的一方，然后取其中的一半，再乘以20%
126           radius: ['50%', '75%'], // 第0個元素代表的是內圓的半徑，第2個元素是外圓的半徑
127 
128         }
129       ]
130     };
131     mCharts.setOption(option);
132   </script>
133 </body>
134 
135 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Echarts實現環形餅圖效果 ECharts之餅圖、環形圖 ECharts 環形餅圖配置 echart - 餅圖（環形） echarts實現環形圖 Echarts餅圖繪制 echarts 餅狀圖 echarts自制多層環形圖 echarts的3D環形圖 echarts餅圖點擊事件