echart仪表盘，颜色设成渐变色。不显示仪表指针，环形里面文字控制样式换行

怼烎@ 2022-10-16 09:51 49阅读 0赞

![20210529143323509.png][]

我想要的效果

>   
> <!doctype html>  
> <html lang="en">  
>     <head>  
>         <meta charset="UTF-8">  
>         <title></title>  
>         <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">  
>         <META HTTP-EQUIV="expires" CONTENT="0">  
>         <meta name="renderer" content="webkit|ie-comp|ie-stand">  
>         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
>         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
> 
>         <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  
>         <script crossorigin="anonymous" integrity="sha512-xOe2BZp0tpJHvZ1VvR4FlSpFMT56imtpFMdv+mpe8x6w7XmMuTMCjtXOdJwyrvzPa77u4wcJPouWPylQHSVTxQ==" src="https://lib.baomitu.com/echarts/5.1.1/echarts.js"></script>  
>     </head>  
>     <body>  
>         <div id="main"></div>  
>     </body>  
>     <script>  
>          setchart("\#main",80,"正确率","60%","90%");  
>           
>         /\*仪表盘图标  \*/  
>         /\*  
>          \* @Author: xlz  
>          \* @Date: 2021-05-29 17:56:13  
>          \* @Last Modified by:xlz  
>          \* @Last Modified time: 2021-05-29 0912  
>          \*/  
>         // 使用方式  
>         //setchart("\#main",80,"正确率","60%");      
>         //slector 仪表盘容器 :"\#id"  
>         //grade  得分:0-100  
>         //percentname     百分比名称 ：正确率  
>         //gradepercent  百分数 ：60%  
>         //defeatpercent打败同学百分比：90%  
>         function setchart(selector,grade,percentname,gradepercent,defeatpercent)\{  
>             $(selector).css(\{width:"300px",height:"263px"\});//为容器设置宽高  
>             var chartDom = $(selector)\[0\];  
>             var myChart = echarts.init(chartDom);  
>             var option;  
>             option = \{  
>                 series: \[\{  
>                     type: 'gauge',  
>                     startAngle:215,  
>                     endAngle:-35,  
>                     min: 0,  
>                     max: 100,  
>                     splitNumber: 10,//划分的区域  
>                     itemStyle:\{//渐变颜色  
>                         color:new echarts.graphic.LinearGradient(1, 1, 0, 1, \[\{  
>                              offset: 1,  
>                              color:'\#2F92F8'  
>                             \}, \{  
>                             offset: 0,  
>                             color:'\#5EC2FC'  
>                       \}\])  
>                     \},  
>                     progress: \{  
>                         show: true,  
>                         roundCap: true,  
>                         width: 13 //显示的环形的宽度  
>                     \},  
>                     pointer: \{//不显示仪表指针  
>                         show:false  
>                     \},  
>                     axisLine: \{//仪表盘轴线相关配置，即里面的灰色环形  
>                         roundCap: true,  
>                         distance:14,  
>                         color: '\#D1D1D1',  
>                         lineStyle: \{  
>                             width: 13  
>                         \}  
>                     \},  
>                     axisTick: \{//刻度样式  
>                         splitNumber: 1,  
>                         lineStyle: \{  
>                             width:0,//不显示刻度  
>                         \}  
>                     \},  
>                     splitLine: \{//分隔点样式。  
>                         distance:15,//文字距离环形的距离  
>                         length: 1,  
>                         lineStyle: \{  
>                             width:0  
>                         \}  
>                     \},  
>                     axisLabel: \{//里面得刻度数字  
>                         distance: 8,  
>                         color: '\#D1D1D1',  
>                         fontSize:12  
>                     \},  
>                     title: \{  
>                         show: false  
>                     \},  
>                     detail: \{  
>                         fontSize: 30,  
>                         offsetCenter: \[0, '-10%'\],  
>                         valueAnimation: true,  
>                         color: '\#1C93FE',  
>                        formatter: function (value) \{  
>                        return gradepercent  
>                   \},  
>                \},  
>            data: \[\{  
>                 value:grade,    
>                name:percentname,  
>             \}\]  
>                 \}\]  
>             \};  
>               
>             option && myChart.setOption(option);
> 
> var html='<div style="font-size: 13px;color: \#3C3C3C;font-weight:600;position: absolute;left: 50%;transform: translateX(-50%);top: 195px;">打败'  
>             +'<span style="font-size:13px;color:\#1C93FE;">'+defeatpercent+'</span>的同学</div>';
> 
> //打败同学内容添加到canvas之后  
>     $(selector).find("canvas").after(html);  
>         \}  
>           
>           
>           
>           
>     </script>  
> </html>

最后发现在手机上出现了锯齿的问题。图标没有那么清晰。

可以参考这个文章修改：

https://blog.csdn.net/qq\_33769914/article/details/117385469

[20210529143323509.png]: /images/20221014/aaef0f652d584540ba29905915d74750.png