ggfwjsc/src/view/echarts_education/pie1.vue

<template>
    <div ref="chart" style="width: 50%;height: 220px;"></div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts";

const chart = ref(); // 创建DOM引用

const datas = {
    value: 18,
    text: "留 守 儿 童"
}

let option = {
    series: [
        // 外圈背景
        {
            type: "pie",
            center: ["60%", "55%"],
            radius: ["50%", "82%"],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
                normal: {
                    borderWidth: 1,
                    borderColor: "rgba(193, 229, 255, .1)",
                    color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
                        {
                            offset: 1,
                            color: "rgba(127, 242, 255, .2)",
                        },
                        {
                            offset: 0,
                            color: "rgba(109, 195, 255, 0)",
                        },
                    ]),
                },
            },
            tooltip: {
                show: false,
            },
            label: {
                show: false,
            },
            data: [100],
        },
        /*内心原型图，展示整体数据概览*/
        {
            name: 'pie',
            type: 'pie',
            roundCap: true,
            clockWise: true,
            startAngle: 180,
            labelLine: {
                show: false
            },
            radius: ['50%', '70%'],
            hoverAnimation: false,
            center: ['60%', '55%'],
            data: [
                {
                    value: datas.value,
                    label: {
                        normal: {
                            formatter: '{d}{cell|%}\n{text|' + datas.text + '}',
                            position: 'center',
                            show: true,
                            textStyle: {
                                fontSize: '24',
                                fontWeight: 'normal',
                                color: '#fff',
                                lineHeight: 30,
                                rich: {
                                    cell: {
                                        fontSize: '24',
                                        fontWeight: 'normal',
                                        color: '#fff',
                                    },
                                    text: {
                                        fontSize: 16,
                                        fontFamily: 'FZLanTingHeiS-L-GB',
                                        color: '#fff',
                                    }
                                }
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
                                offset: 0,
                                color: 'rgba(0, 255, 250, 0.29)'
                            },
                            {
                                offset: 0.5,
                                color: 'rgba(0, 255, 250, 0.8)'
                            }, {
                                offset: 1,
                                color: 'rgba(0, 255, 250, 1)'
                            }]),
                            shadowColor: 'rgba(1,1,1,0.5)',
                            shadowBlur: 1
                        }
                    }
                },
                {
                    value: 100 - datas.value,
                    name: '',
                    itemStyle: {
                        normal: {
                            color: '#095b9b', // 未完成的圆环的颜色
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        },
                        emphasis: {
                            color: '#095b9b' // 未完成的圆环的颜色
                        }
                    }
                }]
        }
    ]
};

// 使用生命钩子
onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    // var myChart = echarts.init(document.getElementById('main'));
    // Vue3中： 需要引入
    var myChart = echarts.init(chart.value);

    // init(); // vue3.2没有this
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    // 单图表响应式: 跟随浏览器大小改变
    //   window.addEventListener("resize", () => {
    //     myChart.resize();
    //   });
});
</script>

<style scoped></style>