echarts 环形图（圆角） 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8     <title>Document</title>
  9     <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.js"></script>
 10 </head>
 11 
 12 
 13 <body>
 14     <div class="" id="baseSy" style="width: 300px; height: 300px;"></div>
 15     <script>
 16         
 17         function initEchartsBar1() {
 18             var chartDom = document.getElementById('baseSy');
 19             var myChart = echarts.init(chartDom);
 20             var option;
 21 
 22 
 23             option = {
 24                 title: {
 25                     text: '75',
 26                     textStyle: {
 27                         color: '#01c4a3',
 28                         fontSize: 40
 29                     },
 30                     subtext: '总分：100分',
 31                     subtextStyle: {
 32                         color: '#909090',
 33                     },
 34                     itemGap: -10, // 主副标题距离
 35                     left: 'center',
 36                     top: 'center'
 37                 },
 38                 angleAxis: {
 39                     max: 100, // 满分
 40                     clockwise: false, // 逆时针
 41                     // 隐藏刻度线
 42                     axisLine: {
 43                         show: false
 44                     },
 45                     axisTick: {
 46                         show: false
 47                     },
 48                     axisLabel: {
 49                         show: false
 50                     },
 51                     splitLine: {
 52                         show: false
 53                     }
 54                 },
 55                 radiusAxis: {
 56                     type: 'category',
 57                     // 隐藏刻度线
 58                     axisLine: {
 59                         show: false
 60                     },
 61                     axisTick: {
 62                         show: false
 63                     },
 64                     axisLabel: {
 65                         show: false
 66                     },
 67                     splitLine: {
 68                         show: false
 69                     }
 70                   },
 71                 polar: {
 72                     center: ['50%', '50%'],
 73                     radius: '140%' //图形大小
 74                 },
 75                 series: [{
 76                     type: 'bar',
 77                     data: [{
 78                         name: '作文得分',
 79                         value: 75,
 80                         itemStyle: {
 81                             normal: {
 82                                 color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
 83                                     offset: 0,
 84                                     color: '#aaf14f'
 85                                 }, {
 86                                     offset: 1,
 87                                     color: '#0acfa1'
 88                                 }])
 89                             }
 90                         },
 91                     }],
 92                     coordinateSystem: 'polar',
 93                     roundCap: true,
 94                     barWidth: 25,
 95                     barGap: '-100%', // 两环重叠
 96                     z: 2,
 97                 },{ // 灰色环
 98                     type: 'bar',
 99                     data: [{
100                         value: 100,
101                         itemStyle: {
102                             color: '#e2e2e2',
103                             shadowColor: 'rgba(0, 0, 0, 0.2)',
104                             shadowBlur: 5,
105                             shadowOffsetY: 2
106                         }
107                     }],
108                     coordinateSystem: 'polar',
109                     roundCap: true,
110                     barWidth: 25,
111                     barGap: '-100%', // 两环重叠
112                     z: 1
113                   }]
114             
115             };
116             option && myChart.setOption(option);
117         }
118         initEchartsBar1();
119     </script>
120 
121 
122 </body>
123 
124 
125 </html>

 

posted @ 2022-05-17 11:37  蓝色精灵jah  阅读(3577)  评论(0)    收藏  举报