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>

 

posted @ 2021-11-27 17:16  sky-su  阅读(1265)  评论(0)    收藏  举报