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>
