echarts 官网
https://echarts.apache.org/examples/zh/index.html#chart-type-line

以下示例显示
587990ee8c3a0e1348facb6a1c608345.png
![图片](说一下SSO 单点登录和 OAuth2.0 的区别/d9eaa5f1a8b15aa7d7a7747408b256b5.png)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<p id="test" style="width: 234px;height:230px;"></p>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.5.0/echarts.common.js"></script>
<script>
createTorusEcharts('test');
function createTorusEcharts(row){
    const chartInstance = echarts.init(document.getElementById(row));
    const option = {
        // 圆环图配置项* * *
        color: ['#0086e5', '#c5c5c52e'],
        series: [
            {
                type: 'pie',
                radius: ['60%', '75%'], // 内外半径，形成圆环
                avoidLabelOverlap: false,
                label: {
                    show: false, // 是否显示标签
                    position: 'center', // 标签位置
                },
                emphasis: {
                    label: {
                    show: false,
                    fontSize: '20',
                    fontWeight: 'bold'
                    }
                },
                data: [123,342]
            }
        ],
        graphic: [{
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
                text: "80%",
                textAlign: 'center',
                fill: '#333',
                fontSize: 8
            }
        }]
    };
    chartInstance.setOption(option);
}
</script>