fls-asp-hm-intelligent-tutoring/src/views/components/HeimaPage.vue

<script setup lang="ts">
import * as echarts from 'echarts';
import { nextTick, onMounted } from 'vue';

const echartsRander = () => {
    var chartDom = document.getElementById('chartsId');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '4.大模型复盘及话术建议',
            left: 'center',
            // top: '53%',
            padding: [15, 0],
            textStyle: {
                color: '#000',
                fontSize: 14,
                fontWeight: '400',
                align: 'center',
            }
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '评分标准',
                type: 'pie',
                radius: ['30%', '45%'],
                center: ['50%', '60%'],
                avoidLabelOverlap: false,

                label: {
                    fontSize: 6,
                },
                labelLine: {
                    show: true, // 显示引导线
                    length: 10,
                    length2: 6,
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

                data: [
                    { value: 20, name: '自我介绍' },
                    { value: 18, name: '画像采集' },
                    { value: 15, name: '需求挖掘' },
                    { value: 20, name: '沟通转化' },
                ]
            }
        ],

    };

    option && myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
}
onMounted(() => {
    nextTick(() => {
        echartsRander()
    })
})

</script>

<template>
    <div ref="chartDom" id="chartsId" style="width: 100%; height: 100%;"></div>
</template>