1. <div class="content_lisechart">
    2.     <div id="myChart" :style="{width: '100%', height: '100%'}"></div>
    3.             <div class="content_lisechartpos">
    4.                 <div class="content_lisechartpos_lis">
    5.                     <span>90</span>
    6.                     <span>分</span>
    7.                 </div>
    8.                 <div class="content_lisechartpos_lis2">
    9.                     <p>超越 <span>58%</span>的用户</p>
    10.                     <p>谨慎型</p>
    11.                 </div>
    12.         </div
    13. </div>
    1. .content_lisechartpos {
    2.     width: 190px;
    3.     height: 190px;
    4.     border-radius: 50%;
    5.     position: absolute;
    6.     top: 0;
    7.     right: 0;
    8.     left: 0;
    9.     bottom: 0;
    10.     margin: auto;
    11.     // background: rgba(0,0,0,0.5);
    13.      .content_lisechartpos_lis {
    14.         padding-top: 10px;
    15.         box-sizing: border-box;
    16.         text-align: center;
    17.         // border-bottom: 1px solid #CCCCCC;;
    18.         position: relative;
    20.         span:nth-child(1) {
    21.           font-size: 68px;
    22.           font-family: Barlow-SemiBold;
    23.           line-height: 82px;
    24.           color: #424854;
    25.           opacity: 1;
    26.         }
    28.         span:nth-child(2) {
    29.           font-size: 25px;
    30.           font-family: FZLTHJW--GB1-0;
    31.           line-height: 30px;
    32.           color: #424854;
    33.           opacity: 1;
    34.         }
    35.     }
    37.     .content_lisechartpos_lis:after {
    38.       content: " ";
    39.       width: 90%;
    40.       height: 1px;
    41.       background: #CCCCCC;
    42.       position: absolute;
    43.       bottom: 0;
    44.       left: 0;
    45.       right: 0;
    46.       margin: auto;
    47.     }
    48. }
    1. //rem 图表搭配
    2. remToPx(rem) {
    3.     const fontSize = document.documentElement.style.fontSize;
    4.     return Math.floor(rem * fontSize.replace('px', ''));
    5. },
    6. // 案例图表
    7. drawLine() {
    8. var that = this;
    9. var getvalue = [88];
    10. let myChart = that.$echarts.init(document.getElementById('myChart'))
    11. myChart.setOption({
    12.  title: {
    13.   // text: getvalue + '分',
    14.   // textStyle: {
    15.   //     color: '#28BCFE',
    16.   //     fontSize: this.remToPx(.5),
    17.   // },
    18.   // subtext: '综合得分',
    19.   // subtextStyle: {
    20.   //     color: '#666666',
    21.   //     fontSize:this.remToPx(.5),
    22.   // },
    23.   // itemGap:this.remToPx(.1),
    24.   // left: 'center',
    25.   // top: '43%',
    26. },
    27. tooltip: {
    28.   formatter: function(params) {
    29.         return '<span style="color: #fff;">综合得分：' + getvalue + '分</span>';
    30.     },
    31.   },
    33.   angleAxis: {
    34.     max: 100,
    35.     clockwise: true, // 逆时针
    36.     // 隐藏刻度线
    37.     show: false,
    38.     startAngle: 200, //起始角度
    39.   },
    40.   radiusAxis: {
    41.     type: 'category',
    42.         show: true,
    43.     axisLabel: {
    44.          show: false,
    45.     },
    46.     axisLine: {
    47.         show: false,
    48.     },
    49.     axisTick: {
    50.         show: false,
    51.     },
    52.   },
    53.   polar: {
    54.     center: ['50%', '50%'], //设置圆居中
    55.     radius: '150%', //图形大小 
    56.   },
    57.   series: [{
    58.     type: 'bar',
    59.     data: getvalue,
    60.     showBackground: true,
    61.     backgroundStyle: {
    62.     color: '#BDEBFF',
    63.          },
    64.     itemStyle: {
    65.       normal: {
    66.         // 设置阴影
    67.         shadowBlur:  that.remToPx(.3),
    68.         shadowColor: '#34BCFF',
    69.         shadowOffsetX:  that.remToPx(-0.1),
    70.         shadowOffsetY: that.remToPx(0.1) 
    71.       }
    72.     },
    73.     coordinateSystem: 'polar',
    74.     roundCap: true,
    75.     barWidth: that.remToPx(.2),
    76.     itemStyle: {
    77.       normal: {
    78.         opacity: 1,
    79.         color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    80.         offset: 0,
    81.         color: '#25BFFF',
    82.         },
    83.         {
    84.           offset: 1,
    85.           color: '#5284DE',
    86.         },
    87.         ]),
    88.       shadowBlur: that.remToPx(.1),
    89.       shadowColor: '#2A95F9',
    90.     },
    91.       },
    92.  }, ],
    93.  })
    94. },
    95. //vue 可直接引入 this.getDefaultSelected(myChart)
    97. //原生https://www.makeapie.com/editor.html?c=xaoiOl5b5m   案例已写好
    100. getDefaultSelected(myChart) {
    101.                 let index = 0;
    102.                 myChart.dispatchAction({
    103.                     type: 'highlight',
    104.                     seriesIndex: 0,
    105.                     dataIndex: 0,
    106.                 });
    107.                 myChart.on('mouseover', (e) => {
    108.                     if (e.dataIndex !== index) {
    109.                         myChart.dispatchAction({
    110.                             type: 'downplay',
    111.                             seriesIndex: 0,
    112.                             dataIndex: index,
    113.                         });
    114.                     }
    115.                 });
    116.                 myChart.on('mouseout', (e) => {
    117.                     index = e.dataIndex;
    118.                     myChart.dispatchAction({
    119.                         type: 'highlight',
    120.                         seriesIndex: 0,
    121.                         dataIndex: e.dataIndex,
    122.                     });
    123.                 });
    124.             },

    项目已经公用希望帮的到你
    饼图: https://www.makeapie.com/editor.html?c=xaoiOl5b5m
    效果图:
    image.png
    圆 : https://www.makeapie.com/editor.html?c=xk9Rxce3F6&v=2
    效果图:
    image.png